:root{
  --text:#0d1227;--muted:#747b8d;--muted2:#9aa1b2;--line:#e9ebf2;--line2:#f1f2f7;
  --primary:var(--brand);--primary2:#7568ff;--green:#18b966;--yellow:#e2a600;--red:#e8645d;
  --container:1120px;--shadow:0 24px 80px rgba(24,28,52,.08)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:#fff;letter-spacing:-.018em}a{text-decoration:none;color:inherit}.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
.page-grid{position:relative;border-bottom:1px solid var(--line2);background:linear-gradient(90deg,transparent 0,transparent calc(50% - 560px),var(--line2) calc(50% - 560px),var(--line2) calc(50% - 559px),transparent calc(50% - 559px),transparent calc(50% - 280px),rgba(241,242,247,.64) calc(50% - 280px),rgba(241,242,247,.64) calc(50% - 279px),transparent calc(50% - 279px),transparent 50%,rgba(241,242,247,.55) 50%,rgba(241,242,247,.55) calc(50% + 1px),transparent calc(50% + 1px),transparent calc(50% + 280px),rgba(241,242,247,.64) calc(50% + 280px),rgba(241,242,247,.64) calc(50% + 281px),transparent calc(50% + 281px),transparent calc(50% + 560px),var(--line2) calc(50% + 560px),var(--line2) calc(50% + 561px),transparent calc(50% + 561px))}
.site-header{height:72px;position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px}.brand{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:-.045em}.brand-mark{width:24px;height:24px;border-radius:8px;display:inline-block;background:linear-gradient(135deg,var(--brand) 0%,#8c7dff 48%,#ded9ff 49%,#fff 100%);position:relative;box-shadow:inset 0 0 0 1px rgba(var(--brand-rgb), .12)}.brand-mark span{position:absolute;right:-2px;top:-2px;width:11px;height:11px;border-radius:50%;background:#dcd7ff}.nav-links{display:flex;gap:36px;font-size:15px;font-weight:650}.nav-links a:hover{color:var(--primary)}.nav-actions{display:flex;gap:12px}.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 23px;border-radius:6px;border:1px solid transparent;font-weight:720;font-size:15px;transition:.2s ease;white-space:nowrap}.btn-primary{color:#fff;background:var(--primary);box-shadow:0 12px 28px rgba(var(--brand-rgb), .22)}.btn-primary:hover{transform:translateY(-1px);background:#4f40ec}.btn-secondary{color:#12172b;background:#fff;border-color:var(--line)}.btn-secondary:hover{box-shadow:0 10px 28px rgba(15,20,40,.06)}.btn-large{min-height:50px;padding:0 28px}.menu-toggle{display:none;background:transparent;border:0;padding:8px}.menu-toggle span{display:block;width:22px;height:2px;background:#11162b;margin:5px 0}
.hero{min-height:760px;display:flex;align-items:center}.hero-inner{position:relative;z-index:1;padding:115px 0 130px}.eyebrow{margin:0 0 24px;color:var(--primary);font-size:14px;font-weight:820;letter-spacing:.08em;text-transform:uppercase}.hero h1{max-width:840px;margin:0;font-size:clamp(52px,6.2vw,82px);line-height:1.03;letter-spacing:-.075em;font-weight:800}.hero h1 span{display:block;color:var(--primary2)}.hero-copy{max-width:760px;margin:28px 0 0;color:var(--muted);font-size:21px;line-height:1.62;letter-spacing:-.035em}.hero-actions{margin-top:34px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.integration-cluster{display:flex;align-items:center;margin-left:8px;color:var(--muted);font-size:15px}.mini-logo{width:21px;height:21px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:white;border:2px solid white;margin-left:-4px;box-shadow:0 6px 18px rgba(15,20,40,.08)}.mini-logo.hub{background:#ff6b3d;margin-left:0}.mini-logo.wa{background:#19c466}.mini-logo.slack{background:var(--brand)}.mini-logo.gm{background:#e64b3c}.mini-logo.sheet{background:#14a05d}.integration-cluster span:last-child{margin-left:12px}.pixel{position:absolute;width:18px;height:18px;background:#e2dfff;opacity:.8}.p1{left:7%;top:20%}.p2{left:38%;bottom:10%}.p3{right:33%;top:18%;background:#e3e5eb}.p4{right:8%;top:35%}
.playbook-strip{padding:56px 0 58px}.strip-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:28px}.strip-heading h2{margin:0;font-size:26px;letter-spacing:-.05em}.strip-heading>p{max-width:520px;color:var(--muted);line-height:1.55;font-size:15px;margin:0}.playbook-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}.playbook-grid article{border:1px solid var(--line);border-radius:14px;background:#fff;padding:20px 18px;min-height:180px;transition:.2s}.playbook-grid article:hover{transform:translateY(-2px);box-shadow:0 18px 45px rgba(17,22,45,.07)}.play-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--primary);background:#f0eeff;font-weight:900;margin-bottom:18px}.playbook-grid h3{margin:0 0 9px;font-size:18px;letter-spacing:-.045em}.playbook-grid p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}
.case-section{padding:84px 0 78px}.case-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:26px}.case-title{display:flex;align-items:center;gap:18px}.case-title h2{margin:0;font-size:26px;letter-spacing:-.045em}.diamond-icon{width:30px;height:30px;border:3px solid #5ccce8;border-radius:6px;transform:rotate(45deg);display:inline-block;position:relative}.diamond-icon:after{content:"";position:absolute;inset:5px;border-top:2px solid #5ccce8;border-left:2px solid #5ccce8}.workflow-window{border:1px solid var(--line);background:linear-gradient(135deg,#f4f6ff 0%,#fff 52%,#f6f3ff 100%);box-shadow:var(--shadow)}.window-bar{height:48px;display:flex;align-items:center;gap:9px;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.62)}.window-bar span{width:10px;height:10px;border-radius:50%;background:#d2d5df}.window-bar p{margin-left:12px;color:#6f7688;font-weight:720;font-size:14px}.workflow-canvas{min-height:405px;display:grid;grid-template-columns:1fr 180px 1fr;align-items:center;gap:34px;padding:54px 48px}.phone-mock,.crm-mock{border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.86);padding:24px;box-shadow:0 22px 70px rgba(20,24,50,.08)}.mock-title{font-size:18px;font-weight:820;margin-bottom:20px}.bubble{max-width:86%;padding:14px 16px;margin:12px 0;border-radius:17px;font-size:14.5px;line-height:1.45}.bubble.left{background:#eef0f7;color:#2c3347}.bubble.right{background:var(--primary);color:#fff;margin-left:auto}.agent-orb{height:170px;display:grid;place-items:center;position:relative}.agent-orb span{position:absolute;width:96px;height:96px;border-radius:50%;border:1px solid rgba(var(--brand-rgb), .18);animation:pulse 2.7s infinite ease-out}.agent-orb span:nth-child(2){animation-delay:.4s}.agent-orb span:nth-child(3){animation-delay:.8s}.agent-orb button{width:72px;height:72px;border-radius:50%;border:1px solid rgba(var(--brand-rgb), .13);background:#fff;color:var(--primary);box-shadow:0 24px 70px rgba(var(--brand-rgb), .22)}@keyframes pulse{0%{transform:scale(.6);opacity:.95}100%{transform:scale(1.55);opacity:0}}.crm-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--line2);color:var(--muted)}.crm-row:last-child{border-bottom:0}.crm-row b{color:var(--text)}.crm-row strong{color:var(--green)}.crm-row.active{background:#f3f1ff;margin:-5px -8px 6px;padding:15px 8px;border-radius:12px}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border-bottom:1px solid var(--line2)}.stats-row div{padding:8px 0}.stats-row strong{font-size:22px;letter-spacing:-.05em}.stats-row span{margin-left:8px;color:var(--muted)}
.process-section{padding:108px 0 0}.section-heading.left{max-width:560px;margin-bottom:60px}.section-heading h2{margin:0;font-size:42px;line-height:1.16;font-weight:780;letter-spacing:-.065em}.section-heading h2 span{color:var(--primary2)}.section-heading p{margin:18px 0 0;color:var(--muted);font-size:18px;line-height:1.7}.section-heading.centered{text-align:center;max-width:760px;margin:105px auto 0}.levels{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);background:#fff}.levels article{min-height:314px;padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.levels h3{margin:0 0 42px;font-size:21px;letter-spacing:-.045em}.levels h3 span{font-size:16px;color:var(--muted2)}.level-active h3{color:var(--primary)}.mini-diagram{border:1px dashed #d9dce8;border-radius:8px;padding:16px;display:grid;gap:10px;margin-bottom:18px}.mini-diagram p{margin:0;color:#626a7e;font-size:13px;position:relative;padding-left:18px}.mini-diagram p:before{content:"";position:absolute;left:0;top:5px;width:8px;height:8px;border-radius:50%;border:1px solid #bdc2d0}.mini-diagram.purple{background:#fbfaff;border-color:#bdb7ff}.mini-diagram.purple p{color:var(--primary)}.mini-diagram.purple p:before{background:var(--primary);border-color:var(--primary)}.levels article>p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.flow-section{padding:96px 0 108px}.center-label{text-align:center;color:var(--muted2);font-size:14px;margin:0 0 45px}.timeline{width:80%;margin:0 auto 24px;display:grid;grid-template-columns:repeat(4,1fr);position:relative}.timeline:before{content:"";position:absolute;top:22px;left:12%;right:12%;height:1px;background:#d7d9e5}.timeline div{justify-self:center;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;position:relative;z-index:1;background:#f4f5f8;color:#7c8396}.timeline .active{background:var(--primary);color:#fff;box-shadow:0 10px 28px rgba(var(--brand-rgb), .25)}.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#fff}.flow-grid article{min-height:285px;padding:28px;border-right:1px solid var(--line)}.flow-grid article:last-child{border-right:0}.flow-grid h3{text-align:center;min-height:58px;margin:0 0 24px;font-size:18px;line-height:1.35;letter-spacing:-.045em}.flow-grid ul{list-style:none;margin:0;padding:0}.flow-grid li{padding:12px 0 12px 26px;color:#667085;position:relative}.flow-grid li:before{content:"";position:absolute;left:0;top:18px;width:9px;height:9px;border-radius:50%;border:1px solid #c4c9d5;background:#fff}.flow-grid .active-flow{background:#fbfbff;box-shadow:inset 0 0 0 1px rgba(var(--brand-rgb), .18)}.flow-grid .active-flow li:before{background:var(--primary);border-color:var(--primary)}
.build-section{padding:70px 0 90px}.build-cards{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:#fff}.build-cards article{padding:36px;border-right:1px solid var(--line)}.build-cards article:last-child{border-right:0}.mini-product{height:150px;border:1px solid var(--line);border-radius:10px;margin-bottom:28px;padding:18px;overflow:hidden}.build-one{display:grid;gap:11px;align-content:start}.build-one p{margin:0 0 8px;font-weight:800}.build-one span{color:#687084;font-size:14px}.build-two{position:relative;background:radial-gradient(circle at 50% 50%,#fff,#f8f8ff)}.build-two div{position:absolute;width:72px;height:34px;border:1px solid var(--line);border-radius:9px;background:#fff}.build-two div:nth-child(1){left:30px;top:25px}.build-two div:nth-child(2){right:30px;top:38px}.build-two div:nth-child(3){left:75px;bottom:24px;background:var(--brand-soft)}.build-two div:nth-child(4){right:75px;bottom:28px}.build-three{background:#171719;color:#e7e7e9;display:grid;gap:12px;align-content:start}.build-three code,.build-three span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.build-three span{color:#c7c7ce}.build-cards h3{margin:0 0 12px;font-size:22px;letter-spacing:-.045em}.build-cards p{margin:0 0 22px;color:var(--muted);line-height:1.65}.build-cards small{display:inline-flex;border:1px solid #dcdfea;border-radius:5px;padding:5px 10px;color:#5e6578}
.quality-section{padding:0 0 110px}.quality-card{max-width:930px;margin:0 auto;border:1px solid var(--line);border-radius:8px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;background:#fff;box-shadow:var(--shadow)}.chart-side,.eval-side{padding:34px}.chart-header{display:flex;justify-content:space-between;color:var(--muted)}.chart-header p{margin:0;font-weight:800;color:var(--text)}.score{margin-top:12px;font-size:34px;font-weight:820;letter-spacing:-.06em}.score small{font-size:14px;color:var(--green);letter-spacing:-.02em}.threshold{color:var(--muted2);font-size:13px;margin-top:50px;padding-bottom:10px;border-bottom:1px dashed #cfd3e1}.bar-chart{height:220px;display:flex;align-items:end;gap:10px;padding-top:18px}.bar-chart i{flex:1;background:#d7ddff;display:block;border-radius:2px 2px 0 0}.bar-chart i.accent{background:var(--primary)}.eval-side{border-left:1px solid var(--line)}.eval-title{display:flex;align-items:center;gap:12px;padding-bottom:22px;border-bottom:1px solid var(--line2)}.avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#f0eeff;color:var(--primary);font-size:10px;font-weight:900}.alert-row{display:flex;justify-content:space-between;padding:18px 0;color:#20263b}.alert-row span{color:var(--muted2);font-size:14px}.metric{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:8px;padding:17px 0;border-top:1px solid var(--line2);color:#42495c}.metric span{width:8px;height:8px;border-radius:50%}.metric.good span{background:var(--green)}.metric.warn span{background:var(--yellow)}.metric.good b{color:var(--green)}.metric.warn b{color:var(--yellow)}.note{color:var(--muted);font-size:14px}
.governance-section{padding:110px 0}.governance-grid{max-width:860px;margin-top:72px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line2);background:rgba(255,255,255,.72)}.governance-grid article{padding:34px 34px 40px;min-height:190px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2)}.governance-grid article:nth-child(3n){border-right:0}.governance-grid article:nth-last-child(-n+3){border-bottom:0}.governance-grid article span{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:#f0eeff;color:var(--primary);margin-bottom:22px;font-size:16px}.governance-grid h3{margin:0 0 10px;font-size:16px}.governance-grid p{margin:0;color:#6c7386;line-height:1.55;font-size:14px}
.integrations-section{padding:118px 0 130px;text-align:center}.integrations-section h2{margin:0 0 40px;font-size:42px;letter-spacing:-.065em}.integrations-section h2 span{color:var(--primary2)}.app-grid{max-width:790px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:24px}.app-grid div{display:grid;justify-items:center;gap:9px}.logo{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:15px;font-weight:900;box-shadow:0 18px 36px rgba(20,25,50,.1)}.app-grid b{font-size:12px;color:#1d2338}.logo.hub{background:#ff6b3d}.logo.sf{background:#2aa8f2}.logo.slack{background:var(--brand)}.logo.gmail{background:#e84d3d}.logo.sheets{background:#15a05d}.logo.linkedin{background:#0a66c2}.logo.notion{background:#111}.logo.wa{background:#19c466}.logo.twilio{background:#e32735}.logo.zendesk{background:#11382f}.logo.intercom{background:#255ee8}.logo.airtable{background:#f4b400}.logo.cal{background:#11162b}.logo.zap{background:#ff9a00}.logo.n8n{background:#ea4b71}.logo.stripe{background:#635bff}.logo.shop{background:#77b255}.logo.api{background:#6d7487}.ip1{left:7%;top:38%}.ip2{right:9%;top:32%}
.comparison-section{padding:105px 0 90px}.comparison-table{margin-top:56px;border:1px solid var(--line);background:#fff}.row{display:grid;grid-template-columns:1.05fr 1.35fr 1.35fr;border-bottom:1px solid var(--line2)}.row:last-child{border-bottom:0}.row>div{padding:22px 24px;color:#51586c;line-height:1.55;border-right:1px solid var(--line2)}.row>div:last-child{border-right:0}.row>div:first-child{font-weight:800;color:#171c30}.row.head>div{font-weight:900;color:#171c30}.row.head>div:nth-child(2){color:var(--primary)}.check,.minus,.cross{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;margin-right:10px;font-size:12px;font-weight:900}.check{background:#e9f9ef;color:var(--green)}.minus{background:#fff6dc;color:#c58c00}.cross{background:#ffeceb;color:var(--red)}
.final-cta{padding:96px 0 112px}.cta-card{max-width:850px;margin:0 auto;text-align:center;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.88);box-shadow:0 28px 90px rgba(20,24,50,.08);padding:58px 56px}.cta-card h2{max-width:720px;margin:0 auto;font-size:44px;line-height:1.25;letter-spacing:-.065em}.cta-card>p:not(.eyebrow){max-width:690px;margin:20px auto 0;color:var(--muted);font-size:18px;line-height:1.7}.cta-actions{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}.cta-steps{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}.cta-steps span{border:1px solid var(--line);border-radius:999px;padding:9px 14px;color:#676f82;font-size:13px;background:#fff}.footer{padding:64px 0 76px;border-top:1px solid var(--line2)}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:70px}.footer p{margin:18px 0 0;max-width:285px;color:var(--muted);line-height:1.55}.socials{display:flex;gap:14px;margin-top:22px}.footer h4{margin:0 0 18px;font-size:14px}.footer a:not(.brand){display:block;margin:12px 0;color:#747b8d;font-size:14px}
@media(max-width:1060px){.playbook-grid{grid-template-columns:repeat(3,1fr)}.workflow-canvas{grid-template-columns:1fr;padding:32px}.agent-orb{height:100px}.levels,.flow-grid,.build-cards{grid-template-columns:repeat(2,1fr)}.app-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.menu-toggle{display:block}.nav{padding:0 20px}.nav-links,.nav-actions{display:none;position:absolute;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:20px 24px}.nav-links{top:72px;flex-direction:column;gap:18px}.nav-actions{top:270px;justify-content:flex-start}body.menu-open .nav-links,body.menu-open .nav-actions{display:flex}.strip-heading{display:block}.strip-heading>p{margin-top:14px}.quality-card{grid-template-columns:1fr}.eval-side{border-left:0;border-top:1px solid var(--line)}.governance-grid{grid-template-columns:repeat(2,1fr)}.governance-grid article:nth-child(3n){border-right:1px solid var(--line2)}.governance-grid article:nth-child(2n){border-right:0}.governance-grid article:nth-last-child(-n+3){border-bottom:1px solid var(--line2)}.governance-grid article:nth-last-child(-n+2){border-bottom:0}.row{grid-template-columns:1fr}.row>div{border-right:0;border-bottom:1px solid var(--line2)}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.container{width:calc(100% - 28px)}.hero{min-height:auto}.hero-inner{padding:88px 0 105px}.hero h1{font-size:43px}.hero-copy{font-size:18px}.btn-large,.hero-actions .btn{width:100%}.integration-cluster{width:100%;margin:8px 0 0}.playbook-grid,.levels,.flow-grid,.build-cards,.governance-grid,.stats-row,.footer-grid{grid-template-columns:1fr}.case-heading{align-items:flex-start;flex-direction:column}.section-heading h2,.integrations-section h2,.cta-card h2{font-size:34px}.app-grid{grid-template-columns:repeat(2,1fr)}.cta-card{padding:40px 22px}}


/* =========================
   HERO VISUAL FIX v4
   Target: closer to Relevance AI hero
   ========================= */

/* Remove internal grid lines from hero. Keep only outer container boundary lines. */
.hero.page-grid{
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(50% - 540px),
      rgba(232,234,242,.78) calc(50% - 540px),
      rgba(232,234,242,.78) calc(50% - 539px),
      transparent calc(50% - 539px),
      transparent calc(50% + 540px),
      rgba(232,234,242,.78) calc(50% + 540px),
      rgba(232,234,242,.78) calc(50% + 541px),
      transparent calc(50% + 541px)
    ) !important;
}

/* Put the hero content closer to the reference: narrower and more centered, not too far left. */
.hero .container{
  width:min(970px, calc(100% - 48px));
}

/* Font/weight/spacing closer to the reference hero. */
.hero h1,
.hero h1 span{
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.hero h1{
  max-width: 760px !important;
  font-size: clamp(48px, 5.15vw, 68px) !important;
  line-height: 1.19 !important;
  letter-spacing: -0.062em !important;
  font-weight: 680 !important;
}

.hero h1 span{
  font-weight: 680 !important;
  color: #6f63ff !important;
}

.hero-copy{
  max-width: 735px !important;
  margin-top: 26px !important;
  font-size: 20px !important;
  line-height: 1.7 !important;
  letter-spacing: -0.022em !important;
  font-weight: 450 !important;
  color: #7b8294 !important;
}

.eyebrow{
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .11em !important;
  color: var(--brand) !important;
}

/* Keep random pixels, but place them away from the headline. */
.hero .p1{left:7%;top:22%}
.hero .p2{left:38%;bottom:7%}
.hero .p3{right:32%;top:18%;background:#e3e5eb}
.hero .p4{right:8%;top:34%}

/* Make hero integration icons real and visually closer to the reference small icon cluster. */
.integration-cluster{
  gap: 0 !important;
  color: #7b8294 !important;
  font-size: 15px !important;
}

.integration-cluster .mini-logo{
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 2px solid #fff !important;
  margin-left: -3px !important;
  box-shadow: 0 5px 14px rgba(15,20,40,.08) !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.integration-cluster .mini-logo:first-child{
  margin-left: 0 !important;
}

.integration-cluster .mini-logo img{
  width: 14px !important;
  height: 14px !important;
  display:block !important;
}

.integration-cluster span:last-child{
  margin-left: 12px !important;
}

/* Button polish */
.hero .btn{
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
}

.hero .btn-large{
  min-height: 48px !important;
  padding: 0 27px !important;
}

/* Header typography closer to the reference */
.nav-links,
.nav-actions .btn,
.brand{
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.nav-links{
  font-weight: 560 !important;
}

.brand{
  font-weight: 720 !important;
}

/* Mobile safety */
@media(max-width: 640px){
  .hero .container{
    width: calc(100% - 28px);
  }
  .hero h1{
    font-size: 43px !important;
    line-height: 1.12 !important;
  }
}


/* =========================
   HERO FIX v5 — exact issues from screenshot
   ========================= */

/* Make vertical boundary lines start from the very top/header too. */
.site-header{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.92) 0,
      rgba(255,255,255,.92) calc(50% - 540px),
      rgba(232,234,242,.78) calc(50% - 540px),
      rgba(232,234,242,.78) calc(50% - 539px),
      rgba(255,255,255,.92) calc(50% - 539px),
      rgba(255,255,255,.92) calc(50% + 540px),
      rgba(232,234,242,.78) calc(50% + 540px),
      rgba(232,234,242,.78) calc(50% + 541px),
      rgba(255,255,255,.92) calc(50% + 541px)
    ) !important;
  backdrop-filter: blur(18px);
}

/* Hero grid: only outer vertical rails, no content-cutting internal lines. */
.hero.page-grid{
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(50% - 540px),
      rgba(232,234,242,.78) calc(50% - 540px),
      rgba(232,234,242,.78) calc(50% - 539px),
      transparent calc(50% - 539px),
      transparent calc(50% + 540px),
      rgba(232,234,242,.78) calc(50% + 540px),
      rgba(232,234,242,.78) calc(50% + 541px),
      transparent calc(50% + 541px)
    ) !important;
}

/* Fonts: current version was too bold/chunky. This is intentionally lighter. */
.hero .container{
  width: min(1080px, calc(100% - 48px)) !important;
}

.hero h1{
  max-width: 760px !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(48px, 5vw, 66px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.055em !important;
  font-weight: 560 !important;
  text-rendering: geometricPrecision;
}

.hero h1 span{
  color:#6f63ff !important;
  font-weight:560 !important;
}

.hero-copy{
  max-width: 730px !important;
  font-size: 20px !important;
  line-height: 1.72 !important;
  color:#7d8495 !important;
  font-weight:400 !important;
  letter-spacing:-0.018em !important;
}

.eyebrow{
  font-weight: 700 !important;
  letter-spacing:.105em !important;
}

/* Real-ish brand marks without external images, so no broken placeholders. */
.integration-cluster{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
}

.integration-cluster .mini-logo{
  position:relative !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  border-radius:50% !important;
  background:#fff !important;
  border:2px solid #fff !important;
  margin-left:-3px !important;
  box-shadow:0 5px 14px rgba(15,20,40,.08) !important;
  overflow:hidden !important;
}

.integration-cluster .mini-logo:first-child{
  margin-left:0 !important;
}

.integration-cluster .mini-logo img{
  display:none !important;
}

/* HubSpot */
.hubspot-mark{
  background:#fff !important;
}
.hubspot-mark:before{
  content:"";
  position:absolute;
  width:7px;height:7px;
  border:2px solid #ff5c35;
  border-radius:50%;
  left:5px;top:5px;
}
.hubspot-mark:after{
  content:"";
  position:absolute;
  width:9px;height:2px;
  background:#ff5c35;
  transform:rotate(38deg);
  left:2px;top:4px;
  box-shadow:6px -3px 0 -0.5px #ff5c35;
}

/* Salesforce cloud */
.salesforce-mark{
  background:#00a1e0 !important;
}
.salesforce-mark:before{
  content:"";
  position:absolute;
  width:13px;height:7px;
  border-radius:10px;
  background:#fff;
  left:2px;top:6px;
}
.salesforce-mark:after{
  content:"";
  position:absolute;
  width:7px;height:7px;
  border-radius:50%;
  background:#fff;
  left:5px;top:3px;
  box-shadow:5px 2px 0 -1px #fff;
}

/* Slack-like colored plus */
.slack-mark{
  background:#fff !important;
}
.slack-mark:before{
  content:"";
  position:absolute;
  width:4px;height:12px;
  background:#36c5f0;
  border-radius:3px;
  left:7px;top:3px;
  box-shadow:
    -4px 4px 0 #2eb67d,
    4px 0 0 #e01e5a,
    4px 4px 0 #ecb22e;
  transform:rotate(45deg);
}

/* Gmail envelope */
.gmail-mark{
  background:#fff !important;
}
.gmail-mark:before{
  content:"";
  position:absolute;
  left:3px;right:3px;top:5px;bottom:4px;
  border-left:2px solid #ea4335;
  border-right:2px solid #4285f4;
  border-bottom:2px solid #34a853;
  border-radius:2px;
}
.gmail-mark:after{
  content:"";
  position:absolute;
  width:10px;height:10px;
  border-top:2px solid #ea4335;
  border-right:2px solid #fbbc04;
  transform:rotate(135deg);
  left:4px;top:2px;
}

/* Google Sheets */
.sheets-mark{
  background:#34a853 !important;
  border-radius:4px !important;
}
.sheets-mark:before{
  content:"";
  position:absolute;
  left:5px;top:4px;
  width:8px;height:10px;
  background:#fff;
  border-radius:1px;
}
.sheets-mark:after{
  content:"";
  position:absolute;
  left:6px;top:7px;
  width:6px;height:1px;
  background:#34a853;
  box-shadow:0 3px 0 #34a853,0 6px 0 #34a853;
}

/* Remove old color-circle classes if old markup remains somewhere. */
.mini-logo.hub,
.mini-logo.wa,
.mini-logo.slack,
.mini-logo.gm,
.mini-logo.sheet{
  background:#fff !important;
  color:transparent !important;
}

.integration-cluster span:last-child{
  margin-left:12px !important;
  color:#7d8495 !important;
}

/* Reposition decorative squares away from text but closer to reference. */
.hero .p1{left:7%;top:22% !important;}
.hero .p2{left:38%;bottom:7% !important;}
.hero .p3{right:34%;top:18% !important;background:#e3e5eb !important;}
.hero .p4{right:8%;top:35% !important;}


/* =========================
   HERO FIX v6
   - nav links left aligned like reference
   - better inline integration icons
   - more random boxes
   ========================= */

/* Header layout: logo left, nav immediately after logo, CTA right */
.nav{
  justify-content:flex-start !important;
  gap:0 !important;
}

.nav .brand{
  flex:0 0 auto !important;
}

.nav-links{
  margin-left:72px !important;
  margin-right:auto !important;
  justify-content:flex-start !important;
}

.nav-actions{
  margin-left:auto !important;
}

/* Better mini integration icons: no placeholders, clean real-looking SVG marks */
.integration-cluster{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  margin-left:10px !important;
}

.integration-cluster .brand-icon{
  width:19px !important;
  height:19px !important;
  min-width:19px !important;
  border-radius:50% !important;
  background:#fff !important;
  border:2px solid #fff !important;
  box-shadow:0 7px 16px rgba(15,20,40,.10) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  margin-left:-3px !important;
}

.integration-cluster .brand-icon:first-child{
  margin-left:0 !important;
}

.integration-cluster .brand-icon svg{
  width:17px !important;
  height:17px !important;
  display:block !important;
}

.integration-cluster > span:last-child{
  margin-left:12px !important;
  color:#747b8d !important;
}

/* Hide any old mini-logo rules if cached/old markup appears */
.integration-cluster .mini-logo{
  display:none !important;
}

/* Double the subtle random boxes in the hero without disturbing content */
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(#e3e0ff,#e3e0ff) 12% 26% / 16px 16px no-repeat,
    linear-gradient(#e8e9ee,#e8e9ee) 63% 20% / 17px 17px no-repeat,
    linear-gradient(#e1ddff,#e1ddff) 92% 45% / 16px 16px no-repeat,
    linear-gradient(#ebe9ff,#ebe9ff) 38% 92% / 18px 18px no-repeat,
    linear-gradient(#e7e9ef,#e7e9ef) 67% 18% / 14px 14px no-repeat,
    linear-gradient(#e6e3ff,#e6e3ff) 7% 22% / 13px 13px no-repeat,
    linear-gradient(#e4e1ff,#e4e1ff) 91% 33% / 13px 13px no-repeat,
    linear-gradient(#ecebff,#ecebff) 35% 88% / 13px 13px no-repeat;
  opacity:.78;
}

.hero .pixel{
  display:none !important;
}

.hero .container{
  z-index:1 !important;
}

/* Slightly closer nav text appearance */
.nav-links a{
  font-weight:560 !important;
  letter-spacing:-.018em !important;
}

/* Keep mobile nav usable */
@media(max-width:860px){
  .nav{
    justify-content:space-between !important;
  }
  .nav-links{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .nav-actions{
    margin-left:0 !important;
  }
}


/* =========================
   HERO FIX v7
   ========================= */

/* Nav links should not be stuck to the left rail.
   They now start roughly aligned with hero content/reference nav area. */
.nav-links{
  margin-left: 92px !important;
  margin-right: auto !important;
}

/* Better integration cluster: closer to Relevance AI, no white circular placeholders. */
.integration-cluster.relevance-style-icons{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  margin-left:10px !important;
}

.integration-cluster.relevance-style-icons .si{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-left:-2px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.integration-cluster.relevance-style-icons .si:first-child{
  margin-left:0 !important;
}

.integration-cluster.relevance-style-icons svg{
  width:20px !important;
  height:20px !important;
  display:block !important;
}

.integration-cluster.relevance-style-icons .salesforce svg{
  width:24px !important;
}

.integration-cluster.relevance-style-icons .gmail svg{
  width:24px !important;
}

.integration-cluster.relevance-style-icons .integration-text{
  margin-left:14px !important;
  color:#747b8d !important;
  font-size:15px !important;
  font-weight:450 !important;
}

/* Hide old icon implementations aggressively */
.integration-cluster .brand-icon,
.integration-cluster .mini-logo{
  display:none !important;
}

/* Keep the nav mobile behavior clean */
@media(max-width:860px){
  .nav-links{
    margin-left:0 !important;
  }
}


/* =========================
   HERO FIX v8
   - nav a bit more right
   - lighter/normal nav + hero fonts
   ========================= */

/* Move nav links more to the right so they do not feel glued to the left/logo area */
.nav-links{
  margin-left: 125px !important;
}

/* Make nav/header text less bold and cleaner */
.nav-links a{
  font-weight: 500 !important;
  letter-spacing: -0.012em !important;
}

.nav-actions .btn{
  font-weight: 600 !important;
}

.brand{
  font-weight: 650 !important;
}

/* Hero headline: normal/lighter, less blocky */
.hero h1{
  font-weight: 520 !important;
  letter-spacing: -0.052em !important;
}

.hero h1 span{
  font-weight: 520 !important;
}

/* Eyebrow and button text slightly less bold */
.hero .eyebrow{
  font-weight: 650 !important;
}

.hero .btn{
  font-weight: 600 !important;
}

.hero-copy{
  font-weight: 400 !important;
}

/* Keep mobile nav from inheriting desktop offset */
@media(max-width:860px){
  .nav-links{
    margin-left:0 !important;
  }
}


/* =========================
   v9: remove quality section spacing + improved playbook grid
   ========================= */

/* Move nav slightly back left from v8 */
.nav-links{
  margin-left: 108px !important;
}

/* Hidden in case an older quality block remains in cached markup */
.quality-section{
  display:none !important;
}

/* New playbook section */
.playbook-strip{
  padding: 112px 0 118px !important;
}

.playbook-heading{
  align-items:flex-end !important;
  margin-bottom:40px !important;
}

.playbook-heading h2{
  max-width:690px;
  margin:0;
  font-size:40px !important;
  line-height:1.15 !important;
  letter-spacing:-.055em !important;
  font-weight:650 !important;
}

.playbook-heading > p{
  max-width:520px !important;
  font-size:17px !important;
  line-height:1.7 !important;
  color:#737b8e !important;
}

.playbook-grid-v9{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:20px !important;
}

.playbook-grid-v9 .pb-card{
  min-height:286px !important;
  padding:28px 26px 24px !important;
  border:1px solid rgba(220,224,235,.95) !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 18px 48px rgba(20,25,50,.045) !important;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
  position:relative;
  overflow:hidden;
}

.playbook-grid-v9 .pb-card:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.92;
  z-index:0;
}

.playbook-grid-v9 .pb-card > *{
  position:relative;
  z-index:1;
}

.playbook-grid-v9 .pb-card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 70px rgba(20,25,50,.08) !important;
  border-color:rgba(160,166,255,.55) !important;
}

.playbook-grid-v9 .play-icon{
  width:52px !important;
  height:52px !important;
  border-radius:16px !important;
  margin-bottom:28px !important;
  display:grid !important;
  place-items:center !important;
  color:var(--brand) !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:0 14px 30px rgba(20,25,50,.06) !important;
}

.playbook-grid-v9 .play-icon svg{
  width:26px;
  height:26px;
}

.playbook-grid-v9 h3{
  margin:0 0 12px !important;
  font-size:21px !important;
  line-height:1.18 !important;
  letter-spacing:-.045em !important;
  font-weight:680 !important;
}

.playbook-grid-v9 p{
  margin:0 !important;
  color:#646d82 !important;
  font-size:15.5px !important;
  line-height:1.62 !important;
}

.playbook-grid-v9 small{
  display:inline-flex;
  margin-top:20px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(215,219,232,.8);
  color:#697186;
  font-size:12px;
  font-weight:600;
}

/* Pastel backgrounds, intentionally soft and not heavy */
.pb-blue:before{background:linear-gradient(135deg,#eef5ff 0%,#fff 72%)}
.pb-purple:before{background:linear-gradient(135deg,var(--brand-soft) 0%,#fff 72%)}
.pb-mint:before{background:linear-gradient(135deg,#edfbf5 0%,#fff 72%)}
.pb-peach:before{background:linear-gradient(135deg,#fff2ea 0%,#fff 72%)}
.pb-lilac:before{background:linear-gradient(135deg,#f7efff 0%,#fff 72%)}
.pb-yellow:before{background:linear-gradient(135deg,#fff9df 0%,#fff 72%)}
.pb-cyan:before{background:linear-gradient(135deg,#eafaff 0%,#fff 72%)}
.pb-rose:before{background:linear-gradient(135deg,#fff0f4 0%,#fff 72%)}
.pb-green:before{background:linear-gradient(135deg,#eefbec 0%,#fff 72%)}
.pb-sky:before{background:linear-gradient(135deg,#edf7ff 0%,#fff 72%)}
.pb-orange:before{background:linear-gradient(135deg,#fff3dd 0%,#fff 72%)}
.pb-indigo:before{background:linear-gradient(135deg,#eef0ff 0%,#fff 72%)}

/* Icon color variations, still very soft */
.pb-blue .play-icon{color:#3975ff !important}
.pb-purple .play-icon{color:#6c5cff !important}
.pb-mint .play-icon{color:#18a36d !important}
.pb-peach .play-icon{color:#f06f36 !important}
.pb-lilac .play-icon{color:#9a5cff !important}
.pb-yellow .play-icon{color:#c79600 !important}
.pb-cyan .play-icon{color:#18a3c7 !important}
.pb-rose .play-icon{color:#dd4b76 !important}
.pb-green .play-icon{color:#3a9f42 !important}
.pb-sky .play-icon{color:#2488e8 !important}
.pb-orange .play-icon{color:#e8831a !important}
.pb-indigo .play-icon{color:#5663f1 !important}

@media(max-width:1100px){
  .playbook-grid-v9{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

@media(max-width:820px){
  .playbook-heading{
    display:block !important;
  }
  .playbook-heading > p{
    margin-top:16px !important;
  }
  .playbook-grid-v9{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width:560px){
  .playbook-grid-v9{
    grid-template-columns:1fr !important;
  }
}


/* =========================
   v10: playbooks refinement from latest feedback
   ========================= */

/* Keep only single outer rails in header and in the playbooks section.
   Remove the stray internal middle lines for this area. */
.site-header{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.94) 0,
      rgba(255,255,255,.94) calc(50% - 540px),
      rgba(232,234,242,.88) calc(50% - 540px),
      rgba(232,234,242,.88) calc(50% - 539px),
      rgba(255,255,255,.94) calc(50% - 539px),
      rgba(255,255,255,.94) calc(50% + 540px),
      rgba(232,234,242,.88) calc(50% + 540px),
      rgba(232,234,242,.88) calc(50% + 541px),
      rgba(255,255,255,.94) calc(50% + 541px)
    ) !important;
}

.playbook-strip.page-grid{
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 539px),
      transparent calc(50% - 539px),
      transparent calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 541px),
      transparent calc(50% + 541px)
    ) !important;
}

/* Slightly tighter and cleaner section intro, aligned like the inspiration. */
.playbook-strip{
  padding: 82px 0 96px !important;
}

.playbook-heading{
  display:block !important;
  margin-bottom:34px !important;
}

.playbook-intro{
  max-width: 910px;
}

.playbook-intro .eyebrow{
  margin-bottom:18px !important;
}

.playbook-heading h2{
  max-width: 860px !important;
  margin:0 !important;
  font-size: clamp(42px, 5.25vw, 72px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.064em !important;
  font-weight: 540 !important;
}

.playbook-subcopy{
  max-width: 840px;
  margin: 22px 0 0 !important;
  color:#7b8294 !important;
  font-size: 19px !important;
  line-height: 1.62 !important;
  letter-spacing: -0.022em !important;
  font-weight: 400 !important;
}

/* Make the use-case cards a little smaller and more sophisticated. */
.playbook-grid-v9{
  gap:16px !important;
}

.playbook-grid-v9 .pb-card{
  min-height: 248px !important;
  padding: 23px 22px 20px !important;
  border-radius: 16px !important;
  border-color: rgba(228,231,240,.96) !important;
  box-shadow: 0 14px 34px rgba(20,25,50,.035) !important;
}

.playbook-grid-v9 .pb-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(20,25,50,.055) !important;
  border-color: rgba(181,186,214,.9) !important;
}

.playbook-grid-v9 .play-icon{
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  margin-bottom: 22px !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 10px 24px rgba(20,25,50,.04) !important;
}

.playbook-grid-v9 .play-icon svg{
  width: 23px;
  height: 23px;
}

.playbook-grid-v9 h3{
  margin: 0 0 10px !important;
  font-size: 18px !important;
  line-height: 1.14 !important;
  letter-spacing: -0.04em !important;
  font-weight: 620 !important;
}

.playbook-grid-v9 p{
  font-size: 14px !important;
  line-height: 1.55 !important;
  color:#70788b !important;
}

.playbook-grid-v9 small{
  margin-top:16px !important;
  padding:6px 9px !important;
  font-size:11.5px !important;
  color:#7c8397 !important;
  background: rgba(255,255,255,.78) !important;
}

/* Softer pastel usage — still colorful, but much less brilliant. */
.playbook-grid-v9 .pb-card:before{ opacity: .78 !important; }
.pb-blue:before{background:linear-gradient(135deg,#f8fbff 0%,#ffffff 76%) !important}
.pb-purple:before{background:linear-gradient(135deg,#faf8ff 0%,#ffffff 76%) !important}
.pb-mint:before{background:linear-gradient(135deg,#f7fcfa 0%,#ffffff 76%) !important}
.pb-peach:before{background:linear-gradient(135deg,#fff9f6 0%,#ffffff 76%) !important}
.pb-lilac:before{background:linear-gradient(135deg,#fbf8ff 0%,#ffffff 76%) !important}
.pb-yellow:before{background:linear-gradient(135deg,#fffdf4 0%,#ffffff 76%) !important}
.pb-cyan:before{background:linear-gradient(135deg,#f7fcfe 0%,#ffffff 76%) !important}
.pb-rose:before{background:linear-gradient(135deg,#fff8fa 0%,#ffffff 76%) !important}
.pb-green:before{background:linear-gradient(135deg,#f8fcf6 0%,#ffffff 76%) !important}
.pb-sky:before{background:linear-gradient(135deg,#f8fbff 0%,#ffffff 76%) !important}
.pb-orange:before{background:linear-gradient(135deg,#fffaf2 0%,#ffffff 76%) !important}
.pb-indigo:before{background:linear-gradient(135deg,#f7f8ff 0%,#ffffff 76%) !important}

/* Tone down icon colors slightly too. */
.pb-blue .play-icon{color:#4d7eff !important}
.pb-purple .play-icon{color:#7569ef !important}
.pb-mint .play-icon{color:#2ea779 !important}
.pb-peach .play-icon{color:#ef8b54 !important}
.pb-lilac .play-icon{color:#8c6be8 !important}
.pb-yellow .play-icon{color:#be9b35 !important}
.pb-cyan .play-icon{color:#39a4c3 !important}
.pb-rose .play-icon{color:#d66a8b !important}
.pb-green .play-icon{color:#58a463 !important}
.pb-sky .play-icon{color:#5292df !important}
.pb-orange .play-icon{color:#df9652 !important}
.pb-indigo .play-icon{color:#6977e8 !important}

@media(max-width:820px){
  .playbook-heading h2{
    font-size: 42px !important;
    line-height: 1.06 !important;
  }
  .playbook-subcopy{
    font-size: 17px !important;
  }
}


/* =========================
   v11: visual use-case section inspired by provided references
   ========================= */

/* Keep nav slightly cleaner after removing Quality */
.nav-links{
  margin-left: 104px !important;
  gap: 34px !important;
}

/* Single outer rails only for this section */
.playbook-strip.page-grid{
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 539px),
      transparent calc(50% - 539px),
      transparent calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 541px),
      transparent calc(50% + 541px)
    ) !important;
}

.playbook-strip{
  padding: 78px 0 104px !important;
}

.playbook-intro{
  max-width: 820px !important;
  margin-bottom: 38px !important;
}

.playbook-intro .eyebrow{
  margin-bottom: 18px !important;
}

.playbook-intro h2{
  max-width: 760px !important;
  margin: 0 !important;
  font-size: clamp(38px, 4.35vw, 58px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.058em !important;
  font-weight: 540 !important;
}

.playbook-subcopy{
  max-width: 770px !important;
  margin: 20px 0 0 !important;
  color: #7a8294 !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  letter-spacing: -0.02em !important;
}

.usecase-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.usecase-card{
  min-height: 318px;
  border-radius: 22px;
  border: 1px solid rgba(226,229,238,.9);
  padding: 34px 34px 28px;
  position: relative;
  overflow: hidden;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  box-shadow: 0 20px 55px rgba(18,23,42,.045);
}

.usecase-card.large{
  grid-column: span 2;
  min-height: 370px;
  grid-template-columns: .95fr 1.05fr;
}

.usecase-card.mint{background:#ecfbf2}
.usecase-card.lilac{background:#fbf0fb}
.usecase-card.peach{background:#fff4ea}
.usecase-card.sky{background:#eef6ff}
.usecase-card.butter{background:#fff6db}
.usecase-card.stone{background:#f4f4f2}

.usecase-copy{
  position:relative;
  z-index:2;
}

.usecase-label{
  display:block;
  margin-bottom: 18px;
  color:var(--brand);
  font-size:13px;
  font-weight:760;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.usecase-card.mint .usecase-label{color:#15935f}
.usecase-card.peach .usecase-label{color:#e66e38}
.usecase-card.sky .usecase-label{color:#397de8}
.usecase-card.butter .usecase-label{color:#b78016}

.usecase-copy h3{
  margin:0;
  max-width: 500px;
  font-size: 28px;
  line-height:1.13;
  letter-spacing:-.047em;
  font-weight:650;
}

.usecase-card.large .usecase-copy h3{
  font-size: 36px;
  max-width: 560px;
}

.usecase-copy p{
  max-width: 480px;
  margin: 16px 0 0;
  color:#3f4656;
  font-size:16px;
  line-height:1.55;
  letter-spacing:-.018em;
}

.usecase-copy a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top: 22px;
  color:#11162b;
  font-size:16px;
  font-weight:550;
  border-bottom:1px solid currentColor;
}

.usecase-copy a span{
  transform: translateY(-1px);
}

.usecase-visual{
  position:relative;
  min-height:220px;
  z-index:1;
}

.real-estate-visual{
  background:
    radial-gradient(circle at 65% 38%, rgba(var(--brand-rgb), .12), transparent 30%),
    radial-gradient(circle at 40% 70%, rgba(24,185,102,.12), transparent 30%);
}

.chat-card,
.lead-score,
.mini-email,
.mini-pill,
.ticket-card,
.reply-card,
.product-card,
.cart-bubble,
.report-badge{
  position:absolute;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(222,226,238,.85);
  box-shadow:0 18px 45px rgba(18,23,42,.08);
  backdrop-filter: blur(8px);
}

.chat-card{
  border-radius:14px;
  padding:14px 16px;
  color:#303647;
  font-size:14px;
  line-height:1.35;
}

.chat-card.one{left:10%;top:18%;width:250px}
.chat-card.two{right:8%;top:36%;width:205px}
.lead-score{left:28%;bottom:15%;border-radius:16px;padding:16px 18px;font-size:15px}
.lead-score b{color:#18a663;margin-left:18px}
.orbit-dot{
  position:absolute;
  right:22%;
  bottom:22%;
  width:62px;height:62px;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 18px 55px rgba(var(--brand-rgb), .28);
}
.orbit-dot:after{content:"";position:absolute;inset:18px;border-radius:50%;background:#fff}

.sales-visual .mini-email{
  width:210px;height:130px;right:8%;top:26%;
  border-radius:18px;
}
.sales-visual .mini-email:before{
  content:"";
  position:absolute;left:24px;right:24px;top:28px;height:10px;
  background:#d9dce8;border-radius:99px;
  box-shadow:0 28px 0 #eef0f6, 0 56px 0 #eef0f6;
}
.mini-pill{border-radius:999px;padding:10px 13px;font-size:13px;font-weight:650}
.mini-pill.hot{left:2%;top:20%;color:#e66e38}
.mini-pill.deal{right:2%;bottom:15%;color:var(--brand)}

.ticket-card{
  width:210px;height:150px;right:6%;top:20%;
  border-radius:18px;
}
.ticket-card:before{
  content:"";
  position:absolute;left:22px;right:22px;top:28px;height:10px;
  background:#dce0ea;border-radius:99px;
  box-shadow:0 30px 0 #eceff5, 0 60px 0 #eceff5;
}
.reply-card{
  left:0;bottom:18%;
  border-radius:14px;
  padding:13px 15px;
  color:#17a56d;
  font-size:13px;
  font-weight:650;
}

.ops-visual{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:14px;
  padding-bottom:40px;
}
.ops-visual span{
  width:54px;
  border-radius:12px 12px 0 0;
  background:linear-gradient(180deg,var(--brand),#91a5ff);
  opacity:.86;
}
.report-badge{
  right:4%;top:20%;
  border-radius:15px;
  padding:13px 15px;
  color:#397de8;
  font-weight:650;
}

.product-card{
  width:220px;height:145px;right:5%;top:17%;
  border-radius:20px;
}
.product-card:before{
  content:"";
  position:absolute;left:18px;top:18px;width:70px;height:70px;
  border-radius:16px;background:#fff0cb;
}
.product-card:after{
  content:"";
  position:absolute;left:105px;right:20px;top:28px;height:10px;
  background:#dce0ea;border-radius:99px;
  box-shadow:0 28px 0 #eceff5,0 56px 0 #eceff5;
}
.cart-bubble{
  left:0;bottom:20%;
  border-radius:14px;
  padding:13px 15px;
  color:#15935f;
  font-size:13px;
  font-weight:650;
}

.sop-visual{
  display:grid;
  place-items:center;
}
.sop-visual div{
  position:absolute;
  width:160px;height:92px;
  border-radius:20px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(222,226,238,.85);
  box-shadow:0 18px 45px rgba(18,23,42,.06);
}
.sop-visual div:nth-child(1){transform:translate(-42px,-42px)}
.sop-visual div:nth-child(2){transform:translate(10px,4px);background:rgba(255,255,255,.85)}
.sop-visual div:nth-child(3){transform:translate(58px,50px)}

@media(max-width:1080px){
  .usecase-grid{grid-template-columns:1fr}
  .usecase-card,
  .usecase-card.large{
    grid-column:auto;
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .playbook-intro h2{
    font-size:38px !important;
  }
  .usecase-card{
    padding:26px 22px;
  }
  .usecase-copy h3,
  .usecase-card.large .usecase-copy h3{
    font-size:26px;
  }
}


/* =========================
   v12: fix usecase alignment + equal 2x3 layout
   ========================= */

/* Keep the section content inside the same visual column as the cards */
.usecases-container{
  max-width: 1080px !important;
  width: min(1080px, calc(100% - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* More controlled intro: no massive 3-line heading */
.playbook-strip{
  padding: 56px 0 72px !important;
}

.playbook-intro{
  max-width: 760px !important;
  margin: 0 0 34px 0 !important;
}

.playbook-intro h2{
  max-width: 760px !important;
  font-size: clamp(36px, 3.55vw, 52px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.055em !important;
  font-weight: 560 !important;
}

.playbook-subcopy{
  max-width: 720px !important;
  font-size: 17.5px !important;
  line-height: 1.62 !important;
  margin-top: 18px !important;
}

/* Equal 6-card layout: 2 columns x 3 rows */
.usecase-grid.usecase-grid-six{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.usecase-grid-six .usecase-card,
.usecase-grid-six .usecase-card.large{
  grid-column: auto !important;
  min-height: 310px !important;
  grid-template-columns: 1fr 1fr !important;
  padding: 30px 30px 26px !important;
}

/* Prevent visual mockups from pushing card text awkwardly */
.usecase-grid-six .usecase-visual{
  min-height: 210px !important;
}

/* Slightly reduce card typography so content breathes */
.usecase-grid-six .usecase-copy h3,
.usecase-grid-six .usecase-card.large .usecase-copy h3{
  font-size: 25px !important;
  line-height: 1.14 !important;
  max-width: 340px !important;
}

.usecase-grid-six .usecase-copy p{
  font-size: 15px !important;
  line-height: 1.52 !important;
  max-width: 330px !important;
}

.usecase-grid-six .usecase-label{
  margin-bottom: 14px !important;
}

/* Make visual elements fit better inside equal cards */
.usecase-grid-six .chat-card.one{
  left: 0 !important;
  top: 22% !important;
  width: 205px !important;
}

.usecase-grid-six .chat-card.two{
  right: 0 !important;
  top: 43% !important;
  width: 165px !important;
}

.usecase-grid-six .lead-score{
  left: 12% !important;
  bottom: 12% !important;
}

.usecase-grid-six .orbit-dot{
  display:none !important;
}

/* Better responsive behavior */
@media(max-width: 1080px){
  .usecase-grid.usecase-grid-six{
    grid-template-columns: 1fr !important;
  }

  .usecase-grid-six .usecase-card,
  .usecase-grid-six .usecase-card.large{
    grid-template-columns: 1fr !important;
  }

  .usecase-grid-six .usecase-copy h3,
  .usecase-grid-six .usecase-card.large .usecase-copy h3{
    max-width: 100% !important;
  }

  .usecase-grid-six .usecase-copy p{
    max-width: 100% !important;
  }
}

@media(max-width: 640px){
  .usecases-container{
    width: calc(100% - 28px) !important;
  }

  .playbook-intro h2{
    font-size: 34px !important;
  }
}


/* =========================
   v13: fix usecase section breathing room from grid rails
   ========================= */

/* Pull the whole usecase section in from the vertical page rails so nothing touches them */
.usecases-container{
  max-width: 1080px !important;
  width: min(1080px, calc(100% - 120px)) !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.playbook-intro{
  max-width: 700px !important;
}

.playbook-intro h2{
  max-width: 700px !important;
}

.playbook-subcopy{
  max-width: 680px !important;
}

/* Keep equal spacing on both sides of the cards */
.usecase-grid.usecase-grid-six{
  gap: 22px !important;
}

@media(max-width: 1100px){
  .usecases-container{
    width: min(1080px, calc(100% - 84px)) !important;
  }
}

@media(max-width: 640px){
  .usecases-container{
    width: calc(100% - 28px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* =========================
   MASTER v3: clean post-usecase flow
   - remove uncertain case section
   - remove old L1/L4 process and timeline
   - rebuild quality/model/control from scratch
   ========================= */

.case-section,
.process-section,
.flow-section,
.build-section,
.quality-section{
  display:none !important;
}

/* Re-enable only the new section */
.quality-model-section{
  display:block !important;
  padding: 104px 0 116px !important;
}

/* One clean pair of outer rails only */
.quality-model-section.page-grid{
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 539px),
      transparent calc(50% - 539px),
      transparent calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 541px),
      transparent calc(50% + 541px)
    ) !important;
}

.quality-model-container{
  max-width: 1080px !important;
  width: min(1080px, calc(100% - 120px)) !important;
  margin: 0 auto !important;
}

.qm-intro{
  max-width: 800px;
  margin: 0 auto 30px;
  text-align: center;
}

.qm-intro .eyebrow{
  margin-bottom: 18px !important;
}

.qm-intro h2{
  margin: 0;
  font-size: clamp(40px, 4.7vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.064em;
  font-weight: 560;
}

.qm-intro p{
  max-width: 760px;
  margin: 22px auto 0;
  color: #747b8d;
  font-size: 18px;
  line-height: 1.68;
  letter-spacing: -0.02em;
}

.model-provider-row{
  max-width: 860px;
  margin: 0 auto 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.model-provider-row span{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 15px 0 10px;
  border: 1px solid #e5e8f1;
  border-radius: 999px;
  background: #fff;
  color: #181d31;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(20,25,50,.045);
}

.provider-logo{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}

.openai-logo{background:#eaf7f3;color:#13735a}
.anthropic-logo{background:#f8efe8;color:#9b633c}
.gemini-logo{background:#eef1ff;color:#5d64f4}
.llama-logo{background:#f4eeff;color:#7858e8}
.custom-logo{background:#f2f4f8;color:#4c5568;font-size:10px}

.qm-card-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.qm-card{
  min-height: 384px;
  border: 1px solid rgba(226,229,239,.96);
  border-radius: 22px;
  background: linear-gradient(180deg,#fff 0%,#fbfbfe 100%);
  box-shadow: 0 20px 55px rgba(18,23,42,.05);
  padding: 24px;
  overflow: hidden;
}

.qm-routing{background:linear-gradient(145deg,#ffffff 0%,#f7fbff 100%)}
.qm-evals{background:linear-gradient(145deg,#ffffff 0%,#fbf8ff 100%)}
.qm-control{background:linear-gradient(145deg,#ffffff 0%,#fffaf3 100%)}

.qm-kicker{
  display: inline-flex;
  margin-bottom: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f2f0ff;
  color: var(--brand);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.qm-card h3{
  margin: 0;
  font-size: 24px;
  line-height: 1.16;
  letter-spacing: -0.045em;
  font-weight: 650;
}

.qm-card p{
  margin: 12px 0 0;
  color: #6e7688;
  font-size: 14.5px;
  line-height: 1.58;
}

.routing-stack{
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.route-item{
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e7e9f2;
  border-radius: 15px;
  background: rgba(255,255,255,.76);
}

.route-item b{
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.route-item span{
  display: block;
  color: #71788b;
  font-size: 12.8px;
  line-height: 1.45;
}

.eval-board{
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.eval-board div{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid #e7e9f2;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  color: #535b6d;
  font-size: 14px;
}

.eval-board b{
  color: #16a866;
}

.eval-board .warn b{
  color: #d59a00;
}

.mini-bars{
  height: 80px;
  display: flex;
  align-items: end;
  gap: 8px;
  margin-top: 22px;
  padding: 0 8px;
}

.mini-bars i{
  flex: 1;
  display: block;
  border-radius: 5px 5px 0 0;
  background: #dfe4ff;
}

.mini-bars i.active{
  background: var(--brand);
}

.control-console{
  margin-top: 24px;
  padding: 18px;
  border-radius: 16px;
  background: #171719;
  color: #e9e9ed;
  display: grid;
  gap: 12px;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 18px 45px rgba(18,23,42,.12);
}

.control-console code{
  color: #fff;
  font-family: inherit;
}

.control-console span{
  color: #cfd0d7;
}

.control-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.control-tags span{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid #e5e8f1;
  background: rgba(255,255,255,.8);
  color: #697185;
  font-size: 12.5px;
  font-weight: 600;
}

@media(max-width: 1100px){
  .quality-model-container{
    width: min(1080px, calc(100% - 84px)) !important;
  }
  .qm-card-grid{
    grid-template-columns: 1fr;
  }
  .qm-card{
    min-height: auto;
  }
}

@media(max-width: 640px){
  .quality-model-section{
    padding: 59px 0 66px !important;
  }
  .quality-model-container{
    width: calc(100% - 28px) !important;
  }
  .qm-intro h2{
    font-size: 36px;
  }
  .qm-intro p{
    font-size: 16.5px;
  }
}


/* =========================
   MASTER v4: approved quality/model/control redesign
   ========================= */

.quality-model-section{
  display:block !important;
  padding: 65px 0 78px !important;
}

.quality-model-section.page-grid{
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 539px),
      transparent calc(50% - 539px),
      transparent calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 541px),
      transparent calc(50% + 541px)
    ) !important;
}

.quality-model-container{
  width:min(1080px, calc(100% - 120px)) !important;
  max-width:1080px !important;
  margin:0 auto !important;
}

/* Left aligned intro like the usecases section */
.qm-intro{
  max-width:760px !important;
  margin:0 0 28px !important;
  text-align:left !important;
}

.qm-intro .eyebrow{
  margin-bottom:18px !important;
}

.qm-intro h2{
  max-width:760px;
  margin:0 !important;
  font-size:clamp(42px, 4.55vw, 64px) !important;
  line-height:1.04 !important;
  letter-spacing:-0.064em !important;
  font-weight:560 !important;
}

.qm-intro p{
  max-width:720px !important;
  margin:22px 0 0 !important;
  color:#747b8d !important;
  font-size:17.5px !important;
  line-height:1.65 !important;
  letter-spacing:-.02em !important;
}

/* Informational compatibility row, not selectable buttons */
.compatibility-row{
  max-width:820px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
  margin:0 0 28px;
  color:#171c2f;
}

.compat-label{
  color:#747b8d;
  font-size:14px;
  margin-right:22px;
}

.compat-provider{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:34px;
  padding:0 20px;
  border-right:1px solid #e2e5ef;
  font-size:14px;
  font-weight:600;
}

.compat-provider:last-child{
  border-right:0;
}

.provider-logo{
  width:24px;
  height:24px;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  font-style:normal;
  font-size:12px;
  font-weight:800;
}

.openai-logo{background:#eaf7f3;color:#13735a}
.anthropic-logo{background:#f8efe8;color:#9b633c}
.gemini-logo{background:#eef1ff;color:#5d64f4}
.llama-logo{background:#f4eeff;color:#7858e8}
.custom-logo{background:#f2f4f8;color:#4c5568;font-size:10px}

/* Example strip */
.example-flow-band{
  min-height:70px;
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 22px;
  padding:13px 18px;
  border:1px solid #e6e4f5;
  border-radius:16px;
  background:linear-gradient(180deg, #faf9ff 0%, #f5f2ff 100%);
  box-shadow:0 14px 34px rgba(20,25,50,.04);
  overflow:hidden;
}

.example-label{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:142px;
  color:var(--brand);
  font-size:14px;
}

.example-label span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 18px rgba(var(--brand-rgb), .08);
}

.example-step{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:max-content;
  color:#4c5366;
  font-size:14px;
  font-weight:500;
}

.example-step i{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#fff;
  border:1px solid #e5e8f1;
  font-style:normal;
  font-size:16px;
}

.example-flow-band > b{
  color:var(--brand);
  font-weight:600;
}

/* Three-card layout */
.qm-card-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.qm-card{
  min-height:392px;
  border:1px solid rgba(226,229,239,.96);
  border-radius:20px;
  box-shadow:0 18px 46px rgba(18,23,42,.045);
  padding:24px;
  overflow:hidden;
}

.qm-routing{background:linear-gradient(145deg,#f8fffb 0%,#ffffff 78%) !important}
.qm-evals{background:linear-gradient(145deg,#fbf9ff 0%,#ffffff 78%) !important}
.qm-control{background:linear-gradient(145deg,#fffaf2 0%,#ffffff 78%) !important}

.qm-kicker{
  display:inline-flex;
  align-items:center;
  margin-bottom:12px;
  color:var(--brand);
  font-size:12px;
  font-weight:760;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.qm-routing .qm-kicker{color:#15935f}
.qm-control .qm-kicker{color:#e66e38}

.qm-card h3{
  margin:0;
  font-size:24px;
  line-height:1.14;
  letter-spacing:-.045em;
  font-weight:650;
}

.qm-card p{
  margin:12px 0 0;
  color:#677083;
  font-size:14.5px;
  line-height:1.58;
}

.routing-stack{
  display:grid;
  gap:10px;
  margin-top:22px;
}

.route-item{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:12px;
  align-items:start;
  padding:13px;
  border:1px solid #e7e9f2;
  border-radius:13px;
  background:rgba(255,255,255,.8);
}

.route-item b{
  display:block;
  margin-bottom:3px;
  font-size:14px;
}

.route-item span{
  color:#6f7688;
  font-size:12.5px;
  line-height:1.42;
}

.eval-board{
  display:grid;
  margin-top:20px;
  border:1px solid #e7e9f2;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.82);
}

.eval-board div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid #eceef5;
  color:#555d70;
  font-size:14px;
}

.eval-board div:last-child{border-bottom:0}

.eval-board b{color:#16a866}
.eval-board .warn b{color:#d59a00}

.mini-bars{
  height:72px;
  display:flex;
  align-items:end;
  gap:8px;
  margin-top:18px;
  padding:0 4px;
}

.mini-bars i{
  flex:1;
  display:block;
  border-radius:5px 5px 0 0;
  background:#dfe4ff;
}

.mini-bars i.active{
  background:var(--brand);
}

.control-console{
  margin-top:22px;
  padding:18px;
  border-radius:14px;
  background:#171719;
  color:#e9e9ed;
  display:grid;
  gap:11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;
  line-height:1.35;
  box-shadow:0 18px 45px rgba(18,23,42,.12);
}

.control-console code{
  color:#9df0b7;
  font-family:inherit;
}

.control-console span{
  color:#d3d4dc;
}

.control-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.control-tags span{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #e5e8f1;
  background:rgba(255,255,255,.82);
  color:#697185;
  font-size:12.5px;
  font-weight:600;
}

.qm-link{
  display:inline-flex;
  gap:8px;
  align-items:center;
  margin-top:18px;
  color:#11162b;
  font-size:14px;
  font-weight:600;
  border-bottom:1px solid currentColor;
}

@media(max-width:1100px){
  .quality-model-container{
    width:min(1080px, calc(100% - 84px)) !important;
  }

  .qm-card-grid{
    grid-template-columns:1fr;
  }

  .qm-card{
    min-height:auto;
  }

  .example-flow-band{
    flex-wrap:wrap;
  }
}

@media(max-width:640px){
  .quality-model-section{
    padding:56px 0 65px !important;
  }

  .quality-model-container{
    width:calc(100% - 28px) !important;
  }

  .qm-intro h2{
    font-size:36px !important;
  }

  .compatibility-row{
    gap:10px 0;
  }

  .compat-provider{
    padding:0 13px;
  }

  .example-step{
    min-width:0;
  }
}


/* =========================
   MASTER v5: keep all section headings left aligned
   ========================= */

/* Override older centered heading patterns for consistency */
.section-heading.centered,
.section-heading,
.governance-section .section-heading,
.integrations-section,
.comparison-section .section-heading,
.cta-section .cta-card{
  text-align: left !important;
}

/* Keep heading blocks aligned to the same content column, not centered floating */
.section-heading.centered,
.governance-section .section-heading,
.comparison-section .section-heading{
  max-width: 760px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Governance section: left aligned intro + grid inside safe rails */
.governance-section{
  padding: 96px 0 106px !important;
}

.governance-section .container{
  width: min(1080px, calc(100% - 120px)) !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.governance-section .section-heading h2{
  max-width: 760px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-size: clamp(40px, 4.2vw, 58px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.058em !important;
  font-weight: 560 !important;
}

.governance-section .section-heading p{
  max-width: 720px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-size: 17.5px !important;
  line-height: 1.65 !important;
}

/* Governance cards: cleaner card-based grid instead of plain divided table */
.governance-grid{
  margin-top: 44px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  border: 0 !important;
  background: transparent !important;
}

.governance-grid .gov-item{
  min-height: 210px !important;
  padding: 26px 24px 24px !important;
  border: 1px solid rgba(226,229,239,.96) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fff 0%, #fbfbfe 100%) !important;
  box-shadow: 0 16px 38px rgba(18,23,42,.04) !important;
}

.governance-grid .gov-item:nth-child(3n+1){
  background: linear-gradient(145deg, #fbfffd 0%, #fff 78%) !important;
}

.governance-grid .gov-item:nth-child(3n+2){
  background: linear-gradient(145deg, #f9f8ff 0%, #fff 78%) !important;
}

.governance-grid .gov-item:nth-child(3n){
  background: linear-gradient(145deg, #fffaf4 0%, #fff 78%) !important;
}

.governance-grid .icon-tile{
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  margin-bottom: 22px !important;
  background: #f2f0ff !important;
  color: var(--brand) !important;
  box-shadow: 0 10px 24px rgba(var(--brand-rgb), .06) !important;
}

.governance-grid h3{
  margin: 0 0 10px !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.035em !important;
  font-weight: 650 !important;
}

.governance-grid p{
  margin: 0 !important;
  color: #6d7588 !important;
  font-size: 14.5px !important;
  line-height: 1.58 !important;
}

/* Integrations section: left aligned too */
.integrations-section{
  padding: 98px 0 !important;
}

.integrations-section .container{
  width: min(1080px, calc(100% - 120px)) !important;
  max-width: 1080px !important;
}

.integrations-section h2{
  text-align: left !important;
  max-width: 760px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Comparison / CTA remaining headings left aligned */
.comparison-section .container,
.cta-section .container{
  width: min(1080px, calc(100% - 120px)) !important;
  max-width: 1080px !important;
}

.cta-card{
  align-items: flex-start !important;
}

.cta-card h2,
.cta-card p{
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep only clean outer rails for governance/integration zones */
.governance-section.page-grid,
.integrations-section.page-grid,
.comparison-section.page-grid,
.cta-section.page-grid{
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 539px),
      transparent calc(50% - 539px),
      transparent calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 541px),
      transparent calc(50% + 541px)
    ) !important;
}

@media(max-width: 1100px){
  .governance-section .container,
  .integrations-section .container,
  .comparison-section .container,
  .cta-section .container{
    width: min(1080px, calc(100% - 84px)) !important;
  }

  .governance-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width: 640px){
  .governance-section .container,
  .integrations-section .container,
  .comparison-section .container,
  .cta-section .container{
    width: calc(100% - 28px) !important;
  }

  .governance-grid{
    grid-template-columns: 1fr !important;
  }

  .governance-section .section-heading h2{
    font-size: 34px !important;
  }
}


/* =========================
   MASTER v6: fix broken governance alignment from v5
   ========================= */

/* Do NOT let section headings escape their content container */
.governance-section .container,
.integrations-section .container,
.comparison-section .container,
.cta-section .container{
  width: min(1080px, calc(100% - 120px)) !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Governance heading: left aligned inside the same content column */
.governance-section .section-heading,
.governance-section .section-heading.centered{
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 0 42px 0 !important;
  text-align: left !important;
}

.governance-section .section-heading h2{
  max-width: 760px !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: clamp(40px, 4.2vw, 58px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.058em !important;
  font-weight: 560 !important;
}

.governance-section .section-heading p{
  max-width: 720px !important;
  margin: 18px 0 0 !important;
  text-align: left !important;
  font-size: 17.5px !important;
  line-height: 1.65 !important;
  color: #747b8d !important;
}

/* Governance grid should also start under the heading, not drift to the center awkwardly */
.governance-grid{
  width: 100% !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  border: 0 !important;
  background: transparent !important;
}

/* Cleaner card look, still light and premium */
.governance-grid .gov-item{
  min-height: 210px !important;
  padding: 26px 24px 24px !important;
  border: 1px solid rgba(226,229,239,.96) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fff 0%, #fbfbfe 100%) !important;
  box-shadow: 0 16px 38px rgba(18,23,42,.04) !important;
}

.governance-grid .gov-item:nth-child(3n+1){
  background: linear-gradient(145deg, #fbfffd 0%, #fff 78%) !important;
}

.governance-grid .gov-item:nth-child(3n+2){
  background: linear-gradient(145deg, #f9f8ff 0%, #fff 78%) !important;
}

.governance-grid .gov-item:nth-child(3n){
  background: linear-gradient(145deg, #fffaf4 0%, #fff 78%) !important;
}

.governance-grid .icon-tile{
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  margin-bottom: 22px !important;
  background: #f2f0ff !important;
  color: var(--brand) !important;
  box-shadow: 0 10px 24px rgba(var(--brand-rgb), .06) !important;
}

.governance-grid h3{
  margin: 0 0 10px !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.035em !important;
  font-weight: 650 !important;
}

.governance-grid p{
  margin: 0 !important;
  color: #6d7588 !important;
  font-size: 14.5px !important;
  line-height: 1.58 !important;
}

/* Safer left-alignment for all other centered headings:
   left aligned inside their container, never outside the viewport. */
.integrations-section,
.comparison-section,
.cta-section{
  text-align: left !important;
}

.integrations-section h2,
.comparison-section .section-heading,
.cta-section .cta-card{
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

/* Keep clean rails only */
.governance-section.page-grid{
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 539px),
      transparent calc(50% - 539px),
      transparent calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 541px),
      transparent calc(50% + 541px)
    ) !important;
}

@media(max-width: 1100px){
  .governance-section .container,
  .integrations-section .container,
  .comparison-section .container,
  .cta-section .container{
    width: min(1080px, calc(100% - 84px)) !important;
  }

  .governance-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width: 640px){
  .governance-section .container,
  .integrations-section .container,
  .comparison-section .container,
  .cta-section .container{
    width: calc(100% - 28px) !important;
  }

  .governance-grid{
    grid-template-columns: 1fr !important;
  }

  .governance-section .section-heading h2{
    font-size: 34px !important;
  }
}


/* =========================
   MASTER v7: real governance layout fix
   ========================= */

/* Governance heading and grid now live inside this container */
.governance-section{
  padding: 98px 0 112px !important;
}

.governance-section.page-grid{
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 539px),
      transparent calc(50% - 539px),
      transparent calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 541px),
      transparent calc(50% + 541px)
    ) !important;
}

.governance-container{
  width: min(1080px, calc(100% - 120px)) !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Heading is left aligned but safely inside the container */
.governance-heading,
.governance-section .governance-heading,
.governance-section .section-heading{
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 0 42px 0 !important;
  text-align: left !important;
}

.governance-heading h2,
.governance-section .governance-heading h2,
.governance-section .section-heading h2{
  margin: 0 !important;
  max-width: 760px !important;
  text-align: left !important;
  font-size: clamp(40px, 4.2vw, 58px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.058em !important;
  font-weight: 560 !important;
}

.governance-heading p,
.governance-section .governance-heading p,
.governance-section .section-heading p{
  margin: 18px 0 0 !important;
  max-width: 720px !important;
  text-align: left !important;
  color: #747b8d !important;
  font-size: 17.5px !important;
  line-height: 1.65 !important;
}

/* Card grid. No broken table joints, no old table borders. */
.governance-grid.governance-card-grid,
.governance-section .governance-grid{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  border: 0 !important;
  background: transparent !important;
}

/* Kill old table border behavior fully */
.governance-grid.governance-card-grid article,
.governance-section .governance-grid article{
  min-height: 210px !important;
  padding: 26px 24px 24px !important;
  border: 1px solid rgba(226,229,239,.96) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfe 100%) !important;
  box-shadow: 0 16px 38px rgba(18,23,42,.04) !important;
}

.governance-grid.governance-card-grid article:nth-child(3n+1),
.governance-section .governance-grid article:nth-child(3n+1){
  background: linear-gradient(145deg, #fbfffd 0%, #ffffff 78%) !important;
}

.governance-grid.governance-card-grid article:nth-child(3n+2),
.governance-section .governance-grid article:nth-child(3n+2){
  background: linear-gradient(145deg, #f9f8ff 0%, #ffffff 78%) !important;
}

.governance-grid.governance-card-grid article:nth-child(3n),
.governance-section .governance-grid article:nth-child(3n){
  background: linear-gradient(145deg, #fffaf4 0%, #ffffff 78%) !important;
}

.governance-grid.governance-card-grid article span,
.governance-section .governance-grid article span{
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  margin: 0 0 22px !important;
  background: #f2f0ff !important;
  color: var(--brand) !important;
  font-size: 16px !important;
  box-shadow: 0 10px 24px rgba(var(--brand-rgb), .06) !important;
}

.governance-grid.governance-card-grid h3,
.governance-section .governance-grid h3{
  margin: 0 0 10px !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.035em !important;
  font-weight: 650 !important;
}

.governance-grid.governance-card-grid p,
.governance-section .governance-grid p{
  margin: 0 !important;
  color: #6d7588 !important;
  font-size: 14.5px !important;
  line-height: 1.58 !important;
}

@media(max-width: 1100px){
  .governance-container{
    width: min(1080px, calc(100% - 84px)) !important;
  }

  .governance-grid.governance-card-grid,
  .governance-section .governance-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width: 640px){
  .governance-container{
    width: calc(100% - 28px) !important;
  }

  .governance-grid.governance-card-grid,
  .governance-section .governance-grid{
    grid-template-columns: 1fr !important;
  }

  .governance-heading h2,
  .governance-section .section-heading h2{
    font-size: 34px !important;
  }
}


/* =========================
   MASTER v8: governance isolated rebuild
   This section uses unique classes so older governance/table/heading CSS cannot break it.
   ========================= */

.governance-section{
  display:none !important;
}

.theorem-gov-section{
  display:block !important;
  padding: 72px 0 84px !important;
}

.theorem-gov-section.page-grid{
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 539px),
      transparent calc(50% - 539px),
      transparent calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 541px),
      transparent calc(50% + 541px)
    ) !important;
}

.theorem-gov-wrap{
  width: min(1080px, calc(100% - 120px)) !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.theorem-gov-head{
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 0 44px 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.theorem-gov-head h2{
  margin: 0 !important;
  padding: 0 !important;
  max-width: 760px !important;
  color: #090d22 !important;
  font-size: clamp(40px, 4.2vw, 58px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.058em !important;
  font-weight: 560 !important;
  text-align: left !important;
}

.theorem-gov-head h2 span{
  color: #7468ff !important;
}

.theorem-gov-head p{
  max-width: 710px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  color: #747b8d !important;
  font-size: 17.5px !important;
  line-height: 1.65 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
}

.theorem-gov-cards{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  border: 0 !important;
  background: transparent !important;
}

.theorem-gov-cards article{
  min-height: 210px !important;
  padding: 26px 24px 24px !important;
  border: 1px solid rgba(226,229,239,.96) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfe 100%) !important;
  box-shadow: 0 16px 38px rgba(18,23,42,.04) !important;
  box-sizing: border-box !important;
}

.theorem-gov-cards article:nth-child(3n+1){
  background: linear-gradient(145deg, #fbfffd 0%, #ffffff 78%) !important;
}

.theorem-gov-cards article:nth-child(3n+2){
  background: linear-gradient(145deg, #f9f8ff 0%, #ffffff 78%) !important;
}

.theorem-gov-cards article:nth-child(3n){
  background: linear-gradient(145deg, #fffaf4 0%, #ffffff 78%) !important;
}

.theorem-gov-cards article > span{
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  margin: 0 0 22px !important;
  background: #f2f0ff !important;
  color: var(--brand) !important;
  font-size: 16px !important;
  box-shadow: 0 10px 24px rgba(var(--brand-rgb), .06) !important;
}

.theorem-gov-cards h3{
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: #090d22 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.035em !important;
  font-weight: 650 !important;
}

.theorem-gov-cards p{
  margin: 0 !important;
  padding: 0 !important;
  color: #6d7588 !important;
  font-size: 14.5px !important;
  line-height: 1.58 !important;
}

@media(max-width: 1100px){
  .theorem-gov-wrap{
    width: min(1080px, calc(100% - 84px)) !important;
  }

  .theorem-gov-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width: 640px){
  .theorem-gov-wrap{
    width: calc(100% - 28px) !important;
  }

  .theorem-gov-head h2{
    font-size: 34px !important;
  }

  .theorem-gov-cards{
    grid-template-columns: 1fr !important;
  }
}


/* =========================
   MASTER v9: final governance hard reset
   The old governance markup is removed in HTML. These rules only target new unique classes.
   ========================= */

section.governance-section,
.governance-section,
.governance-grid,
.gov-item,
.icon-tile{
  all: revert-layer;
}

.theorem-gov-section{
  display:block !important;
  position:relative !important;
  padding:72px 0 84px !important;
  overflow:hidden !important;
}

.theorem-gov-section.page-grid{
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 539px),
      transparent calc(50% - 539px),
      transparent calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 541px),
      transparent calc(50% + 541px)
    ) !important;
}

.theorem-gov-section .theorem-gov-wrap{
  width:min(1080px, calc(100% - 120px)) !important;
  max-width:1080px !important;
  margin:0 auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

.theorem-gov-section .theorem-gov-head{
  display:block !important;
  width:100% !important;
  max-width:760px !important;
  margin:0 0 44px 0 !important;
  padding:0 !important;
  text-align:left !important;
  box-sizing:border-box !important;
  transform:none !important;
}

.theorem-gov-section .theorem-gov-head h2{
  display:block !important;
  width:100% !important;
  max-width:760px !important;
  margin:0 !important;
  padding:0 !important;
  color:#090d22 !important;
  font-size:clamp(40px, 4.2vw, 58px) !important;
  line-height:1.08 !important;
  letter-spacing:-0.058em !important;
  font-weight:560 !important;
  text-align:left !important;
  transform:none !important;
}

.theorem-gov-section .theorem-gov-head h2 span{
  color:#7468ff !important;
}

.theorem-gov-section .theorem-gov-head p{
  display:block !important;
  width:100% !important;
  max-width:710px !important;
  margin:18px 0 0 !important;
  padding:0 !important;
  color:#747b8d !important;
  font-size:17.5px !important;
  line-height:1.65 !important;
  letter-spacing:-0.02em !important;
  text-align:left !important;
}

.theorem-gov-section .theorem-gov-cards{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:18px !important;
  border:0 !important;
  background:transparent !important;
  box-sizing:border-box !important;
}

.theorem-gov-section .theorem-gov-cards article{
  display:block !important;
  min-height:210px !important;
  margin:0 !important;
  padding:26px 24px 24px !important;
  border:1px solid rgba(226,229,239,.96) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#fff 0%,#fbfbfe 100%) !important;
  box-shadow:0 16px 38px rgba(18,23,42,.04) !important;
  box-sizing:border-box !important;
}

.theorem-gov-section .theorem-gov-cards article:nth-child(3n+1){
  background:linear-gradient(145deg,#fbfffd 0%,#fff 78%) !important;
}

.theorem-gov-section .theorem-gov-cards article:nth-child(3n+2){
  background:linear-gradient(145deg,#f9f8ff 0%,#fff 78%) !important;
}

.theorem-gov-section .theorem-gov-cards article:nth-child(3n){
  background:linear-gradient(145deg,#fffaf4 0%,#fff 78%) !important;
}

.theorem-gov-section .theorem-gov-cards article > span{
  display:grid !important;
  place-items:center !important;
  width:46px !important;
  height:46px !important;
  margin:0 0 22px !important;
  border-radius:14px !important;
  background:#f2f0ff !important;
  color:var(--brand) !important;
  font-size:16px !important;
  box-shadow:0 10px 24px rgba(var(--brand-rgb), .06) !important;
}

.theorem-gov-section .theorem-gov-cards h3{
  margin:0 0 10px !important;
  padding:0 !important;
  color:#090d22 !important;
  font-size:18px !important;
  line-height:1.2 !important;
  letter-spacing:-0.035em !important;
  font-weight:650 !important;
}

.theorem-gov-section .theorem-gov-cards p{
  margin:0 !important;
  padding:0 !important;
  color:#6d7588 !important;
  font-size:14.5px !important;
  line-height:1.58 !important;
}

@media(max-width:1100px){
  .theorem-gov-section .theorem-gov-wrap{
    width:min(1080px, calc(100% - 84px)) !important;
  }

  .theorem-gov-section .theorem-gov-cards{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width:640px){
  .theorem-gov-section .theorem-gov-wrap{
    width:calc(100% - 28px) !important;
  }

  .theorem-gov-section .theorem-gov-head h2{
    font-size:34px !important;
  }

  .theorem-gov-section .theorem-gov-cards{
    grid-template-columns:1fr !important;
  }
}


/* =========================
   MASTER v10: isolated outcomes/comparison section
   Fixes the left-cut heading and table alignment.
   ========================= */

.comparison-section{
  display:none !important;
}

.theorem-outcomes-section{
  display:block !important;
  padding: 74px 0 84px !important;
  overflow:hidden !important;
}

.theorem-outcomes-section.page-grid{
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 540px),
      rgba(236,238,245,.92) calc(50% - 539px),
      transparent calc(50% - 539px),
      transparent calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 540px),
      rgba(236,238,245,.92) calc(50% + 541px),
      transparent calc(50% + 541px)
    ) !important;
}

.theorem-outcomes-wrap{
  width:min(1080px, calc(100% - 120px)) !important;
  max-width:1080px !important;
  margin:0 auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

.theorem-outcomes-head{
  width:100% !important;
  max-width:790px !important;
  margin:0 0 44px 0 !important;
  padding:0 !important;
  text-align:left !important;
}

.theorem-outcomes-head .eyebrow{
  margin:0 0 18px !important;
}

.theorem-outcomes-head h2{
  max-width:790px !important;
  margin:0 !important;
  padding:0 !important;
  color:#090d22 !important;
  font-size:clamp(32px, 3.48vw, 48px) !important;
  line-height:1.07 !important;
  letter-spacing:-0.06em !important;
  font-weight:560 !important;
  text-align:left !important;
}

.theorem-outcomes-head h2 span{
  color:#7468ff !important;
}

.theorem-outcomes-head p{
  max-width:760px !important;
  margin:20px 0 0 !important;
  padding:0 !important;
  color:#747b8d !important;
  font-size:17.5px !important;
  line-height:1.65 !important;
  letter-spacing:-0.02em !important;
  text-align:left !important;
}

.theorem-compare-table{
  width:100% !important;
  display:grid !important;
  border:1px solid #e6e9f2 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#fff !important;
  box-shadow:0 18px 45px rgba(18,23,42,.045) !important;
}

.theorem-compare-table .compare-row{
  display:grid !important;
  grid-template-columns: 1.05fr 1.32fr 1.32fr !important;
  min-height:92px !important;
  border-bottom:1px solid #e9ebf3 !important;
}

.theorem-compare-table .compare-row:last-child{
  border-bottom:0 !important;
}

.theorem-compare-table .compare-row > div{
  padding:26px 28px !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  border-right:1px solid #e9ebf3 !important;
  color:#4f576b !important;
  font-size:17px !important;
  line-height:1.45 !important;
  letter-spacing:-0.015em !important;
  box-sizing:border-box !important;
}

.theorem-compare-table .compare-row > div:last-child{
  border-right:0 !important;
}

.theorem-compare-table .compare-header{
  min-height:72px !important;
  background:#fbfbfe !important;
}

.theorem-compare-table .compare-header > div{
  color:#090d22 !important;
  font-size:16px !important;
  font-weight:700 !important;
  padding-top:22px !important;
  padding-bottom:22px !important;
}

.theorem-compare-table .compare-header > div:nth-child(2){
  color:var(--brand) !important;
}

.theorem-compare-table .compare-question{
  color:#090d22 !important;
  font-weight:700 !important;
  font-size:16px !important;
}

.yes-dot,
.no-dot,
.neutral-dot{
  width:22px !important;
  min-width:22px !important;
  height:22px !important;
  border-radius:999px !important;
  display:inline-grid !important;
  place-items:center !important;
  font-size:13px !important;
  font-weight:800 !important;
}

.yes-dot{ color:#15a66b !important; background:#ecf9f3 !important; }
.no-dot{ color:#e66a5d !important; background:#fff0ef !important; }
.neutral-dot{ color:#c99822 !important; background:#fff8df !important; }

@media(max-width:1100px){
  .theorem-outcomes-wrap{
    width:min(1080px, calc(100% - 84px)) !important;
  }
}

@media(max-width:760px){
  .theorem-compare-table .compare-row,
  .theorem-compare-table .compare-header{
    grid-template-columns:1fr !important;
  }

  .theorem-compare-table .compare-row > div{
    border-right:0 !important;
    border-bottom:1px solid #e9ebf3 !important;
  }

  .theorem-compare-table .compare-row > div:last-child{
    border-bottom:0 !important;
  }
}

@media(max-width:640px){
  .theorem-outcomes-wrap{
    width:calc(100% - 28px) !important;
  }

  .theorem-outcomes-head h2{
    font-size:27px !important;
  }

  .theorem-compare-table .compare-row > div{
    padding:22px 20px !important;
    font-size:15.5px !important;
  }
}


/* === v11: final CTA + footer refinement === */
.final-cta{
  padding: 72px 0 66px !important;
}

.final-cta .container{
  width: min(1080px, calc(100% - 120px)) !important;
}

.cta-shell{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 28px;
  align-items: stretch;
  padding: 46px;
  border: 1px solid #e7eaf3;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(251,252,255,.96) 100%);
  box-shadow: 0 24px 80px rgba(18, 23, 42, 0.05);
  overflow: hidden;
}

.cta-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(var(--brand-rgb), .10), transparent 26%),
    radial-gradient(circle at 90% 78%, rgba(94,210,181,.10), transparent 24%);
  pointer-events: none;
}

.cta-copy,
.cta-panel{
  position: relative;
  z-index: 1;
}

.cta-copy{
  max-width: 620px;
  text-align: left;
}

.cta-copy .eyebrow{
  margin: 0 0 18px;
}

.cta-copy h2{
  margin: 0;
  max-width: 600px;
  font-size: clamp(42px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.065em;
  color: #090d22;
  text-align: left;
}

.cta-copy > p:not(.eyebrow){
  margin: 20px 0 0;
  max-width: 620px;
  color: #747b8d;
  font-size: 18px;
  line-height: 1.72;
  text-align: left;
}

.cta-actions{
  justify-content: flex-start !important;
  margin-top: 30px !important;
}

.cta-panel{
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border: 1px solid #eceef5;
  border-radius: 22px;
  background: rgba(248,249,253,.94);
}

.cta-panel-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cta-panel-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--brand);
  font-weight: 700;
}

.cta-panel-kicker::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(var(--brand-rgb), .10);
}

.cta-panel-note{
  color: #757d92;
  font-size: 13px;
  font-weight: 600;
}

.cta-journey{
  display: grid;
  gap: 12px;
}

.cta-step-item{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  padding: 15px 16px;
  border: 1px solid #e5e8f1;
  border-radius: 16px;
  background: #fff;
}

.step-number{
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

.cta-step-item strong{
  display: block;
  margin: 2px 0 6px;
  color: #090d22;
  font-size: 16px;
  line-height: 1.3;
}

.cta-step-item p{
  margin: 0;
  color: #727a8f;
  font-size: 14px;
  line-height: 1.55;
}

.cta-microproofs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.cta-microproofs span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #e5e8f1;
  background: #fff;
  color: #5e667c;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.cta-microproofs span::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand);
}

.footer{
  padding: 52px 0 74px;
  border-top: 1px solid #e7eaf3;
  background: rgba(255,255,255,.82);
}

.footer .container{
  width: min(1080px, calc(100% - 120px)) !important;
}

.footer-grid{
  grid-template-columns: 1.45fr 1fr 1fr 1fr;
  gap: 56px;
}

.footer p{
  margin-top: 18px;
  max-width: 310px;
  color: #757d92;
}

.footer h4{
  margin: 0 0 18px;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #090d22;
}

.footer a:not(.brand){
  margin: 12px 0;
  color: #70788c;
}

.socials a{
  display: inline-block !important;
  margin: 0 !important;
}

@media (max-width: 1080px){
  .final-cta .container,
  .footer .container{
    width: min(1080px, calc(100% - 56px)) !important;
  }

  .cta-shell{
    grid-template-columns: 1fr;
    padding: 34px;
  }
}

@media (max-width: 640px){
  .final-cta .container,
  .footer .container{
    width: calc(100% - 28px) !important;
  }

  .cta-shell{
    padding: 22px;
    border-radius: 22px;
  }

  .cta-copy h2{
    font-size: 34px;
  }

  .cta-copy > p:not(.eyebrow){
    font-size: 16px;
  }

  .cta-actions .btn{
    width: 100%;
  }

  .cta-panel{
    padding: 18px;
  }

  .cta-step-item{
    grid-template-columns: 1fr;
  }

  .step-number{
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
}


/* === v12: final CTA line cleanup === */
.final-cta.page-grid{
  background: none !important;
  border-bottom: 1px solid var(--line2);
}

.final-cta.page-grid::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(50% - 540px),
      rgba(241,242,247,.92) calc(50% - 540px),
      rgba(241,242,247,.92) calc(50% - 539px),
      transparent calc(50% - 539px),
      transparent calc(50% + 540px),
      rgba(241,242,247,.92) calc(50% + 540px),
      rgba(241,242,247,.92) calc(50% + 541px),
      transparent calc(50% + 541px)
    );
  pointer-events: none;
}

.final-cta .container{
  position: relative;
  z-index: 1;
}

.cta-shell{
  position: relative;
  z-index: 1;
}


/* === v13: final CTA inner padding + width correction === */

/* Match the width discipline of the section above instead of expanding wider */
.final-cta .container{
  width: min(1080px, calc(100% - 120px)) !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The outer card now gives proper breathing room from all borders */
.cta-shell{
  width: 100% !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 64px 58px !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr) !important;
  gap: 52px !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Keep content comfortably inside the card, not visually touching top/bottom */
.cta-copy{
  align-self: center !important;
}

.cta-panel{
  align-self: center !important;
  padding: 26px !important;
}

/* Add slightly more vertical breathing inside the right panel too */
.cta-journey{
  gap: 14px !important;
}

.cta-step-item{
  padding: 17px 18px !important;
}

/* The chips should not sit too close to the bottom edge */
.cta-microproofs{
  margin-top: 10px !important;
}

/* Keep the background rails outside the CTA card only */
.final-cta.page-grid::before{
  z-index: 0 !important;
}

.final-cta .container,
.cta-shell{
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 1080px){
  .final-cta .container{
    width: min(1080px, calc(100% - 56px)) !important;
  }

  .cta-shell{
    padding: 42px 34px !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }
}

@media (max-width: 640px){
  .final-cta .container{
    width: calc(100% - 28px) !important;
  }

  .cta-shell{
    padding: 28px 22px !important;
  }
}


/* === v15: reliable persisted active nav state === */

.nav-links a[href^="#"].is-active{
  color: var(--brand) !important;
}

.nav-links a[href^="#"]{
  position: relative !important;
}

.nav-links a[href^="#"]::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -19px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--brand) !important;
  opacity: 0 !important;
  transform: scaleX(.55) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.nav-links a[href^="#"].is-active::after{
  opacity: 1 !important;
  transform: scaleX(1) !important;
}




h1 span,
h2 span,
.accent,
.gradient-text,
.eyebrow,
.nav-links a[href^="#"].is-active{
  color: var(--brand) !important;
}

.btn-primary,
.primary,
button.primary,
a.primary{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

.btn-primary:hover,
.primary:hover,
button.primary:hover,
a.primary:hover{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

.nav-links a[href^="#"].is-active::after,
.cta-panel-kicker::before,
.cta-microproofs span::before{
  background: var(--brand) !important;
}

.step-number,
.cta-panel-kicker,
.tag,
.badge,
.pill{
  color: var(--brand) !important;
}

.step-number,
.icon-badge,
.badge-soft,
.pill-soft{
  background: var(--brand-soft) !important;
}


/* =========================================================
   THEOREM COLOR CONTROL — CHANGE ONLY THIS BLOCK
   =========================================================
   To test a new color, update these 5 values only.

   Current: blue
   --brand:       main color
   --brand-rgb:   same color in RGB, used for shadows/transparent bg
   --brand-hover: darker hover shade
   --brand-soft:  very light background
   --brand-soft-2: slightly stronger soft background

   Example teal:
   --brand: #0F766E;
   --brand-rgb: 15, 118, 110;
   --brand-hover: #0D5F59;
   --brand-soft: #ECFDF5;
   --brand-soft-2: #CCFBF1;
*/
:root{
  --brand: var(--brand);
  --brand-rgb: 37, 99, 235;
  --brand-hover: var(--brand);
  --brand-soft: var(--brand-soft);
  --brand-soft-2: var(--brand-soft);
}

/* Force all old Relevance-like purple accents to obey the theme color */
.hero h1 span,
.hero-title span,
h1 span,
h2 span,
.highlight,
.accent,
.gradient-text,
.eyebrow,
.kicker,
.section-kicker,
.nav-links a.is-active,
.site-nav a.is-active,
nav a.is-active,
.stat strong,
.metric strong,
.card-kicker,
.usecase-kicker,
.playbook-kicker,
.cta-panel-kicker{
  color: var(--brand) !important;
}

.btn-primary,
.primary,
a.primary,
button.primary,
.contact-sales,
.contact-btn,
.header-cta,
.hero-actions a:first-child,
.hero .actions a:first-child,
.hero a[href*="contact"],
.hero a[href*="Contact"],
.cta-button,
.nav-cta{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

.btn-primary:hover,
.primary:hover,
a.primary:hover,
button.primary:hover,
.contact-sales:hover,
.contact-btn:hover,
.header-cta:hover,
.hero-actions a:first-child:hover,
.hero .actions a:first-child:hover,
.cta-button:hover,
.nav-cta:hover{
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}

.icon-badge,
.step-number,
.badge-soft,
.pill-soft,
.soft-accent,
.agent-icon,
.usecase-icon{
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}

.nav-links a.is-active::after,
.site-nav a.is-active::after,
nav a.is-active::after,
.cta-panel-kicker::before,
.cta-microproofs span::before{
  background: var(--brand) !important;
}

[style*="var(--brand)"],
[style*="var(--brand)"],
[style*="var(--brand)"]{
  color: var(--brand) !important;
}

svg [stroke],
svg [fill]{
  --svg-brand: var(--brand);
}

svg [stroke="var(--brand)"],
svg [stroke="var(--brand)"],
svg [stroke="var(--brand)"],
svg [stroke="var(--brand)"]{
  stroke: var(--brand) !important;
}

svg [fill="var(--brand)"],
svg [fill="var(--brand)"],
svg [fill="var(--brand)"],
svg [fill="var(--brand)"]{
  fill: var(--brand) !important;
}

/* Restore clean hero button visibility */
.hero .button-row,
.hero-actions,
.hero-ctas{
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.hero .button-row a,
.hero-actions a,
.hero-ctas a{
  opacity: 1 !important;
  visibility: visible !important;
  min-width: 150px;
}

/* No experimental right-side floating cards */
.hero-side-visual,
.hero-side-card,
.hero-play-dot{
  display: none !important;
}


/* =========================================================
   THEOREM COLOR CONTROL — CHANGE ONLY THIS BLOCK
   ========================================================= */
:root{
  --brand: #005be2;
  --brand-rgb: 0, 91, 226;
  --brand-hover: #1D4ED8;
  --brand-soft: #EFF6FF;
  --brand-soft-2: #DBEAFE;
}

/* =========================================================
   v21 COLOR FIX — remove purple everywhere without resizing hero
   ========================================================= */

/* Anything that was purple/highlighted must follow --brand */
.eyebrow,
.kicker,
.section-kicker,
.section-eyebrow,
.label,
.prehead,
.overline,
.hero-kicker,
.playbooks-kicker,
.card-kicker,
.usecase-kicker,
.cta-panel-kicker,
[class*="kicker"],
[class*="eyebrow"],
[class*="overline"],
.accent,
.highlight,
.gradient-text,
h1 span,
h2 span{
  color: var(--brand) !important;
  -webkit-text-fill-color: var(--brand) !important;
  background: none !important;
  background-image: none !important;
}

/* Buttons */
.btn-primary,
.primary,
a.primary,
button.primary,
.contact-sales,
.contact-btn,
.header-cta,
.nav-cta,
.cta-button,
.hero-actions a:first-child,
.hero-ctas a:first-child,
.hero .button-row a:first-child,
.hero .actions a:first-child{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

.btn-primary:hover,
.primary:hover,
a.primary:hover,
button.primary:hover,
.contact-sales:hover,
.contact-btn:hover,
.header-cta:hover,
.nav-cta:hover,
.cta-button:hover{
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}

/* Active nav */
.nav-links a.is-active,
.site-nav a.is-active,
nav a.is-active,
.header-nav a.is-active{
  color: var(--brand) !important;
}

.nav-links a.is-active::after,
.site-nav a.is-active::after,
nav a.is-active::after,
.header-nav a.is-active::after{
  background: var(--brand) !important;
}

/* Soft accent elements */
.icon-badge,
.step-number,
.badge-soft,
.pill-soft,
.soft-accent,
.agent-icon,
.usecase-icon,
[class*="icon-badge"],
[class*="step-number"]{
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}

/* SVG accents */
svg [stroke="#5b4df7"],
svg [stroke="#7668ff"],
svg [stroke="#6b5cff"],
svg [stroke="#2563EB"],
svg [stroke="var(--brand)"]{
  stroke: var(--brand) !important;
}
svg [fill="#5b4df7"],
svg [fill="#7668ff"],
svg [fill="#6b5cff"],
svg [fill="#2563EB"],
svg [fill="var(--brand)"]{
  fill: var(--brand) !important;
}

/* =========================================================
   v21 EXACT HEADING SIZE FIX — 25% smaller
   Only these areas. Hero h1 is intentionally NOT included.
   ========================================================= */

.target-small-heading,
#playbooks h1:first-of-type,
#playbooks h2:first-of-type,
#quality h1:first-of-type,
#quality h2:first-of-type,
#governance h1:first-of-type,
#governance h2:first-of-type,
#why h1:first-of-type,
#why h2:first-of-type,
#comparison h1:first-of-type,
#comparison h2:first-of-type,
#contact h1:first-of-type,
#contact h2:first-of-type{
  font-size: clamp(22px, 2.52vw, 38px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.055em !important;
}

/* Make paragraphs under those headings proportional, not oversized */
#playbooks .section-lead,
#playbooks .lead,
#playbooks .section-header p,
#quality .section-lead,
#quality .lead,
#quality .section-header p,
#governance .section-lead,
#governance .lead,
#governance .section-header p,
#why .section-lead,
#why .lead,
#why .section-header p,
#comparison .section-lead,
#comparison .lead,
#comparison .section-header p,
#contact .section-lead,
#contact .lead,
#contact .section-header p{
  font-size: clamp(16px, 1.15vw, 20px) !important;
  line-height: 1.55 !important;
}

/* Do not show bad experimental hero side cards */
.hero-side-visual,
.hero-side-card,
.hero-play-dot{
  display: none !important;
}

/* =========================================================
   v22 — Theorem cleanup from uploaded files
   1) single color source for whole site
   2) working hero switch animation
   3) refreshed Theorem logo
   ========================================================= */

/* COLOR CONTROL: edit only these 5 values to test a new theme color */
:root{
  --brand: #005BE2;
  --brand-rgb: 0, 91, 226;
  --brand-hover: #0049B8;
  --brand-soft: #EFF6FF;
  --brand-soft-2: #DBEAFE;

  /* make old variables follow the new color too */
  --primary: var(--brand);
  --primary2: var(--brand);
}

/* Logo refresh */
.brand.theorem-logo{
  gap: 11px !important;
  letter-spacing: -0.035em !important;
}

.theorem-mark{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.theorem-mark svg{
  width: 22px;
  height: auto;
  display: block;
}

.theorem-mark rect:nth-child(1){ fill: #0a0a0a; }
.theorem-mark rect:nth-child(2){ fill: #0a0a0a; }
.theorem-mark rect:nth-child(3){ fill: #3b82f6; }

.theorem-wordmark{
  font-family: 'Bai Jamjuree', serif;
  font-weight: 500;
  font-size: 25px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000;
  -webkit-text-stroke: 1.8px #000;
}

.brand-mark{display:none !important;}

/* Brand color must propagate everywhere, including older hard-coded purple overrides */
.hero h1 span,
.hero h1 .hero-switch,
.hero h1 .hero-switch > span,
h1 span,
h2 span,
.target-small-heading span,
.section-heading h2 span,
.integrations-section h2 span,
.theorem-outcomes-head h2 span,
.theorem-gov-head h2 span,
.qm-intro h2 span,
.eyebrow,
.usecase-label,
.qm-kicker,
.compat-label,
.example-label,
.cta-panel-kicker,
.nav-links a.is-active,
.yes-dot,
.step-number,
.metric.good b,
.score small,
.lead-score b,
.report-badge,
.cart-bubble,
.reply-card,
.mini-pill.deal{
  color: var(--brand) !important;
  -webkit-text-fill-color: var(--brand) !important;
  background-image: none !important;
}

.btn-primary,
.hero-actions a:first-child,
.nav-actions .btn-primary,
.cta-actions .btn-primary,
.agent-orb button,
.timeline .active,
.bar-chart i.accent,
.flow-grid .active-flow li:before,
.mini-diagram.purple p:before{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

.btn-primary:hover,
.hero-actions a:first-child:hover,
.nav-actions .btn-primary:hover,
.cta-actions .btn-primary:hover{
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}

.btn-primary,
.timeline .active,
.agent-orb button{
  box-shadow: 0 12px 28px rgba(var(--brand-rgb), .22) !important;
}

.play-icon,
.avatar,
.governance-grid article span,
.theorem-gov-cards article span,
.step-number,
.icon-badge,
.provider-logo,
.route-item i,
.qm-icon,
.cta-step-item .step-number{
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}

.mini-diagram.purple,
.level-active,
.flow-grid .active-flow{
  background: var(--brand-soft) !important;
  border-color: rgba(var(--brand-rgb), .20) !important;
}

.nav-links a.is-active::after,
.nav-links a[href^="#"].is-active::after,
.cta-panel-kicker::before,
.cta-microproofs span::before{
  background: var(--brand) !important;
}

/* Replace old purple pastel card with blue-tinted pastel */
.usecase-card.lilac,
.pb-purple:before{
  background: linear-gradient(135deg, var(--brand-soft) 0%, #fff 78%) !important;
}

.pb-purple .play-icon{
  color: var(--brand) !important;
}

/* Hero switch: fixes the non-working text animation without changing hero layout */
.hero h1 .hero-switch{
  display: block !important;
  color: var(--brand) !important;
  min-height: 1.12em;
}

.hero h1 .hero-switch > span{
  display: inline-block !important;
  color: var(--brand) !important;
  will-change: transform, opacity;
  transition: opacity .26s ease, transform .26s ease, filter .26s ease;
}

.hero h1 .hero-switch > span.is-changing{
  opacity: 0;
  transform: translateY(13px);
  filter: blur(3px);
}

@media (prefers-reduced-motion: reduce){
  .hero h1 .hero-switch > span{
    transition: none !important;
  }
}

/* Keep the requested non-hero large headings smaller; hero h1 stays untouched */
#playbooks .target-small-heading,
#quality .target-small-heading,
#governance .target-small-heading,
#why-us .target-small-heading,
#why-us h2,
#comparison h2,
#contact .target-small-heading{
  font-size: clamp(30px, 3.15vw, 52px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.058em !important;
}

#quality .eyebrow,
#governance .eyebrow,
#comparison .eyebrow,
#why-us .eyebrow,
#contact .eyebrow{
  color: var(--brand) !important;
}

/* Do not recolor third-party integration logos; only Theorem/UI accents follow theme */
.integration-cluster.relevance-style-icons .si.make svg circle{ fill:#7B3FF2 !important; }
.integration-cluster.relevance-style-icons .si.make svg path{ fill:#fff !important; }
.integration-cluster.relevance-style-icons .si.zapier svg circle{ fill:#D7F700 !important; }
.integration-cluster.relevance-style-icons .si.zapier svg path{ fill:#111827 !important; }
.integration-cluster.relevance-style-icons .si.hubspot svg path{ fill:#ff5c35 !important; }
.integration-cluster.relevance-style-icons .si.salesforce svg path{ fill:#00a1e0 !important; }
.integration-cluster.relevance-style-icons .si.gmail svg path:first-child{ fill:#EA4335 !important; }
.integration-cluster.relevance-style-icons .si.gmail svg path:last-child{ fill:#fff !important; }

/* Clean small SVGs used as UI marks */
.theorem-mark svg *{
  vector-effect: non-scaling-stroke;
}

/* =========================================================
   v23 — Playbook section feedback
   - clearer section eyebrow
   - no per-card links
   - smaller card headings
   - global/non-local sample data
   - all Theorem accent text follows --brand
   ========================================================= */

/* Keep this as the single source of the blue. Change these values only for future color tests. */
:root{
  --brand: #005BE2;
  --brand-rgb: 0, 91, 226;
  --brand-hover: #0049B8;
  --brand-soft: #EFF6FF;
  --brand-soft-2: #DBEAFE;
  --primary: var(--brand);
  --primary2: var(--brand);
}

#playbooks .eyebrow,
#playbooks .usecase-label,
#playbooks .lead-score b,
#playbooks .mini-pill.deal,
#playbooks .cart-bubble,
#playbooks .report-badge{
  color: var(--brand) !important;
}

/* Remove card-level CTAs from this section as requested. */
#playbooks .usecase-copy a{
  display: none !important;
}

/* Slightly smaller black card headings without touching the main hero. */
#playbooks .usecase-grid-six .usecase-copy h3,
#playbooks .usecase-grid-six .usecase-card.large .usecase-copy h3{
  font-size: clamp(21px, 1.85vw, 23px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.046em !important;
  font-weight: 650 !important;
}

/* Keep body copy readable after removing links. */
#playbooks .usecase-grid-six .usecase-copy p{
  margin-top: 18px !important;
  font-size: 15.5px !important;
  line-height: 1.58 !important;
}

/* A little more compact after removing the bottom links. */
#playbooks .usecase-grid-six .usecase-card,
#playbooks .usecase-grid-six .usecase-card.large{
  min-height: 286px !important;
  padding-bottom: 24px !important;
}

/* Make the real-estate sample clearly global, not local/Pakistan-specific. */
#playbooks .real-estate-visual .chat-card.one,
#playbooks .real-estate-visual .chat-card.two,
#playbooks .real-estate-visual .lead-score{
  color: #273044 !important;
}

#playbooks .real-estate-visual .lead-score b{
  color: var(--brand) !important;
}

@media(max-width: 860px){
  #playbooks .usecase-grid-six .usecase-copy h3,
  #playbooks .usecase-grid-six .usecase-card.large .usecase-copy h3{
    font-size: 22px !important;
  }
}


/* =========================================================
   v24 — Global, higher-value playbook/usecase section
   - Replaced local real-estate sample with global marketing lead automation
   - More critical business workflows: marketing, sales, support, ops, commerce, compliance
   - Tightened card text hierarchy while preserving the finalized 2x3 pastel layout
   ========================================================= */

#playbooks .playbook-intro .eyebrow{
  color: var(--brand) !important;
}

#playbooks .usecase-label{
  color: var(--brand) !important;
  -webkit-text-fill-color: var(--brand) !important;
}

#playbooks .usecase-grid-six .usecase-copy h3{
  font-size: clamp(20px, 1.68vw, 22px) !important;
  line-height: 1.13 !important;
  letter-spacing: -0.047em !important;
  max-width: 310px !important;
}

#playbooks .usecase-grid-six .usecase-copy p{
  font-size: 15px !important;
  line-height: 1.56 !important;
  max-width: 330px !important;
  margin-top: 17px !important;
}

#playbooks .usecase-card{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#playbooks .usecase-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 68px rgba(18,23,42,.075) !important;
  border-color: rgba(var(--brand-rgb), .18) !important;
}

#playbooks .usecase-card.mint{
  background: linear-gradient(135deg, #ECFBF2 0%, #F8FFFB 82%) !important;
}

#playbooks .usecase-card.lilac{
  background: linear-gradient(135deg, var(--brand-soft) 0%, #FFFFFF 82%) !important;
}

#playbooks .usecase-card.peach{
  background: linear-gradient(135deg, #FFF2E8 0%, #FFFFFF 82%) !important;
}

#playbooks .usecase-card.sky{
  background: linear-gradient(135deg, #EEF6FF 0%, #FFFFFF 82%) !important;
}

#playbooks .usecase-card.butter{
  background: linear-gradient(135deg, #FFF6DB 0%, #FFFFFF 82%) !important;
}

#playbooks .usecase-card.stone{
  background: linear-gradient(135deg, #F5F5F2 0%, #FFFFFF 82%) !important;
}

#playbooks .real-estate-visual{
  background:
    radial-gradient(circle at 65% 38%, rgba(var(--brand-rgb), .13), transparent 31%),
    radial-gradient(circle at 34% 75%, rgba(24,185,102,.11), transparent 31%) !important;
}

#playbooks .chat-card.one{
  left: 4% !important;
  top: 17% !important;
  width: 242px !important;
}

#playbooks .chat-card.two{
  right: 5% !important;
  top: 39% !important;
  width: 190px !important;
}

#playbooks .lead-score{
  left: 26% !important;
  bottom: 15% !important;
}

#playbooks .lead-score b,
#playbooks .mini-pill.deal,
#playbooks .cart-bubble,
#playbooks .report-badge,
#playbooks .reply-card{
  color: var(--brand) !important;
  -webkit-text-fill-color: var(--brand) !important;
}

@media(max-width: 860px){
  #playbooks .usecase-grid-six .usecase-copy h3{
    max-width: none !important;
    font-size: 22px !important;
  }

  #playbooks .usecase-grid-six .usecase-copy p{
    max-width: none !important;
  }
}

/* =========================================================
   v24.1 — Safe refinement from the older good base
   Scope intentionally limited:
   1) Slightly smaller card title/body text
   2) Better, more complete micro-graphics in all 6 usecase cards
   ========================================================= */

#playbooks .usecase-grid-six .usecase-card{
  grid-template-columns: .94fr 1.06fr !important;
  column-gap: 18px !important;
}

#playbooks .usecase-grid-six .usecase-copy h3,
#playbooks .usecase-grid-six .usecase-card.large .usecase-copy h3{
  font-size: clamp(19px, 1.48vw, 20.5px) !important;
  line-height: 1.12 !important;
  max-width: 292px !important;
}

#playbooks .usecase-grid-six .usecase-copy p{
  font-size: 14px !important;
  line-height: 1.48 !important;
  max-width: 292px !important;
  margin-top: 14px !important;
}

#playbooks .usecase-grid-six .usecase-label{
  margin-bottom: 13px !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
}

#playbooks .usecase-grid-six .usecase-visual{
  min-height: 196px !important;
  isolation: isolate;
}

#playbooks .usecase-visual::before{
  content:"";
  position:absolute;
  inset: 18px 6px 6px 0;
  border-radius: 26px;
  background:
    radial-gradient(circle at 70% 38%, rgba(var(--brand-rgb), .12), transparent 29%),
    radial-gradient(circle at 40% 78%, rgba(16, 185, 129, .10), transparent 30%);
  filter: blur(.1px);
  z-index:-1;
}

/* 1 — Marketing: campaign message -> intent -> qualification */
#playbooks .real-estate-visual .chat-card.one{
  left: 1% !important;
  top: 18% !important;
  width: 232px !important;
  padding: 13px 15px !important;
}

#playbooks .real-estate-visual .chat-card.one::before{
  content:"Ad click";
  display:inline-block;
  margin-bottom: 7px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), .10);
  color: var(--brand);
  font-size: 11px;
  font-weight: 760;
}

#playbooks .real-estate-visual .chat-card.two{
  right: 2% !important;
  top: 39% !important;
  width: 178px !important;
  padding: 12px 14px !important;
}

#playbooks .real-estate-visual .lead-score{
  left: 22% !important;
  bottom: 14% !important;
  padding: 13px 16px !important;
}

#playbooks .real-estate-visual::after{
  content:"";
  position:absolute;
  left: 49%;
  top: 35%;
  width: 72px;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--brand-rgb), .28), transparent);
  transform: rotate(16deg);
}

/* 2 — Sales: realistic CRM card with lead score and stage chip */
#playbooks .sales-visual .mini-email{
  width: 232px !important;
  height: 132px !important;
  right: 1% !important;
  top: 25% !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.86) !important;
}

#playbooks .sales-visual .mini-email::before{
  left: 24px !important;
  right: 22px !important;
  top: 28px !important;
  height: 9px !important;
  background:#d5dae6 !important;
  box-shadow: 0 25px 0 #edf0f6, 0 50px 0 #edf0f6 !important;
}

#playbooks .sales-visual .mini-email::after{
  content:"";
  position:absolute;
  left: 22px;
  bottom: 20px;
  width: 48px;
  height: 9px;
  border-radius: 99px;
  background: rgba(var(--brand-rgb), .18);
  box-shadow: 62px 0 0 rgba(22,163,74,.14), 124px 0 0 rgba(234,88,12,.13);
}

#playbooks .sales-visual .mini-pill.hot{
  left: 0 !important;
  top: 18% !important;
  color:#d7673e !important;
}

#playbooks .sales-visual .mini-pill.deal{
  right: 0 !important;
  bottom: 14% !important;
}

#playbooks .sales-visual::after{
  content:"CRM updated";
  position:absolute;
  right: 12%;
  top: 7%;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(222,226,238,.8);
  color:#667085;
  font-size: 11px;
  font-weight: 720;
  box-shadow:0 14px 34px rgba(18,23,42,.055);
}

/* 3 — Support: layered conversation with priority + safe escalation */
#playbooks .support-visual .ticket-card{
  width: 222px !important;
  height: 126px !important;
  right: 3% !important;
  top: 24% !important;
  border-radius: 20px !important;
}

#playbooks .support-visual .ticket-card::before{
  left: 20px !important;
  right: 20px !important;
  top: 28px !important;
  height: 9px !important;
  box-shadow: 0 25px 0 #eceff5, 0 50px 0 #eceff5 !important;
}

#playbooks .support-visual .ticket-card::after{
  content:"Billing issue";
  position:absolute;
  left: 18px;
  top: -18px;
  padding: 8px 12px;
  border-radius: 13px;
  background: rgba(255,255,255,.9);
  border:1px solid rgba(222,226,238,.85);
  color:#202637;
  font-size: 12px;
  font-weight: 760;
  box-shadow:0 14px 32px rgba(18,23,42,.06);
}

#playbooks .support-visual .reply-card{
  left: 4% !important;
  bottom: 17% !important;
  color:#148f62 !important;
}

#playbooks .support-visual::after{
  content:"Escalation safe";
  position:absolute;
  right: 2%;
  bottom: 4%;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  border:1px solid rgba(222,226,238,.82);
  color:#e66e38;
  font-size: 11px;
  font-weight: 760;
  box-shadow:0 14px 34px rgba(18,23,42,.055);
}

/* 4 — Operations: dashboard + report output */
#playbooks .ops-visual{
  gap: 12px !important;
  padding-bottom: 44px !important;
  align-items: flex-end !important;
}

#playbooks .ops-visual span{
  width: 42px !important;
  border-radius: 10px 10px 0 0 !important;
  background: linear-gradient(180deg, var(--brand), rgba(var(--brand-rgb), .55)) !important;
}

#playbooks .ops-visual .report-badge{
  right: 1% !important;
  top: 20% !important;
}

#playbooks .ops-visual::before{
  content:"";
  position:absolute;
  left: 10%;
  right: 6%;
  bottom: 42px;
  height: 1px;
  background: rgba(148,163,184,.28);
}

#playbooks .ops-visual::after{
  content:"3 blockers summarized";
  position:absolute;
  left: 3%;
  top: 14%;
  padding: 9px 12px;
  border-radius: 15px;
  background: rgba(255,255,255,.76);
  border:1px solid rgba(222,226,238,.84);
  color:#273044;
  font-size: 12px;
  font-weight: 680;
  box-shadow:0 14px 34px rgba(18,23,42,.055);
}

/* 5 — Commerce: catalog/order status graphic */
#playbooks .ecommerce-visual .product-card{
  width: 226px !important;
  height: 138px !important;
  right: 1% !important;
  top: 22% !important;
}

#playbooks .ecommerce-visual .product-card::before{
  width: 58px !important;
  height: 58px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #fff0c7, #fff8e7) !important;
}

#playbooks .ecommerce-visual .product-card::after{
  left: 92px !important;
  top: 30px !important;
  height: 9px !important;
  box-shadow:0 25px 0 #eceff5, 0 50px 0 #eceff5 !important;
}

#playbooks .ecommerce-visual .cart-bubble{
  left: 1% !important;
  bottom: 17% !important;
}

#playbooks .ecommerce-visual::after{
  content:"Catalog  ·  Order  ·  Return";
  position:absolute;
  left: 5%;
  top: 14%;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  border:1px solid rgba(222,226,238,.84);
  color:#b78016;
  font-size: 11px;
  font-weight: 760;
  box-shadow:0 14px 34px rgba(18,23,42,.055);
}

/* 6 — Compliance: approval gate, not empty placeholders */
#playbooks .sop-visual{
  display:block !important;
}

#playbooks .sop-visual div{
  position:absolute !important;
  width:auto !important;
  height:auto !important;
  transform:none !important;
  box-shadow:0 18px 45px rgba(18,23,42,.08) !important;
}

#playbooks .sop-visual div:nth-child(1){
  left: 4%;
  top: 24%;
  right: 5%;
  min-height: 112px;
  border-radius: 20px;
  background:#161616 !important;
  border-color: rgba(0,0,0,.12) !important;
}

#playbooks .sop-visual div:nth-child(1)::before{
  content:"Approval needed\A Confidence below threshold";
  white-space: pre;
  position:absolute;
  left: 18px;
  top: 16px;
  color:#fff;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 720;
}

#playbooks .sop-visual div:nth-child(1)::after{
  content:"Approve    Escalate";
  position:absolute;
  left: 18px;
  bottom: 16px;
  color:#148f62;
  font-size: 12px;
  font-weight: 760;
  letter-spacing:.01em;
  word-spacing: 16px;
}

#playbooks .sop-visual div:nth-child(2){
  right: 4%;
  bottom: 17%;
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.86) !important;
  color: var(--brand);
  font-size: 12px;
  font-weight: 760;
}

#playbooks .sop-visual div:nth-child(2)::before{content:"Audit log saved";}

#playbooks .sop-visual div:nth-child(3){
  left: 0;
  bottom: 7%;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.80) !important;
  color:#667085;
  font-size: 11px;
  font-weight: 720;
}

#playbooks .sop-visual div:nth-child(3)::before{content:"Human approval ready";}

@media(max-width: 1080px){
  #playbooks .usecase-grid-six .usecase-card{
    grid-template-columns: 1fr !important;
  }

  #playbooks .usecase-grid-six .usecase-copy h3,
  #playbooks .usecase-grid-six .usecase-copy p{
    max-width: none !important;
  }
}


/* =========================================================
   v24.2 — Targeted fixes only
   - small spacing fix in marketing badge
   - slightly smaller title/body copy in usecase cards
   - prevent text/visual crowding in sales/support/commerce
   - separate operations badges
   - lighten compliance visual to match the section theme
   ========================================================= */

/* Slight overall reduction in card copy sizes */
#playbooks .usecase-grid-six .usecase-copy h3,
#playbooks .usecase-grid-six .usecase-card.large .usecase-copy h3{
  font-size: clamp(18px, 1.34vw, 19px) !important;
  line-height: 1.11 !important;
  max-width: 276px !important;
}

#playbooks .usecase-grid-six .usecase-copy p{
  font-size: 13.25px !important;
  line-height: 1.46 !important;
  max-width: 266px !important;
}

/* A touch more separation between copy and visuals */
#playbooks .usecase-grid-six .usecase-card{
  column-gap: 24px !important;
}

/* 1 — Marketing */
#playbooks .real-estate-visual .chat-card.one::before{
  margin-right: 10px !important;
  margin-bottom: 0 !important;
  vertical-align: middle;
}

/* 2 — Sales */
#playbooks .sales-visual .mini-email{
  width: 214px !important;
  right: 3% !important;
}
#playbooks .sales-visual .mini-pill.hot{
  left: 6% !important;
}
#playbooks .sales-visual .mini-pill.deal{
  right: 2% !important;
}
#playbooks .sales-visual::after{
  right: 14% !important;
}

/* 3 — Support */
#playbooks .support-visual .ticket-card{
  width: 210px !important;
  right: 4% !important;
}
#playbooks .support-visual .reply-card{
  left: 10% !important;
  bottom: 18% !important;
}
#playbooks .support-visual::after{
  right: 4% !important;
}

/* 4 — Operations */
#playbooks .ops-visual .report-badge{
  right: 2% !important;
  top: 28% !important;
}
#playbooks .ops-visual::after{
  left: 1% !important;
  top: 10% !important;
}

/* 5 — Commerce */
#playbooks .ecommerce-visual .product-card{
  width: 214px !important;
  right: 3% !important;
}
#playbooks .ecommerce-visual .cart-bubble{
  left: 7% !important;
  bottom: 17% !important;
}
#playbooks .ecommerce-visual::after{
  left: 8% !important;
}

/* 6 — Compliance */
#playbooks .sop-visual div:nth-child(1){
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,255,.94)) !important;
  border: 1px solid rgba(222,226,238,.92) !important;
}
#playbooks .sop-visual div:nth-child(1)::before{
  color: #202637 !important;
}
#playbooks .sop-visual div:nth-child(1)::after{
  color: #148f62 !important;
}


/* v24.3 — remove outcomes comparison section completely */
.theorem-outcomes-section,
.comparison-section,
.theorem-compare-table {
  display: none !important;
}


/* =========================================================
   v27 — built from individual uploaded files only
   Fixes:
   - Removes old comparison/outcomes section
   - Replaces quality section with clean Trust System UI
   - Forces purple accent leaks to current brand color
   ========================================================= */

/* Hard-remove old section if any browser cache/markup keeps it */
.theorem-outcomes-section,
.comparison-section,
.theorem-compare-table{
  display:none !important;
}

/* Final brand color enforcement */
:root{
  --primary: var(--brand) !important;
  --primary2: var(--brand) !important;
}

.hero h1 span,
.hero-switch span,
.section-heading h2 span,
.integrations-section h2 span,
h1 span,
h2 span,
.eyebrow,
.nav-links a.is-active,
#playbooks .usecase-label{
  color: var(--brand) !important;
  -webkit-text-fill-color: var(--brand) !important;
}

.hero h1 span,
.hero-switch,
.hero-switch span{
  background: none !important;
  background-image: none !important;
}

/* Trust system section */
.trust-system-section{
  padding: 104px 0 112px !important;
}

.trust-system-container{
  width: min(1020px, calc(100% - 88px)) !important;
}

.trust-system-intro{
  max-width: 720px;
  text-align: left;
  margin-bottom: 30px;
}

.trust-system-intro .eyebrow{
  margin-bottom: 18px !important;
}

.trust-system-intro h2{
  margin: 0;
  font-size: clamp(38px, 4.25vw, 58px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.058em !important;
  font-weight: 610 !important;
  color: #0d1227 !important;
  -webkit-text-fill-color: #0d1227 !important;
  background: none !important;
}

.trust-system-intro p{
  max-width: 690px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.68;
  letter-spacing: -0.018em;
}

.model-strip{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 880px;
  margin: 34px 0 26px;
  padding: 12px;
  border: 1px solid rgba(226,230,240,.94);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 16px 42px rgba(18,23,42,.045);
}

.model-strip span{
  color: #7a8191;
  font-size: 13px;
  padding: 0 6px 0 8px;
}

.model-strip b{
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f7f8fb;
  border: 1px solid #eceff6;
  color: #2a3145;
  font-size: 13px;
  font-weight: 680;
}

.trust-system-panel{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

.trust-card{
  min-height: 324px;
  padding: 26px;
  border-radius: 22px;
  border: 1px solid rgba(224,228,238,.95);
  background:
    radial-gradient(circle at 72% 18%, rgba(var(--brand-rgb), .10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,252,255,.94));
  box-shadow: 0 22px 68px rgba(18,23,42,.06);
  position: relative;
  overflow: hidden;
}

.trust-card:nth-child(2){
  background:
    radial-gradient(circle at 72% 18%, rgba(24,185,102,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,252,255,.94));
}

.trust-card:nth-child(3){
  background:
    radial-gradient(circle at 72% 18%, rgba(226,166,0,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,252,255,.94));
}

.trust-icon{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 13px;
  font-weight: 820;
  margin-bottom: 22px;
}

.trust-card h3{
  margin: 0;
  color: #0d1227;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.045em;
  font-weight: 680;
}

.trust-card p{
  margin: 13px 0 0;
  color: #657084;
  font-size: 14.5px;
  line-height: 1.58;
}

.mini-model-map{
  margin-top: 24px;
  display: grid;
  gap: 9px;
}

.mini-model-map span{
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e8ecf4;
  color: #4b5568;
  font-size: 12.5px;
  font-weight: 650;
}

.mini-model-map span::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 5px rgba(var(--brand-rgb), .10);
}

.quality-bars{
  margin-top: 26px;
  display: grid;
  gap: 12px;
}

.quality-bars div{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e8ecf4;
}

.quality-bars span{
  color: #626b7e;
  font-size: 12.5px;
  font-weight: 650;
}

.quality-bars b{
  color: #18a36d;
  font-size: 12.5px;
  font-weight: 820;
}

.approval-mini{
  margin-top: 24px;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e8ecf4;
}

.approval-mini strong{
  display: block;
  color: #202637;
  font-size: 13px;
  margin-bottom: 12px;
}

.approval-mini span{
  display: block;
  padding: 10px 0 10px 22px;
  color: #5d6678;
  font-size: 12.5px;
  border-top: 1px solid #eef1f7;
  position: relative;
}

.approval-mini span::before{
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

@media(max-width: 1080px){
  .trust-system-container{
    width: min(1020px, calc(100% - 48px)) !important;
  }
  .trust-system-panel{
    grid-template-columns: 1fr;
  }
  .trust-card{
    min-height: auto;
  }
}

@media(max-width: 640px){
  .trust-system-container{
    width: calc(100% - 28px) !important;
  }
  .model-strip{
    border-radius: 18px;
  }
  .trust-system-intro h2{
    font-size: 34px !important;
  }
}


/* v36 — align trust/quality section to the same horizontal rail as the section above */
.trust-system-section{
  padding-top: 78px !important;
}

.trust-system-container{
  max-width: 1080px !important;
  width: min(1080px, calc(100% - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.trust-system-container .trust-head,
.trust-system-container .model-strip,
.trust-system-container .trust-card-grid{
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 640px){
  .trust-system-container{
    width: calc(100% - 28px) !important;
  }
}


/* v40 — pure HTML/CSS Interakt-style industry slider, no pasted screenshots */
.industry-slider-section{
  padding: 94px 0 112px;
  position: relative;
}

.industry-slider-container{
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
}

.industry-slider-head{
  max-width: 1080px;
  margin: 0 0 44px;
}

.industry-slider-head .section-eyebrow{
  margin-bottom: 18px;
}

.industry-slider-head h2{
  margin: 0;
  max-width: 860px;
  color: var(--ink);
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.065em;
  font-weight: 820;
}

.industry-slider-head > p:not(.section-eyebrow){
  margin: 22px 0 0;
  max-width: 780px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.62;
  letter-spacing: -0.028em;
}

.industry-carousel{
  --industry-gap: 18px;
  position: relative;
  padding: 0 52px;
}

.industry-window{
  overflow: hidden;
  border-radius: 22px;
}

.industry-track{
  display: flex;
  gap: var(--industry-gap);
  will-change: transform;
}

.industry-card{
  flex: 0 0 calc((100% - (var(--industry-gap) * 2)) / 3);
  min-height: 402px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.055);
  display: flex;
  flex-direction: column;
}

.bg-cream{ background: #fff4dc; }
.bg-mint{ background: #eaffea; }
.bg-blue{ background: #edf4ff; }
.bg-pink{ background: #fff0fa; }

.industry-art{
  height: 206px;
  position: relative;
  overflow: hidden;
}

.industry-copy{
  padding: 28px 30px 31px;
  flex: 1;
}

.industry-copy h3{
  margin: 0 0 18px;
  color: #050816;
  font-size: 31px;
  line-height: 1.06;
  letter-spacing: -0.055em;
  font-weight: 820;
}

.industry-copy p{
  margin: 0 0 22px;
  color: #050816;
  font-size: 20.5px;
  line-height: 1.48;
  letter-spacing: -0.034em;
}

.industry-copy a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #050816;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 5px;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.032em;
}

.industry-copy a span{
  font-size: 28px;
  line-height: .6;
}

.industry-nav{
  position: absolute;
  top: 51%;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #e5e9f2;
  background: rgba(255,255,255,.96);
  color: #0f152c;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px rgba(20,24,50,.11);
  cursor: pointer;
  transform: translateY(-50%);
}

.industry-nav svg{
  width: 18px;
  height: 18px;
}

.industry-prev{ left: 0; }
.industry-next{ right: 0; }

.industry-nav:disabled{
  opacity: .38;
  cursor: default;
  box-shadow: none;
}

/* shared mini-elements */
.wa-badge,
.ig-badge{
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: white;
  font-weight: 900;
}

.wa-badge{
  width: 50px;
  height: 50px;
  background: #21c55d;
  box-shadow: 0 16px 34px rgba(33,197,93,.22);
  font-size: 23px;
}

.ig-badge{
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #654cff, #ff3d87 58%, #ff9f1c);
  box-shadow: 0 14px 30px rgba(255,61,135,.22);
  font-size: 24px;
}

.dotted-arc{
  position: absolute;
  width: 220px;
  top: 10px;
  left: 45%;
}

/* card 1 */
.salon-art .ig-badge{ left: 43%; top: 22px; transform: rotate(-8deg); }
.salon-art .wa-badge{ right: 22%; top: 28px; }

.mini-social-card{
  position: absolute;
  left: 62px;
  top: 60px;
  width: 178px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 15px 32px rgba(15,23,42,.10);
}

.mini-social-head{
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 8px 10px;
  font-size: 8px;
}

.mini-social-head span{
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: #f7c84a;
}

.mini-social-head strong,
.mini-social-head small{
  display: block;
}

.mini-social-head small{
  color: #7b8291;
  font-size: 6px;
}

.salon-photo{
  height: 92px;
  background:
    radial-gradient(circle at 52% 34%, #efb78e 0 24px, transparent 25px),
    linear-gradient(135deg, #fbd3a3 0 43%, #cdeee5 43% 100%);
}

.mini-social-footer{
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}

.mini-social-footer b{
  color: #21c55d;
  font-size: 8px;
}

.chat-screen{
  position: absolute;
  right: 62px;
  top: 68px;
  width: 184px;
  background: #e8dfd1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(15,23,42,.13);
}

.chat-head{
  background: #075e54;
  color: white;
  font-size: 9px;
  font-weight: 800;
  padding: 9px 12px;
}

.chat-head span{
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #ffc83d;
  border-radius: 999px;
  vertical-align: -2px;
}

.chat-screen p{
  width: fit-content;
  max-width: 132px;
  margin: 8px 10px;
  padding: 7px 9px;
  border-radius: 5px;
  background: white;
  color: #111827;
  font-size: 8px;
  line-height: 1.25;
}

.chat-screen .msg-right{
  margin-left: auto;
  background: #dcf8c6;
}

.chat-link{
  width: 78px;
  margin: 8px 10px 10px auto;
  text-align: center;
  background: white;
  color: #0ea5e9;
  font-size: 8px;
  padding: 5px;
}

/* card 2 */
.ecommerce-art .wa-badge{ left: 67%; top: 34px; }
.green-note{
  position: absolute;
  top: 28px;
  right: 70px;
  width: 300px;
  background: #dcf8c6;
  color: #111827;
  font-size: 18px;
  line-height: 1.16;
  padding: 15px 18px;
}

.invoice-doc{
  position: absolute;
  right: 76px;
  top: 96px;
  width: 302px;
  background: rgba(255,255,255,.84);
}

.invoice-doc h4{
  margin: 18px 22px 10px;
  color: #9bbcf9;
  font-size: 32px;
  letter-spacing: .02em;
}

.doc-lines{
  margin: 0 22px 10px;
  display: grid;
  gap: 7px;
}

.doc-lines i{
  display: block;
  height: 7px;
  background: #d9e2f5;
}

.pdf-row{
  background: #edf1f7;
  padding: 12px 18px;
  color: #374151;
  font-size: 18px;
}

.pdf-row span{
  display: inline-block;
  margin-right: 10px;
  background: #ef4444;
  color: white;
  border-radius: 2px;
  padding: 5px 4px;
  font-size: 10px;
}

.invoice-doc small{
  display: block;
  padding: 8px 18px 14px;
  color: #8a94a7;
  font-size: 13px;
}

/* card 3 */
.restaurant-art .wa-badge{ left: 23%; top: 32px; }
.phone-chat{
  position: absolute;
  top: 16px;
  right: 76px;
  width: 216px;
  height: 196px;
  overflow: hidden;
  background: #e8dfd1;
}

.phone-head{
  background: #075e54;
  color: white;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 12px;
}

.phone-chat p{
  width: fit-content;
  max-width: 150px;
  margin: 9px 12px;
  padding: 8px 10px;
  background: white;
  border-radius: 3px;
  font-size: 10px;
  line-height: 1.16;
}

.phone-chat .msg-right{
  margin-left: auto;
  background: #dcf8c6;
}

.payment-row{
  position: absolute;
  bottom: 10px;
  left: 14px;
  right: 14px;
  background: white;
  color: #0ea5e9;
  text-align: center;
  padding: 7px;
  font-size: 11px;
}

/* health */
.clinic-browser{
  position: absolute;
  left: 58px;
  top: 26px;
  width: 270px;
  height: 150px;
  background: white;
  box-shadow: 0 18px 36px rgba(15,23,42,.10);
  overflow: hidden;
}

.clinic-top{
  height: 18px;
  background: #0e3675;
}

.clinic-hero{
  height: 132px;
  background: linear-gradient(90deg, #0b4aa1 0 54%, #e3f8ff 54%);
  color: white;
  position: relative;
  padding: 26px;
}

.doctor-shape{
  position: absolute;
  left: 52px;
  bottom: 0;
  width: 90px;
  height: 122px;
  border-radius: 60px 60px 0 0;
  background: linear-gradient(180deg, #ffd9bf 0 40%, #4bc9e0 41% 100%);
}

.clinic-hero h4{
  margin: 0 0 0 126px;
  max-width: 120px;
  font-size: 20px;
  line-height: 1.1;
}

.clinic-chat{
  position: absolute;
  right: 58px;
  bottom: 18px;
  width: 150px;
  padding: 14px;
  background: white;
  border-radius: 13px;
  box-shadow: 0 18px 36px rgba(15,23,42,.16);
  text-align: center;
  font-size: 10px;
}

.clinic-chat strong,
.clinic-chat span{
  display: block;
}

.clinic-chat button{
  margin-top: 10px;
  border: 0;
  background: #10b981;
  color: white;
  border-radius: 999px;
  font-weight: 800;
  padding: 7px 14px;
  font-size: 9px;
}

/* retail */
.cart-message{
  position: absolute;
  top: 34px;
  left: 54px;
  width: 240px;
  background: white;
  padding: 16px 18px;
  box-shadow: 0 16px 32px rgba(15,23,42,.12);
  font-size: 17px;
  line-height: 1.15;
}

.product-message{
  position: absolute;
  top: 88px;
  right: 48px;
  width: 240px;
  background: white;
  padding: 13px;
  display: flex;
  gap: 13px;
  align-items: center;
  box-shadow: 0 16px 32px rgba(15,23,42,.10);
}

.product-thumb{
  width: 56px;
  height: 46px;
  border-radius: 4px;
  background: linear-gradient(135deg, #b7791f, #f8deb0);
}

.product-message strong,
.product-message small{
  display: block;
}

.product-message small{
  color: #6b7280;
  font-size: 11px;
}

.buy-link{
  position: absolute;
  right: 82px;
  bottom: 28px;
  width: 220px;
  background: white;
  color: #0ea5e9;
  text-align: center;
  padding: 10px;
}

/* agency */
.personalized-message{
  position: absolute;
  top: 35px;
  left: 108px;
  width: 270px;
  background: white;
  padding: 16px 18px;
  box-shadow: 0 16px 32px rgba(15,23,42,.10);
}

.personalized-message p{
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.25;
}

.personalized-message div{
  color: #0ea5e9;
  text-align: center;
  border-top: 1px solid #edf2f7;
  padding-top: 9px;
}

.metric-card{
  position: absolute;
  right: 70px;
  bottom: 35px;
  width: 250px;
  background: #9cde82;
  color: #111827;
  padding: 16px 20px;
  border-radius: 10px;
}

.metric-card b{
  font-size: 30px;
}

.metric-card span{
  display: inline;
  font-size: 15px;
}

/* auto */
.service-note{
  position: absolute;
  top: 28px;
  left: 64px;
  width: 250px;
  background: white;
  padding: 18px;
  font-size: 17px;
  line-height: 1.2;
}

.service-note p{
  margin: 0 0 12px;
}

.service-note div{
  display: flex;
  gap: 3px;
}

.service-note span{
  flex: 1;
  color: #0ea5e9;
  border-top: 1px solid #edf2f7;
  padding-top: 8px;
  font-size: 14px;
}

.service-pill{
  position: absolute;
  right: 120px;
  bottom: 26px;
  background: #dcf8c6;
  padding: 14px 28px;
  border-radius: 5px;
  font-size: 17px;
}

/* property */
.property-question{
  position: absolute;
  top: 28px;
  right: 90px;
  width: 260px;
  background: #dcf8c6;
  padding: 14px 16px;
  font-size: 16px;
}

.property-photo{
  position: absolute;
  left: 155px;
  top: 75px;
  width: 210px;
  height: 108px;
  border-radius: 4px;
  background: linear-gradient(135deg, #60a5fa, #e0f2fe 45%, #b45309 46%, #eab308);
}

.key-chip{
  position: absolute;
  left: 125px;
  top: 82px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: #22c55e;
}

/* freelancer */
.design-icon{
  position: absolute;
  left: 90px;
  top: 42px;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffe0a3;
  color: #c08a22;
  font-size: 34px;
}

.consultant-chat{
  position: absolute;
  top: 58px;
  right: 70px;
  width: 270px;
}

.consultant-chat p{
  margin: 0 0 8px;
  padding: 13px 16px;
  background: white;
  font-size: 15px;
}

.consultant-chat .msg-right{
  background: #dcf8c6;
}

.consultant-chat div{
  color: #0ea5e9;
  background: white;
  text-align: center;
  padding: 10px;
}

/* finance */
.money-mark{
  position: absolute;
  left: 96px;
  top: 50px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffe6ad;
  color: #b98122;
  font-size: 74px;
  font-weight: 900;
}

.finance-buttons{
  position: absolute;
  right: 62px;
  top: 42px;
  display: grid;
  gap: 14px;
}

.finance-buttons span{
  display: block;
  width: 230px;
  border-radius: 999px;
  border: 1px solid #d6a73d;
  background: #ffe6ad;
  color: #a36e16;
  padding: 14px 22px;
  font-size: 20px;
  font-weight: 800;
}

/* travel */
.travel-photo{
  position: absolute;
  left: 126px;
  top: 28px;
  width: 280px;
  height: 112px;
  border-radius: 4px;
  background: linear-gradient(135deg, #38bdf8, #bfdbfe 45%, #facc15 46%, #fef3c7);
}

.travel-strip{
  position: absolute;
  left: 126px;
  top: 140px;
  width: 280px;
  background: #dcf8c6;
  color: #6aa15c;
  text-align: center;
  padding: 9px;
  font-weight: 800;
}

.travel-button{
  position: absolute;
  left: 126px;
  top: 181px;
  width: 280px;
  background: #dcf8c6;
  color: #6aa15c;
  text-align: center;
  padding: 9px;
  font-weight: 800;
}

/* beauty */
.catalog-panel{
  position: absolute;
  top: 28px;
  right: 76px;
  width: 240px;
  background: white;
  border: 1px solid #9fb5dc;
}

.catalog-panel h4{
  margin: 0;
  padding: 14px;
  text-align: center;
  font-size: 20px;
  border-bottom: 1px solid #9fb5dc;
}

.catalog-panel p{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  font-size: 16px;
  border-bottom: 1px solid #eef2f7;
}

.catalog-panel p span{
  width: 18px;
  height: 28px;
  background: linear-gradient(#111827, #f97316);
}

.catalog-panel p b{
  margin-left: auto;
  color: #8db0e8;
}

.beauty-art .wa-badge{
  left: 96px;
  top: 30px;
}

@media (max-width: 1120px){
  .industry-card{
    flex-basis: calc((100% - var(--industry-gap)) / 2);
  }
}

@media (max-width: 720px){
  .industry-slider-section{
    padding: 76px 0 92px;
  }

  .industry-slider-container{
    width: calc(100% - 28px);
  }

  .industry-carousel{
    padding: 0 38px;
  }

  .industry-card{
    flex-basis: 100%;
  }

  .industry-copy h3{
    font-size: 28px;
  }

  .industry-copy p{
    font-size: 18px;
  }

  .industry-nav{
    width: 40px;
    height: 40px;
  }
}


/* v41 — keep industry slider on the same page rail + reduce zoom */
.industry-slider-section{
  padding: 78px 0 98px !important;
}

.industry-slider-container{
  width: min(1080px, calc(100% - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.industry-slider-head{
  max-width: 760px !important;
  margin-bottom: 34px !important;
}

.industry-slider-head .section-eyebrow{
  margin-bottom: 14px !important;
  font-size: 14px !important;
}

.industry-slider-head h2{
  max-width: 720px !important;
  font-size: clamp(30px, 3.2vw, 42px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.055em !important;
}

.industry-slider-head > p:not(.section-eyebrow){
  max-width: 680px !important;
  margin-top: 16px !important;
  font-size: 17px !important;
  line-height: 1.58 !important;
  letter-spacing: -0.024em !important;
}

.industry-carousel{
  --industry-gap: 14px !important;
  padding: 0 40px !important;
}

.industry-card{
  flex-basis: calc((100% - (var(--industry-gap) * 2)) / 3) !important;
  min-height: 326px !important;
  border-radius: 18px !important;
}

.industry-art{
  height: 148px !important;
}

.industry-copy{
  padding: 20px 22px 22px !important;
}

.industry-copy h3{
  margin-bottom: 12px !important;
  font-size: 23px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.047em !important;
  font-weight: 800 !important;
}

.industry-copy p{
  margin-bottom: 16px !important;
  font-size: 15.5px !important;
  line-height: 1.42 !important;
  letter-spacing: -0.026em !important;
}

.industry-copy a{
  font-size: 15.5px !important;
  padding-bottom: 4px !important;
  border-bottom-width: 1.5px !important;
}

.industry-copy a span{
  font-size: 21px !important;
}

.industry-nav{
  width: 38px !important;
  height: 38px !important;
  top: 58% !important;
}

/* Scale down card graphics so they fit the narrower common rail */
.wa-badge{
  width: 34px !important;
  height: 34px !important;
  font-size: 16px !important;
}

.ig-badge{
  width: 34px !important;
  height: 34px !important;
  font-size: 17px !important;
}

.dotted-arc{
  width: 150px !important;
  top: 8px !important;
  left: 40% !important;
}

/* card 1 */
.salon-art .ig-badge{ left: 44% !important; top: 16px !important; }
.salon-art .wa-badge{ right: 20% !important; top: 20px !important; }

.mini-social-card{
  left: 26px !important;
  top: 52px !important;
  width: 118px !important;
  border-radius: 6px !important;
}

.mini-social-head{
  padding: 5px 6px !important;
  font-size: 5.5px !important;
  gap: 4px !important;
}

.mini-social-head span{
  width: 12px !important;
  height: 12px !important;
}

.mini-social-head small{
  font-size: 4.5px !important;
}

.salon-photo{
  height: 58px !important;
}

.mini-social-footer{
  padding: 5px 6px !important;
  font-size: 6.5px !important;
}

.mini-social-footer b{
  font-size: 5.5px !important;
}

.chat-screen{
  right: 28px !important;
  top: 58px !important;
  width: 126px !important;
  border-radius: 6px !important;
}

.chat-head{
  padding: 6px 8px !important;
  font-size: 6px !important;
}

.chat-head span{
  width: 8px !important;
  height: 8px !important;
}

.chat-screen p{
  max-width: 86px !important;
  margin: 5px 7px !important;
  padding: 5px 6px !important;
  font-size: 5.8px !important;
}

.chat-link{
  width: 55px !important;
  margin: 5px 7px 7px auto !important;
  padding: 4px !important;
  font-size: 5.8px !important;
}

/* e-commerce */
.ecommerce-art .wa-badge{ left: auto !important; right: 58px !important; top: 26px !important; }

.green-note{
  top: 24px !important;
  right: 40px !important;
  width: 192px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
}

.invoice-doc{
  top: 76px !important;
  right: 44px !important;
  width: 198px !important;
}

.invoice-doc h4{
  margin: 12px 15px 8px !important;
  font-size: 24px !important;
}

.doc-lines{
  margin: 0 15px 8px !important;
  gap: 5px !important;
}

.doc-lines i{
  height: 5px !important;
}

.pdf-row{
  padding: 8px 12px !important;
  font-size: 13px !important;
}

.pdf-row span{
  font-size: 7px !important;
  padding: 3px !important;
  margin-right: 7px !important;
}

.invoice-doc small{
  padding: 6px 12px 9px !important;
  font-size: 9px !important;
}

/* restaurant */
.restaurant-art .wa-badge{ left: 18% !important; top: 26px !important; }

.phone-chat{
  top: 16px !important;
  right: 40px !important;
  width: 150px !important;
  height: 140px !important;
}

.phone-head{
  padding: 8px 10px !important;
  font-size: 8px !important;
}

.phone-chat p{
  max-width: 104px !important;
  margin: 6px 8px !important;
  padding: 6px 7px !important;
  font-size: 7px !important;
}

.payment-row{
  left: 10px !important;
  right: 10px !important;
  bottom: 8px !important;
  padding: 5px !important;
  font-size: 7.5px !important;
}

/* health */
.clinic-browser{
  left: 32px !important;
  top: 22px !important;
  width: 182px !important;
  height: 112px !important;
}

.clinic-top{
  height: 14px !important;
}

.clinic-hero{
  height: 98px !important;
  padding: 18px !important;
}

.doctor-shape{
  left: 34px !important;
  width: 62px !important;
  height: 90px !important;
}

.clinic-hero h4{
  margin-left: 84px !important;
  font-size: 14px !important;
  max-width: 80px !important;
}

.clinic-chat{
  right: 30px !important;
  bottom: 16px !important;
  width: 112px !important;
  padding: 10px !important;
  font-size: 7.5px !important;
}

.clinic-chat button{
  margin-top: 7px !important;
  padding: 5px 10px !important;
  font-size: 6.5px !important;
}

/* retail */
.cart-message{
  left: 30px !important;
  top: 26px !important;
  width: 170px !important;
  padding: 11px 12px !important;
  font-size: 11px !important;
}

.product-message{
  right: 28px !important;
  top: 74px !important;
  width: 172px !important;
  padding: 9px !important;
  gap: 9px !important;
}

.product-thumb{
  width: 38px !important;
  height: 32px !important;
}

.product-message strong,
.product-message small{
  font-size: 8px !important;
}

.buy-link{
  right: 42px !important;
  bottom: 22px !important;
  width: 154px !important;
  padding: 7px !important;
  font-size: 9px !important;
}

/* agency */
.personalized-message{
  left: 42px !important;
  top: 26px !important;
  width: 190px !important;
  padding: 11px 12px !important;
}

.personalized-message p{
  font-size: 10px !important;
  line-height: 1.2 !important;
}

.personalized-message div{
  padding-top: 7px !important;
  font-size: 10px !important;
}

.metric-card{
  right: 34px !important;
  bottom: 26px !important;
  width: 170px !important;
  padding: 11px 13px !important;
}

.metric-card b{
  font-size: 22px !important;
}

.metric-card span{
  font-size: 10px !important;
}

/* auto */
.service-note{
  left: 36px !important;
  top: 24px !important;
  width: 178px !important;
  padding: 12px !important;
  font-size: 11px !important;
}

.service-note p{
  margin-bottom: 8px !important;
}

.service-note span{
  font-size: 8px !important;
  padding-top: 6px !important;
}

.service-pill{
  right: 54px !important;
  bottom: 22px !important;
  padding: 10px 18px !important;
  font-size: 11px !important;
}

/* property */
.property-question{
  top: 24px !important;
  right: 38px !important;
  width: 190px !important;
  padding: 10px 12px !important;
  font-size: 10.5px !important;
}

.property-photo{
  left: 70px !important;
  top: 72px !important;
  width: 150px !important;
  height: 78px !important;
}

.key-chip{
  left: 52px !important;
  top: 78px !important;
  width: 40px !important;
  height: 40px !important;
}

/* freelancer */
.design-icon{
  left: 54px !important;
  top: 32px !important;
  width: 52px !important;
  height: 52px !important;
  font-size: 24px !important;
}

.consultant-chat{
  right: 34px !important;
  top: 48px !important;
  width: 190px !important;
}

.consultant-chat p{
  padding: 9px 11px !important;
  font-size: 10px !important;
}

.consultant-chat div{
  padding: 7px !important;
  font-size: 10px !important;
}

/* finance */
.money-mark{
  left: 48px !important;
  top: 40px !important;
  width: 84px !important;
  height: 84px !important;
  font-size: 52px !important;
}

.finance-buttons{
  right: 36px !important;
  top: 32px !important;
  gap: 9px !important;
}

.finance-buttons span{
  width: 162px !important;
  padding: 10px 15px !important;
  font-size: 13px !important;
}

/* travel */
.travel-photo{
  left: 52px !important;
  top: 26px !important;
  width: 190px !important;
  height: 76px !important;
}

.travel-strip,
.travel-button{
  left: 52px !important;
  width: 190px !important;
  padding: 7px !important;
  font-size: 10px !important;
}

.travel-strip{ top: 102px !important; }
.travel-button{ top: 134px !important; }

/* beauty */
.catalog-panel{
  top: 22px !important;
  right: 44px !important;
  width: 176px !important;
}

.catalog-panel h4{
  padding: 10px !important;
  font-size: 14px !important;
}

.catalog-panel p{
  padding: 7px 10px !important;
  font-size: 10px !important;
}

.catalog-panel p span{
  width: 12px !important;
  height: 20px !important;
}

.beauty-art .wa-badge{
  left: 52px !important;
  top: 24px !important;
}

@media (max-width: 1120px){
  .industry-card{
    flex-basis: calc((100% - var(--industry-gap)) / 2) !important;
  }
}

@media (max-width: 720px){
  .industry-slider-container{
    width: calc(100% - 28px) !important;
  }

  .industry-carousel{
    padding: 0 34px !important;
  }

  .industry-card{
    flex-basis: 100% !important;
  }
}


/* v42 — fix industry slider grid lines and align outer rail with adjacent sections */
.industry-slider-section{
  /* hide internal center grid lines only for this section */
  background:
    linear-gradient(#fff, #fff) center / min(1080px, calc(100% - 48px)) 100% no-repeat !important;
}

/* keep content exactly on the same visual rail as the quality/cards section */
.industry-slider-container{
  width: min(1080px, calc(100% - 48px)) !important;
}

/* arrows should sit inside the same rail, not push visual bounds outward */
.industry-carousel{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.industry-window{
  width: 100% !important;
}

/* three cards inside the same rail */
.industry-card{
  flex-basis: calc((100% - (var(--industry-gap) * 2)) / 3) !important;
}

/* place arrows over the card edges, not outside the section rails */
.industry-prev{
  left: 12px !important;
}

.industry-next{
  right: 12px !important;
}

@media (max-width: 1120px){
  .industry-card{
    flex-basis: calc((100% - var(--industry-gap)) / 2) !important;
  }
}

@media (max-width: 720px){
  .industry-slider-section{
    background:
      linear-gradient(#fff, #fff) center / calc(100% - 28px) 100% no-repeat !important;
  }

  .industry-card{
    flex-basis: 100% !important;
  }

  .industry-prev{
    left: 8px !important;
  }

  .industry-next{
    right: 8px !important;
  }
}


/* v43 — remove only the site-wide vertical rail/grid lines */
.page-grid,
.hero.page-grid,
.playbook-strip.page-grid,
.industry-slider-section{
  background-image: none !important;
  background: transparent !important;
}

/* keep section/card borders intact; this only removes the decorative vertical page rails */


/* v44 — remove ALL decorative vertical page rails everywhere.
   Keeps normal horizontal dividers and card/table borders untouched. */
.page-grid,
.page-grid.page-grid,
.hero.page-grid,
.playbook-strip.page-grid,
.quality-model-section.page-grid,
.theorem-gov-section.page-grid,
.governance-section.page-grid,
.integrations-section.page-grid,
.comparison-section.page-grid,
.cta-section.page-grid,
.final-cta.page-grid,
.industry-slider-section,
.industry-slider-section.page-grid{
  background: none !important;
  background-image: none !important;
}

/* remove rail pseudo-elements used by final/cta sections */
.page-grid::before,
.page-grid::after,
.hero.page-grid::before,
.hero.page-grid::after,
.playbook-strip.page-grid::before,
.playbook-strip.page-grid::after,
.quality-model-section.page-grid::before,
.quality-model-section.page-grid::after,
.theorem-gov-section.page-grid::before,
.theorem-gov-section.page-grid::after,
.governance-section.page-grid::before,
.governance-section.page-grid::after,
.integrations-section.page-grid::before,
.integrations-section.page-grid::after,
.comparison-section.page-grid::before,
.comparison-section.page-grid::after,
.cta-section.page-grid::before,
.cta-section.page-grid::after,
.final-cta.page-grid::before,
.final-cta.page-grid::after,
.industry-slider-section.page-grid::before,
.industry-slider-section.page-grid::after{
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}


/* v45 — remove remaining decorative lines/boxes only */
:root{
  --grid-line: transparent !important;
}

/* remove nav vertical separators and header cell-like boxes */
.site-header,
.nav-shell,
.nav,
.nav a,
.logo,
.header-actions,
.header-cta{
  border-left: 0 !important;
  border-right: 0 !important;
  background-image: none !important;
  box-shadow: none;
}

/* keep only the bottom header divider */
.site-header,
.nav-shell{
  border-top: 0 !important;
}

/* remove random decorative hero squares/boxes */
.hero-orb,
.hero-square,
.hero-squares,
.hero .float-square,
.hero .hero-square,
.hero [class*="square"],
.hero [class*="orb"]{
  display: none !important;
}

/* remove horizontal section separator lines */
section,
.page-grid,
.hero,
.playbook-strip,
.quality-model-section,
.industry-slider-section,
.theorem-gov-section,
.governance-section,
.comparison-section,
.integrations-section,
.cta-section,
.final-cta,
.footer{
  border-top: 0 !important;
  border-bottom: 0 !important;
  background-image: none !important;
}

/* remove separator pseudo-elements that draw horizontal or vertical rules */
section::before,
section::after,
.page-grid::before,
.page-grid::after,
.hero::before,
.hero::after,
.playbook-strip::before,
.playbook-strip::after,
.quality-model-section::before,
.quality-model-section::after,
.industry-slider-section::before,
.industry-slider-section::after,
.theorem-gov-section::before,
.theorem-gov-section::after,
.governance-section::before,
.governance-section::after,
.comparison-section::before,
.comparison-section::after,
.integrations-section::before,
.integrations-section::after,
.cta-section::before,
.cta-section::after,
.final-cta::before,
.final-cta::after{
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
}

/* preserve actual component borders: cards, tables, buttons, inputs */
.card,
.playbook-card,
.governance-card,
.quality-card,
.industry-card,
.compare-table,
.compare-table *,
.workflow-card,
.timeline-card,
button,
.btn,
.header-cta,
input,
textarea{
  border-color: revert-layer;
}


/* v46 — restore footer divider, soften slider borders, tighten section rhythm, remove section eyebrow labels */

/* Keep footer divider visible */
.footer{
  border-top: 1px solid var(--line2) !important;
}

/* Remove black-looking borders from industry slider cards */
.industry-card{
  border: 1px solid #d9e1ec !important;
  box-shadow: none !important;
}

/* Remove section eyebrow/blue mini-headings across sections (keep hero untouched) */
.playbook-strip .eyebrow,
.quality-model-section .eyebrow,
.industry-slider-head .section-eyebrow,
.theorem-gov-section .eyebrow,
.governance-section .eyebrow,
.comparison-section .eyebrow,
.integrations-section .eyebrow,
.cta-section .eyebrow,
.final-cta .eyebrow,
#playbooks .eyebrow,
#quality .eyebrow,
#governance .eyebrow,
#comparison .eyebrow,
#why-us .eyebrow,
#contact .eyebrow,
[class*="section-eyebrow"]{
  display: none !important;
}

/* Tighten whitespace between sections after divider removal */
.playbook-strip,
.quality-model-section,
.industry-slider-section,
.theorem-gov-section,
.governance-section,
.comparison-section,
.integrations-section,
.cta-section,
.final-cta{
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

/* Preserve comfortable hero and footer spacing */
.hero{
  padding-bottom: 96px !important;
}

/* Slightly tighten intro blocks now that eyebrow labels are hidden */
.playbook-intro,
.qm-intro,
.industry-slider-head,
.theorem-outcomes-head,
.governance-head,
.comparison-head,
.contact-intro,
.cta-copy{
  margin-bottom: 28px !important;
}

.playbook-intro > p:not(.eyebrow),
.qm-intro > p:not(.eyebrow),
.industry-slider-head > p:not(.section-eyebrow),
.theorem-outcomes-head > p:not(.eyebrow),
.governance-head > p:not(.eyebrow),
.comparison-head > p:not(.eyebrow),
.contact-intro > p:not(.eyebrow),
.cta-copy > p:not(.eyebrow){
  margin-top: 18px !important;
}


/* v47 — tighter hero-to-section spacing, cleaner slider cards, smaller slider heading, autoplay carousel */

/* reduce the huge empty area after hero CTA */
.hero{
  min-height: auto !important;
  padding-bottom: 0 !important;
}

.hero-inner{
  padding-bottom: 72px !important;
}

/* keep section rhythm tighter after removing section divider lines */
.playbook-strip,
.quality-model-section,
.industry-slider-section,
.theorem-gov-section,
.governance-section,
.comparison-section,
.integrations-section,
.cta-section{
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

/* slider heading should match the rest of the site more closely */
.industry-slider-head h2{
  font-size: clamp(30px, 3vw, 40px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.055em !important;
  max-width: 720px !important;
}

.industry-slider-head > p:not(.section-eyebrow){
  font-size: 16px !important;
  line-height: 1.55 !important;
  max-width: 650px !important;
}

/* remove visible card outlines from this Interakt-style slider */
.industry-card{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* remove previous/next buttons; slider now auto-scrolls */
.industry-nav{
  display: none !important;
}

/* keep footer divider only */
.footer{
  border-top: 1px solid var(--line2) !important;
}

/* remove section borders without touching card internals elsewhere */
section,
.page-grid,
.hero,
.playbook-strip,
.quality-model-section,
.industry-slider-section,
.theorem-gov-section,
.governance-section,
.comparison-section,
.integrations-section,
.cta-section,
.final-cta{
  border-top: 0 !important;
  border-bottom: 0 !important;
}


/* v48 — match Industry Playbooks heading size with Quality section heading */
.industry-slider-head h2{
  font-size: clamp(28px, 2.65vw, 36px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.055em !important;
  max-width: 720px !important;
  font-weight: 820 !important;
}

.industry-slider-head > p:not(.section-eyebrow){
  font-size: 16px !important;
  line-height: 1.55 !important;
  max-width: 650px !important;
}


/* v49 — Interakt-style split cards, no Learn More links, no repeated adjacent colour */
.industry-copy a{
  display: none !important;
}

/* Each industry card now has a subtle lighter media half, like the reference */
.industry-card{
  border: 0 !important;
  outline: 0 !important;
  overflow: hidden !important;
}

.industry-card.bg-cream{
  background: linear-gradient(to bottom, #fff9ec 0 47%, #fff4dc 47% 100%) !important;
}

.industry-card.bg-mint{
  background: linear-gradient(to bottom, #f4fff3 0 47%, #eaffea 47% 100%) !important;
}

.industry-card.bg-blue{
  background: linear-gradient(to bottom, #f7fbff 0 47%, #edf4ff 47% 100%) !important;
}

.industry-card.bg-pink{
  background: linear-gradient(to bottom, #fff8fd 0 47%, #fff0fa 47% 100%) !important;
}

.industry-art{
  background: transparent !important;
}

.industry-copy{
  background: transparent !important;
  padding-top: 22px !important;
}

.industry-copy h3{
  margin-bottom: 18px !important;
}

.industry-copy p{
  margin-bottom: 0 !important;
}


/* v50 — fix slider text weight + stop top graphics from cutting */
.industry-card{
  min-height: 340px !important;
}

.industry-art{
  height: 162px !important;
  overflow: hidden !important;
}

.industry-copy{
  padding: 22px 24px 24px !important;
}

.industry-copy h3{
  font-size: 21px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.045em !important;
  font-weight: 760 !important;
  margin-bottom: 14px !important;
}

.industry-copy p{
  font-size: 15px !important;
  line-height: 1.48 !important;
  letter-spacing: -0.022em !important;
  font-weight: 420 !important;
}

/* finance card: keep all three pills inside the visual area */
.money-mark{
  top: 34px !important;
  width: 76px !important;
  height: 76px !important;
  font-size: 46px !important;
}

.finance-buttons{
  top: 26px !important;
  gap: 8px !important;
}

.finance-buttons span{
  width: 154px !important;
  padding: 9px 14px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}

/* travel card: keep bottom CTA strip inside the visual area */
.travel-photo{
  top: 22px !important;
  height: 72px !important;
}

.travel-strip{
  top: 94px !important;
  padding: 6px !important;
  font-size: 9px !important;
}

.travel-button{
  top: 123px !important;
  padding: 6px !important;
  font-size: 9px !important;
}

/* freelancer card: prevent text from feeling heavy */
.consultant-chat p,
.consultant-chat div{
  font-weight: 420 !important;
}

/* slider card headings across all cards should feel closer to Interakt, less heavy */
.industry-copy h3 strong,
.industry-copy strong{
  font-weight: 760 !important;
}


/* v51 — soften Industry Playbooks heading and card text weights */
.industry-slider-head h2{
  font-weight: 690 !important;
  font-size: clamp(28px, 2.55vw, 34px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.05em !important;
}

.industry-slider-head > p:not(.section-eyebrow){
  font-weight: 400 !important;
  font-size: 15.5px !important;
  line-height: 1.58 !important;
}

.industry-copy h3{
  font-weight: 660 !important;
  font-size: 20px !important;
  line-height: 1.16 !important;
  letter-spacing: -0.04em !important;
}

.industry-copy p{
  font-weight: 400 !important;
  font-size: 14.75px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.018em !important;
}

/* soften text inside the card graphics too */
.finance-buttons span,
.travel-strip,
.travel-button,
.green-note,
.cart-message,
.product-message strong,
.product-message small,
.consultant-chat p,
.consultant-chat div,
.catalog-panel h4,
.catalog-panel p,
.phone-chat p,
.payment-row,
.chat-screen p,
.chat-link,
.mini-social-footer,
.mini-social-head,
.service-note,
.service-note span,
.service-pill,
.personalized-message p,
.personalized-message div,
.metric-card,
.property-question{
  font-weight: 500 !important;
}

.money-mark,
.metric-card b{
  font-weight: 650 !important;
}


/* v53 — subtle section differentiation without divider lines */
.playbook-strip,
.industry-slider-section,
.governance-section,
.integrations-section{
  background: #f8fbff !important;
}

.quality-model-section,
.theorem-gov-section,
.comparison-section,
.cta-section{
  background: #ffffff !important;
}

/* keep the transition soft and intentional */
.playbook-strip,
.quality-model-section,
.industry-slider-section,
.theorem-gov-section,
.governance-section,
.comparison-section,
.integrations-section,
.cta-section{
  border-top: 0 !important;
  border-bottom: 0 !important;
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

/* remove any section pseudo separators while preserving actual card borders */
.playbook-strip::before,
.playbook-strip::after,
.quality-model-section::before,
.quality-model-section::after,
.industry-slider-section::before,
.industry-slider-section::after,
.theorem-gov-section::before,
.theorem-gov-section::after,
.governance-section::before,
.governance-section::after,
.comparison-section::before,
.comparison-section::after,
.integrations-section::before,
.integrations-section::after,
.cta-section::before,
.cta-section::after{
  display: none !important;
  content: none !important;
}

/* hero should remain clean white */
.hero{
  background: #ffffff !important;
  padding-bottom: 56px !important;
}

/* reduce the visual jump after hero */
.playbook-strip{
  padding-top: 68px !important;
}

/* keep footer divider visible */
.footer{
  border-top: 1px solid var(--line2) !important;
}


/* v54 — stronger visible section differentiation */
.playbook-strip,
.industry-slider-section,
.governance-section,
.integrations-section{
  background: #f2f7ff !important;
}

.quality-model-section,
.theorem-gov-section,
.comparison-section,
.cta-section{
  background: #ffffff !important;
}

/* rounded inner surface so the section change is visible without divider lines */
.playbook-strip > .container,
.quality-model-section > .container,
.industry-slider-section > .industry-slider-container,
.theorem-gov-section > .container,
.governance-section > .container,
.comparison-section > .container,
.integrations-section > .container,
.cta-section > .container{
  position: relative !important;
  z-index: 1 !important;
}

/* visible but soft separation from previous/next sections */
.playbook-strip,
.quality-model-section,
.industry-slider-section,
.theorem-gov-section,
.governance-section,
.comparison-section,
.integrations-section,
.cta-section{
  padding-top: 74px !important;
  padding-bottom: 74px !important;
  border: 0 !important;
}

/* remove any full-width line leftovers */
.playbook-strip::before,
.playbook-strip::after,
.quality-model-section::before,
.quality-model-section::after,
.industry-slider-section::before,
.industry-slider-section::after,
.theorem-gov-section::before,
.theorem-gov-section::after,
.governance-section::before,
.governance-section::after,
.comparison-section::before,
.comparison-section::after,
.integrations-section::before,
.integrations-section::after,
.cta-section::before,
.cta-section::after{
  display: none !important;
  content: none !important;
}

/* keep footer divider */
.footer{
  border-top: 1px solid var(--line2) !important;
}


/* v55 — focused blue words in section titles */
.target-small-heading .highlight,
.industry-slider-head h2 .highlight,
.theorem-gov-head h2 span,
.final-cta h2 .highlight{
  color: var(--brand) !important;
  display: inline !important;
  font: inherit !important;
  font-weight: inherit !important;
}

/* make section background change actually visible */
.hero{
  background: #ffffff !important;
}

.playbook-strip{
  background: #f5f9ff !important;
}

.quality-model-section{
  background: #ffffff !important;
}

.industry-slider-section{
  background: #f5f9ff !important;
}

.theorem-gov-section{
  background: #ffffff !important;
}

.final-cta{
  background: #f5f9ff !important;
}


/* v56 — visible section separation without divider lines */

/* Reset previous background attempts that may be hidden by inner wrappers */
.playbook-strip,
.quality-model-section,
.industry-slider-section,
.theorem-gov-section,
.governance-section,
.comparison-section,
.integrations-section,
.cta-section,
.final-cta{
  position: relative !important;
  isolation: isolate !important;
  background: #ffffff !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Real visible soft panel behind each alternating section */
.playbook-strip::before,
.industry-slider-section::before,
.governance-section::before,
.final-cta::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 24px 0 !important;
  z-index: -1 !important;
  background: #f3f7ff !important;
  border-radius: 0 !important;
  pointer-events: none !important;
}

/* Keep these sections plain white */
.quality-model-section::before,
.theorem-gov-section::before,
.comparison-section::before,
.integrations-section::before,
.cta-section::before{
  display: none !important;
  content: none !important;
}

/* Remove old decorative lines, but do NOT remove our new soft panels */
.playbook-strip::after,
.quality-model-section::after,
.industry-slider-section::after,
.theorem-gov-section::after,
.governance-section::after,
.comparison-section::after,
.integrations-section::after,
.cta-section::after,
.final-cta::after{
  display: none !important;
  content: none !important;
}

/* Better section rhythm after line removal */
.playbook-strip,
.quality-model-section,
.industry-slider-section,
.theorem-gov-section,
.governance-section,
.comparison-section,
.integrations-section,
.cta-section,
.final-cta{
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

/* Make the focused title words work everywhere, not only hero */
.highlight,
.target-small-heading .highlight,
.industry-slider-head h2 .highlight,
.theorem-gov-head h2 span,
.governance-head h2 span,
.final-cta h2 .highlight{
  color: var(--brand) !important;
  display: inline !important;
  font: inherit !important;
  font-weight: inherit !important;
}

/* Keep footer divider visible */
.footer{
  border-top: 1px solid var(--line2) !important;
}

/* Ensure content stays above section panel */
.playbook-strip > *,
.quality-model-section > *,
.industry-slider-section > *,
.theorem-gov-section > *,
.governance-section > *,
.comparison-section > *,
.integrations-section > *,
.cta-section > *,
.final-cta > *{
  position: relative !important;
  z-index: 1 !important;
}


/* v57 — actual visible panels, not hidden behind section backgrounds */
.playbook-strip,
.quality-model-section,
.industry-slider-section,
.theorem-gov-section,
.governance-section,
.comparison-section,
.integrations-section,
.cta-section,
.final-cta{
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* Base all sections white */
.playbook-strip,
.quality-model-section,
.industry-slider-section,
.theorem-gov-section,
.governance-section,
.comparison-section,
.integrations-section,
.cta-section,
.final-cta{
  background: #ffffff !important;
}

/* Visible soft panels. z-index 0 so it is ABOVE the white section background. */
.playbook-strip::before,
.industry-slider-section::before,
.governance-section::before,
.final-cta::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: #f3f7ff !important;
  pointer-events: none !important;
}

/* Plain white sections must not have decorative pseudo panels */
.quality-model-section::before,
.theorem-gov-section::before,
.comparison-section::before,
.integrations-section::before,
.cta-section::before{
  display: none !important;
  content: none !important;
}

/* Remove only after-lines */
.playbook-strip::after,
.quality-model-section::after,
.industry-slider-section::after,
.theorem-gov-section::after,
.governance-section::after,
.comparison-section::after,
.integrations-section::after,
.cta-section::after,
.final-cta::after{
  display: none !important;
  content: none !important;
}

/* Put real content above the soft panels */
.playbook-strip > *,
.quality-model-section > *,
.industry-slider-section > *,
.theorem-gov-section > *,
.governance-section > *,
.comparison-section > *,
.integrations-section > *,
.cta-section > *,
.final-cta > *{
  position: relative !important;
  z-index: 1 !important;
}

/* Section rhythm */
.playbook-strip,
.quality-model-section,
.industry-slider-section,
.theorem-gov-section,
.governance-section,
.comparison-section,
.integrations-section,
.cta-section,
.final-cta{
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

/* Global title highlight */
.highlight,
.hero-switch,
.target-small-heading .highlight,
.industry-slider-head h2 .highlight,
.theorem-gov-head h2 span,
.governance-head h2 span,
.final-cta h2 .highlight{
  color: var(--brand) !important;
  display: inline !important;
  font: inherit !important;
  font-weight: inherit !important;
}

/* Keep footer divider visible */
.footer{
  border-top: 1px solid var(--line2) !important;
}


/* =========================================================
   v8 — Section gradient differentiation
   Replaces all flat-white gaps with a flowing gradient rhythm.
   Each section gets its own very subtle tinted background that
   creates visual breathing room without harsh lines or heavy color.
   ========================================================= */

/* 1 — Hero: pure white → very soft blue at base */
.hero{
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%) !important;
}

/* 2 — Playbook (use-case grid): soft blue band, back to white */
.playbook-strip{
  background: linear-gradient(180deg, #f6f9ff 0%, #edf3ff 38%, #f6f9ff 70%, #ffffff 100%) !important;
}

/* 3 — Quality / Trust section: clean white with faint warm finish */
.quality-model-section,
.trust-system-section{
  background: linear-gradient(180deg, #ffffff 0%, #f9fafe 100%) !important;
}

/* 4 — Industry slider: cool neutral tint band, back to white */
.industry-slider-section{
  background: linear-gradient(180deg, #f9fafe 0%, #f1f5fd 38%, #f9fafe 70%, #ffffff 100%) !important;
}

/* 5 — Governance: clean white with faint warm finish */
.theorem-gov-section{
  background: linear-gradient(180deg, #ffffff 0%, #fafbfe 100%) !important;
}

/* 6 — Final CTA: light finishing gradient */
.final-cta{
  background: linear-gradient(180deg, #fafbfe 0%, #eef3ff 40%, #f6f9ff 100%) !important;
}

/* Remove ALL legacy pseudo-element section panels from previous versions */
.playbook-strip::before,
.playbook-strip::after,
.quality-model-section::before,
.quality-model-section::after,
.trust-system-section::before,
.trust-system-section::after,
.industry-slider-section::before,
.industry-slider-section::after,
.theorem-gov-section::before,
.theorem-gov-section::after,
.governance-section::before,
.governance-section::after,
.comparison-section::before,
.comparison-section::after,
.integrations-section::before,
.integrations-section::after,
.cta-section::before,
.cta-section::after,
.final-cta::before,
.final-cta::after{
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Uniform section rhythm — tighter than v57 to reduce the gap feeling */
.playbook-strip,
.quality-model-section,
.trust-system-section,
.industry-slider-section,
.theorem-gov-section,
.final-cta{
  padding-top: 68px !important;
  padding-bottom: 68px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

/* Hero inner padding: reduce the big gap at bottom of hero */
.hero-inner{
  padding-top: 104px !important;
  padding-bottom: 72px !important;
}

/* Content sits above gradient layer */
.playbook-strip > *,
.quality-model-section > *,
.trust-system-section > *,
.industry-slider-section > *,
.theorem-gov-section > *,
.final-cta > *{
  position: relative !important;
  z-index: 1 !important;
}

/* Footer */
.footer{
  background: #ffffff !important;
  border-top: 1px solid #e7eaf3 !important;
}


/* v8.1 — make section gradients actually visible */

.hero{
  background: linear-gradient(180deg, #ffffff 0%, #e8f1ff 100%) !important;
}

.playbook-strip{
  background: linear-gradient(180deg, #e8f1ff 0%, #d6e8ff 38%, #e8f1ff 70%, #ffffff 100%) !important;
}

.quality-model-section,
.trust-system-section{
  background: linear-gradient(180deg, #ffffff 0%, #f0f5ff 100%) !important;
}

.industry-slider-section{
  background: linear-gradient(180deg, #f0f5ff 0%, #dde9ff 38%, #f0f5ff 70%, #ffffff 100%) !important;
}

.theorem-gov-section{
  background: linear-gradient(180deg, #ffffff 0%, #f2f6ff 100%) !important;
}

.final-cta{
  background: linear-gradient(180deg, #f2f6ff 0%, #dde9ff 40%, #eaf1ff 100%) !important;
}


/* v8.2 — force gradients with max specificity + explicit background-image */

html body .hero,
html body section.hero,
html body .hero.page-grid {
  background-color: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #dce9ff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html body .playbook-strip,
html body section.playbook-strip {
  background-color: #dce9ff !important;
  background-image: linear-gradient(180deg, #dce9ff 0%, #c8daff 38%, #dce9ff 70%, #ffffff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html body .quality-model-section,
html body .trust-system-section,
html body section.quality-model-section {
  background-color: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #e8f1ff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html body .industry-slider-section,
html body section.industry-slider-section {
  background-color: #e8f1ff !important;
  background-image: linear-gradient(180deg, #e8f1ff 0%, #d4e6ff 38%, #e8f1ff 70%, #ffffff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html body .theorem-gov-section,
html body section.theorem-gov-section {
  background-color: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #ecf3ff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html body .final-cta,
html body section.final-cta {
  background-color: #ecf3ff !important;
  background-image: linear-gradient(180deg, #ecf3ff 0%, #d4e6ff 40%, #e8f1ff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}


/* v8.3 — tone down gradients, less intense */

html body .hero,
html body section.hero,
html body .hero.page-grid {
  background-color: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
}

html body .playbook-strip,
html body section.playbook-strip {
  background-color: #edf4ff !important;
  background-image: linear-gradient(180deg, #edf4ff 0%, #e2edff 38%, #edf4ff 70%, #ffffff 100%) !important;
}

html body .quality-model-section,
html body .trust-system-section,
html body section.quality-model-section {
  background-color: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%) !important;
}

html body .industry-slider-section,
html body section.industry-slider-section {
  background-color: #f3f8ff !important;
  background-image: linear-gradient(180deg, #f3f8ff 0%, #e8f1ff 38%, #f3f8ff 70%, #ffffff 100%) !important;
}

html body .theorem-gov-section,
html body section.theorem-gov-section {
  background-color: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%) !important;
}

html body .final-cta,
html body section.final-cta {
  background-color: #f4f8ff !important;
  background-image: linear-gradient(180deg, #f4f8ff 0%, #e8f1ff 40%, #f0f6ff 100%) !important;
}


/* v8.4 — slightly softer gradients */

html body .hero,
html body section.hero,
html body .hero.page-grid {
  background-image: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%) !important;
}

html body .playbook-strip,
html body section.playbook-strip {
  background-color: #f3f8ff !important;
  background-image: linear-gradient(180deg, #f3f8ff 0%, #eaf2ff 38%, #f3f8ff 70%, #ffffff 100%) !important;
}

html body .quality-model-section,
html body .trust-system-section,
html body section.quality-model-section {
  background-image: linear-gradient(180deg, #ffffff 0%, #f7fafe 100%) !important;
}

html body .industry-slider-section,
html body section.industry-slider-section {
  background-color: #f7fafe !important;
  background-image: linear-gradient(180deg, #f7fafe 0%, #eef5ff 38%, #f7fafe 70%, #ffffff 100%) !important;
}

html body .theorem-gov-section,
html body section.theorem-gov-section {
  background-image: linear-gradient(180deg, #ffffff 0%, #f7fafe 100%) !important;
}

html body .final-cta,
html body section.final-cta {
  background-color: #f7fafe !important;
  background-image: linear-gradient(180deg, #f7fafe 0%, #eef5ff 40%, #f3f8ff 100%) !important;
}


/* v8.5 — even softer gradients */

html body .hero,
html body section.hero,
html body .hero.page-grid {
  background-image: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

html body .playbook-strip,
html body section.playbook-strip {
  background-color: #f8fbff !important;
  background-image: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 38%, #f8fbff 70%, #ffffff 100%) !important;
}

html body .quality-model-section,
html body .trust-system-section,
html body section.quality-model-section {
  background-image: linear-gradient(180deg, #ffffff 0%, #fafcff 100%) !important;
}

html body .industry-slider-section,
html body section.industry-slider-section {
  background-color: #fafcff !important;
  background-image: linear-gradient(180deg, #fafcff 0%, #f2f7ff 38%, #fafcff 70%, #ffffff 100%) !important;
}

html body .theorem-gov-section,
html body section.theorem-gov-section {
  background-image: linear-gradient(180deg, #ffffff 0%, #fafcff 100%) !important;
}

html body .final-cta,
html body section.final-cta {
  background-color: #fafcff !important;
  background-image: linear-gradient(180deg, #fafcff 0%, #f2f7ff 40%, #f8fbff 100%) !important;
}


/* v8.6 — revert to v8.4 values */

html body .hero,
html body section.hero,
html body .hero.page-grid {
  background-image: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%) !important;
}

html body .playbook-strip,
html body section.playbook-strip {
  background-color: #f3f8ff !important;
  background-image: linear-gradient(180deg, #f3f8ff 0%, #eaf2ff 38%, #f3f8ff 70%, #ffffff 100%) !important;
}

html body .quality-model-section,
html body .trust-system-section,
html body section.quality-model-section {
  background-image: linear-gradient(180deg, #ffffff 0%, #f7fafe 100%) !important;
}

html body .industry-slider-section,
html body section.industry-slider-section {
  background-color: #f7fafe !important;
  background-image: linear-gradient(180deg, #f7fafe 0%, #eef5ff 38%, #f7fafe 70%, #ffffff 100%) !important;
}

html body .theorem-gov-section,
html body section.theorem-gov-section {
  background-image: linear-gradient(180deg, #ffffff 0%, #f7fafe 100%) !important;
}

html body .final-cta,
html body section.final-cta {
  background-color: #f7fafe !important;
  background-image: linear-gradient(180deg, #f7fafe 0%, #eef5ff 40%, #f3f8ff 100%) !important;
}


/* v63 — inner pages, legal docs, about, contact */
.footer-grid{
  grid-template-columns:1.35fr 1fr 1fr 1fr !important;
  gap:70px !important;
}

.footer-bottom{
  margin-top:54px;
  padding-top:22px;
  border-top:1px solid var(--line2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:#7a8294;
  font-size:13px;
  letter-spacing:-.01em;
}

.footer-bottom span:first-child{
  color:#111827;
  font-weight:650;
}

.footer-bottom a{
  color:#7a8294 !important;
  display:inline !important;
  margin:0 !important;
}

.nav-links a.is-active{
  color:var(--brand);
}

.legal-page-hero{
  padding:84px 0 110px;
}

.legal-layout{
  display:grid;
  grid-template-columns:270px minmax(0, 1fr);
  gap:72px;
  align-items:start;
}

.legal-toc{
  position:sticky;
  top:104px;
  background:#f7f7fb;
  border:1px solid var(--line2);
  border-radius:18px;
  padding:24px 24px 26px;
}

.legal-toc h4{
  margin:0 0 16px;
  font-size:18px;
  letter-spacing:-.035em;
}

.legal-toc a{
  display:block;
  color:#1b2236;
  font-size:14px;
  line-height:1.35;
  margin:12px 0;
}

.legal-toc a:hover{
  color:var(--brand);
}

.legal-doc{
  max-width:820px;
}

.legal-doc h1{
  margin:0 0 28px;
  font-size:clamp(54px,6vw,82px);
  line-height:1.02;
  letter-spacing:-.075em;
  font-weight:720;
}

.legal-lead{
  color:#7a8294;
  font-size:18px;
  line-height:1.72;
  margin:0 0 18px;
}

.legal-updated{
  color:#9aa1b2;
  font-size:14px;
  margin:0 0 52px;
}

.legal-doc h2{
  margin:52px 0 16px;
  font-size:38px;
  line-height:1.12;
  letter-spacing:-.06em;
  font-weight:720;
}

.legal-doc p{
  color:#737b8e;
  font-size:17px;
  line-height:1.76;
  margin:0 0 18px;
}

.legal-doc a{
  color:var(--brand);
  text-decoration:underline;
}

.about-hero{
  padding:112px 0 76px;
}

.about-hero-inner{
  max-width:860px;
}

.about-hero h1,
.contact-copy h1{
  margin:0;
  font-size:clamp(50px,5.5vw,76px);
  line-height:1.06;
  letter-spacing:-.075em;
  font-weight:720;
}

.about-hero p:not(.eyebrow),
.contact-copy > p{
  max-width:760px;
  margin:24px 0 0;
  color:#737b8e;
  font-size:20px;
  line-height:1.7;
}

.about-section{
  padding:26px 0 92px;
}

.about-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr 1fr;
  gap:22px;
}

.about-grid h2,
.founder-card h2{
  margin:0 0 18px;
  font-size:42px;
  line-height:1.12;
  letter-spacing:-.065em;
  font-weight:720;
}

.about-grid p,
.founder-card p{
  color:#687184;
  font-size:16px;
  line-height:1.72;
  margin:0 0 14px;
}

.about-card{
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px 24px;
  background:linear-gradient(135deg,#fff,#f8fbff);
  box-shadow:0 18px 50px rgba(20,25,50,.04);
}

.about-card span{
  width:44px;
  height:44px;
  border-radius:13px;
  display:grid;
  place-items:center;
  color:var(--brand);
  background:var(--brand-soft);
  font-weight:800;
  margin-bottom:34px;
}

.about-card h3{
  margin:0 0 10px;
  font-size:22px;
  letter-spacing:-.045em;
}

.about-founder{
  padding:0 0 112px;
}

.founder-card{
  border:1px solid var(--line);
  border-radius:28px;
  padding:48px;
  display:grid;
  grid-template-columns:.9fr 1.2fr;
  gap:48px;
  background:linear-gradient(135deg,#fff,#f7fbff);
  box-shadow:0 24px 80px rgba(20,25,50,.055);
}

.contact-page{
  padding:112px 0 120px;
}

.contact-layout{
  display:grid;
  grid-template-columns:1fr .88fr;
  gap:72px;
  align-items:start;
}

.contact-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px;
}

.contact-points span{
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 13px;
  color:#687184;
  background:#fff;
  font-size:13px;
  font-weight:650;
}

.contact-email{
  margin-top:28px !important;
  font-size:16px !important;
}

.contact-email a{
  color:var(--brand);
  text-decoration:underline;
}

.contact-form{
  border:1px solid var(--line);
  border-radius:24px;
  padding:34px;
  background:#fff;
  box-shadow:0 24px 80px rgba(20,25,50,.065);
}

.contact-form label{
  display:block;
  color:#111827;
  font-size:14px;
  font-weight:700;
  margin-bottom:16px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  margin-top:8px;
  border:1px solid #dde2ec;
  border-radius:12px;
  padding:13px 14px;
  font:inherit;
  color:#111827;
  outline:none;
  background:#fbfcff;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(var(--brand-rgb), .1);
}

.contact-form textarea{
  resize:vertical;
}

.contact-form button{
  width:100%;
  margin-top:4px;
}

.contact-form p{
  margin:14px 0 0;
  color:#8a92a4;
  font-size:13px;
  line-height:1.55;
}

@media(max-width:1080px){
  .legal-layout,
  .contact-layout,
  .founder-card,
  .about-grid{
    grid-template-columns:1fr;
  }

  .legal-toc{
    position:static;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:42px !important;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
}

@media(max-width:640px){
  .legal-page-hero,
  .about-hero,
  .contact-page{
    padding:72px 0 82px;
  }

  .legal-doc h1,
  .about-hero h1,
  .contact-copy h1{
    font-size:44px;
  }

  .legal-doc h2,
  .about-grid h2,
  .founder-card h2{
    font-size:32px;
  }

  .contact-form,
  .founder-card{
    padding:26px;
  }

  .footer-grid{
    grid-template-columns:1fr !important;
  }
}


/* v64 — about replacement and contact form polish */
.impact-card{
  grid-template-columns:.95fr 1.25fr !important;
}

.impact-list{
  display:grid;
  gap:14px;
}

.impact-list div{
  display:grid;
  grid-template-columns:50px 1fr;
  align-items:start;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--line2);
}

.impact-list div:last-child{
  border-bottom:0;
}

.impact-list strong{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:var(--brand-soft);
  color:var(--brand);
  font-size:13px;
}

.impact-list span{
  color:#5f687a;
  font-size:16px;
  line-height:1.65;
}

.contact-form input[type="hidden"]{
  display:none;
}

@media(max-width:1080px){
  .impact-card{
    grid-template-columns:1fr !important;
  }
}



/* v65 — align numbered steps with text */
.impact-list div{
  align-items:center !important;
}

.impact-list strong{
  margin-top:0 !important;
  flex-shrink:0;
}

.impact-list span{
  display:block;
  padding-top:0 !important;
}


/* v66 — restore original Theorrem wordmark style */
.theorem-logo .theorem-wordmark,
.footer .theorem-wordmark{
  font-family:'Bai Jamjuree', Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight:500 !important;
  font-size:25px !important;
  letter-spacing:0.04em !important;
  text-transform:uppercase !important;
  color:#000 !important;
  -webkit-text-stroke:1.8px #000 !important;
}

.theorem-logo{
  gap:11px !important;
}

.theorem-mark svg{
  width:22px !important;
  height:auto !important;
  display:block !important;
}

.theorem-mark rect:nth-child(1){ fill:#0a0a0a !important; }
.theorem-mark rect:nth-child(2){ fill:#0a0a0a !important; }
.theorem-mark rect:nth-child(3){ fill:#3b82f6 !important; }


/* v67 — five item navigation */
.nav-links{
  gap:30px !important;
}

@media(max-width:1120px){
  .nav-links{
    gap:22px !important;
    margin-left:72px !important;
  }
}


/* v68 — nav order and final start section */
.nav-links{
  gap:28px !important;
}

@media(max-width:1120px){
  .nav-links{
    gap:20px !important;
    margin-left:64px !important;
  }
}


/* v78 — nav scroll offset for all main sections */
/* All sections share padding-top:68px. navbar is 72px sticky.
   scroll-margin-top:24px → heading lands at 92px from viewport top = 20px below navbar. */
#playbooks,
#quality,
#usecases,
#governance{
  scroll-margin-top:54px;
}