/* Platform tabs + RG → PRO reveal, ported from rgdeck.vercel.app (Inter instead of its serif, plain black backgrounds). */

.site-width { width: min(100% - 104px, 1180px); margin-inline: auto; }
@media (max-width: 1250px) { .site-width { width: min(100% - 72px, 1180px); } }
@media (max-width: 960px) { .site-width { width: min(100% - 54px, 1180px); } }
@media (max-width: 680px) { .site-width { width: min(100% - 36px, 1180px); } }

/* ---------- The platform (tabs + morphing screen) ---------- */
.capabilities-section { isolation: isolate; position: relative; overflow: hidden; background: #000; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: clamp(40px, 6vh, 80px) 0 clamp(44px, 6vh, 84px); }
.capabilities-intro { display: grid; grid-template-columns: 1fr 0.42fr; align-items: end; column-gap: 9%; margin-bottom: clamp(36px, 5vh, 52px); }
.capabilities-kicker { grid-column: 1 / -1; margin: 0 0 17px; color: rgb(167, 124, 141); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; }
.capabilities-intro h2 { margin: 0; color: rgb(242, 233, 235); font-size: clamp(44px, 5vw, 76px); font-weight: 300; line-height: 0.98; letter-spacing: -0.045em; }
.capabilities-intro h2 em { font-style: normal; color: rgb(167, 124, 141); }
.capabilities-intro > p:last-child { margin: 0 0 8px; max-width: 360px; color: rgb(201, 188, 197); font-size: 17px; line-height: 1.5; }
.capability-tabs-prompt { margin: 0 0 11px; color: rgb(199, 181, 189); font-size: 11px; font-weight: 500; letter-spacing: 0.035em; }
.capability-tabs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.capability-tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 13px; width: 100%; min-height: 54px; padding: 9px 14px 12px; overflow: hidden; white-space: nowrap; cursor: pointer; background: none; border: 0; border-bottom: 1px solid rgba(167, 124, 141, 0.28); border-radius: 0; color: rgb(200, 185, 194); font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.015em; transition: color 0.2s, border-color 0.2s; }
.capability-tab::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: rgb(200, 155, 176); transform: scaleX(0); transform-origin: 0 center; }
.capability-tabs.is-playing .capability-tab.is-active::after { animation: capability-tab-progress var(--capability-auto-delay) linear forwards; }
.capability-tab:hover { color: rgb(240, 229, 234); border-bottom-color: rgba(200, 155, 176, 0.7); }
.capability-tab.is-active { color: rgb(242, 232, 236); border-bottom-color: rgba(200, 155, 176, 0.4); }
.capability-tab.is-active::after { transform: scaleX(1); }
.capability-tab:focus-visible { outline: 2px solid rgb(177, 138, 153); outline-offset: 3px; }
@keyframes capability-tab-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.capability-tab-number { color: rgb(148, 113, 126); font-size: 11px; letter-spacing: 0.1em; }
.capability-tab.is-active .capability-tab-number { color: rgb(167, 124, 141); }
.capability-panel { display: grid; grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr); align-items: center; gap: 7%; padding: clamp(30px, 4vh, 48px) 0 0; }
.capability-panel:focus-visible { outline: 2px solid rgb(177, 138, 153); outline-offset: 4px; }
.capability-copy-stage { display: grid; min-width: 0; }
.capability-copy-stage > * { grid-area: 1 / 1; align-self: start; }
.capability-copy-sizer { display: grid; visibility: hidden; pointer-events: none; }
.capability-copy-sizer > .capability-panel-copy { grid-area: 1 / 1; }
.capability-panel-copy { max-width: 490px; transition: opacity var(--capability-text-phase) ease, filter var(--capability-text-phase) ease, transform var(--capability-text-phase) ease; }
.capability-panel.is-exiting .capability-copy-live { opacity: 0; filter: blur(9px); transform: scale(0.975); }
.capability-panel-index { color: rgb(161, 122, 138); font-size: 11px; font-weight: 500; letter-spacing: 0.15em; }
.capability-panel h3 { margin: 22px 0 20px; white-space: pre-line; color: rgb(244, 234, 235); font-size: clamp(36px, 3.6vw, 56px); font-weight: 300; line-height: 1.02; letter-spacing: -0.045em; }
.capability-panel-copy > p { margin: 0; padding-top: 20px; border-top: 1px solid rgba(164, 123, 140, 0.35); color: rgb(210, 196, 205); font-size: 16px; line-height: 1.56; letter-spacing: -0.015em; }
.capability-panel-benefits { display: flex; flex-wrap: wrap; gap: 9px 17px; margin-top: 26px; color: rgb(174, 140, 153); font-size: 11px; font-weight: 500; letter-spacing: 0.015em; }
.capability-panel-benefits span + span { padding-left: 17px; border-left: 1px solid rgba(164, 123, 140, 0.55); }
.capability-visual { position: relative; width: 100%; aspect-ratio: 8 / 5; overflow: hidden; background: #000; border: 1px solid rgba(164, 123, 140, 0.27); }
.capability-visual img, .capability-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: brightness(1.12); }
.capability-visual img { transition: opacity 0.6s ease; }
.capability-visual canvas { opacity: 0; transition: opacity 0.15s; }
.capability-visual.has-gl canvas { opacity: 1; }
.capability-visual.has-gl img { opacity: 0; }
@media (max-width: 1100px) { .capability-panel { gap: 5%; } }
@media (max-width: 760px) {
  .capabilities-section { padding: 40px 0 44px; }
      .capabilities-intro { display: block; margin-bottom: 28px; }
  .capabilities-intro > p:last-child { margin: 18px 0 0; font-size: 15px; }
  .capability-tabs { gap: 6px; }
  .capability-tab { min-width: 0; min-height: 52px; gap: 0; padding: 9px 6px 12px; white-space: normal; text-align: center; font-size: 11px; }
  .capability-tab-number { display: none; }
  .capability-panel { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding-top: 25px; }
  .capability-panel h3 { margin: 17px 0; }
  .capability-panel-copy > p { padding-top: 16px; font-size: 15px; }
  .capability-panel-benefits { margin-top: 18px; }
}

/* Scroll-driven: the section pins while the screens morph through the tabs */
.platform-pin { position: relative; height: 300vh; }
.platform-pin > .capabilities-section { position: sticky; top: var(--platform-top, 0px); min-height: 100vh; display: flex; align-items: center; }
.platform-pin > .capabilities-section > .site-width { width: min(100% - 104px, 1180px); }
@media (max-height: 600px) {
  .platform-pin { height: auto; }
  .platform-pin > .capabilities-section { position: relative; top: 0; min-height: 0; display: block; }
}

/* ---------- RG → PRO scroll reveal ---------- */
.pro-pin { position: relative; height: 240vh; }
.pro-reveal { position: sticky; top: 0; height: 100vh; min-height: 560px; display: flex; align-items: center; isolation: isolate; overflow: hidden; background: #000; }
.pro-reveal-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 5%; }
.pricing-intro h2 { margin: 0; color: rgb(236, 231, 228); font-size: clamp(44px, 4.6vw, 68px); font-weight: 300; line-height: 1; letter-spacing: -0.045em; }
.pricing-intro h2 em { font-style: normal; color: rgb(167, 124, 141); }
.pricing-intro p { max-width: 420px; margin: 30px 0 0; color: rgb(170, 162, 169); font-size: 17px; line-height: 1.55; }
.pro-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; height: 36px; padding: 0 16px; border-radius: 999px; background: #fff; color: #18181b; font-size: 14px; font-weight: 500; transition: background 0.2s; }
.pro-cta:hover { background: #f4f4f5; }
.pro-mark-stage { width: min(100%, 460px); margin: 0 auto; color: rgb(167, 124, 141); }
.pro-mark-caption, .pro-mark-footer { display: flex; justify-content: space-between; gap: 18px; color: rgb(176, 139, 154); font-size: clamp(11px, 0.8vw, 13px); font-weight: 500; letter-spacing: 0.16em; }
.pro-mark-footer { color: rgb(150, 124, 136); }
.pro-mark-svg { display: block; width: 100%; height: auto; margin: 24px 0 10px; overflow: visible; color: rgb(233, 219, 224); }
.pro-mark-svg path { stroke: currentColor; stroke-width: 65px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 5; fill: none; }
.pro-mark-svg .pro-mark-dot { stroke-width: 35px; }
@media (max-width: 900px) {
  .pro-pin { height: 200vh; }
  .pro-reveal-layout { grid-template-columns: 1fr; gap: 48px; }
  .pro-mark-stage { width: min(100%, 360px); }
}
@media (max-width: 760px) {
  .pro-reveal-layout { gap: 36px; }
  .pricing-intro h2 { font-size: 36px; }
  .pricing-intro p { margin-top: 18px; font-size: 15px; }
  .pro-cta { margin-top: 22px; }
  .pro-mark-svg { margin: 16px 0 8px; }
  /* Pinned on phones: keep the tabs, copy and screen inside one screen height */
  .platform-pin { height: 260vh; }
  .platform-pin .capabilities-intro > p:last-child { display: none; }
  .platform-pin .capabilities-intro { margin-bottom: 18px; }
  .platform-pin .capabilities-intro h2 { font-size: 34px; }
  .platform-pin .capability-panel { gap: 16px; padding-top: 18px; }
  .platform-pin .capability-panel h3 { font-size: 30px; margin: 12px 0; }
  .platform-pin .capability-panel-copy > p { font-size: 14px; padding-top: 12px; }
  .platform-pin .capability-panel-benefits { margin-top: 12px; }
}
@media (max-width: 430px) { .pro-mark-caption span:last-child { max-width: 150px; text-align: right; } .pro-mark-caption, .pro-mark-footer { letter-spacing: 0.08em; } }

@media (max-width: 760px) and (max-height: 720px) {
  .platform-pin > .capabilities-section { padding: 22px 0 26px; }
  .platform-pin .capabilities-kicker { display: none; }
  .platform-pin .capabilities-intro { margin-bottom: 12px; }
  .platform-pin .capabilities-intro h2 { font-size: 30px; }
  .platform-pin .capability-tabs-prompt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .capability-tab::after { animation: none !important; }
  .capability-panel-copy, .capability-tab { transition: none; }
  .pro-pin { height: auto; }
  .pro-reveal { position: relative; height: auto; padding: 96px 0; }
}