/* ==========================================================
   SIIP GLOBAL FINAL OVERRIDES v2 — 2026-08-12
   ----------------------------------------------------------
   This is the LAST stylesheet on every page.
   Make future visual/responsive adjustments here first.
   Purpose: normalize spacing, typography, cards, icons,
   Product architecture, integration logos, buttons and mobile.
   ========================================================== */

:root{
  --siip-header-desktop:88px;
  --siip-header-mobile:88px;
  --siip-content-max:1280px;
  --siip-radius-lg:26px;
  --siip-radius-md:20px;
  --siip-line:rgba(96,165,250,.22);
  --siip-line-strong:rgba(52,211,153,.34);
  --siip-card:#0d1726;
  --siip-card-2:#101c2f;
  --siip-text:#f8fafc;
  --siip-muted:#a8b5c9;
  --siip-green:#36d8a5;
  --siip-blue:#5da5ff;
}

/* ---------- universal containment ---------- */
html,body{max-width:100%;overflow-x:clip!important}
*,*::before,*::after{box-sizing:border-box}
img,video{max-width:100%;height:auto}
svg{max-width:100%}
canvas{max-width:100%}
main,section,.container,.section-head,.hero-copy,.editorial-copy,.quote-panel,.home-node-detail,.integration-panel{min-width:0}
h1,h2,h3,h4,p,li,strong,span{overflow-wrap:break-word;word-break:normal}

/* ---------- shared header / page offset ---------- */
.site-header{height:var(--siip-header-desktop)!important;min-height:var(--siip-header-desktop)!important}
.brand-logo{display:block!important;width:clamp(168px,14vw,218px)!important;max-height:72px!important;object-fit:contain!important}
.inner-hero,.contact-hero{padding-top:calc(var(--siip-header-desktop) + 54px)!important}

/* ---------- consistent section rhythm ---------- */
.editorial-section,.value-section,.integration-section,.regulatory-section,.cta-section,.demo-section,.contact-main,.discovery-section,.company-section,#seven-node-architecture{
  padding-top:clamp(64px,6vw,88px)!important;
  padding-bottom:clamp(64px,6vw,88px)!important;
}
.section-head{max-width:980px!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important}
.section-head .eyebrow,.section-head h2,.section-head .lede{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
.section-head h2{font-size:clamp(2rem,3.4vw,3.65rem)!important;line-height:1.05!important;letter-spacing:-.04em!important}
.section-head .lede{max-width:820px!important;font-size:clamp(.98rem,1.3vw,1.15rem)!important;line-height:1.65!important}

/* ---------- buttons ---------- */
.hero-actions,.early-actions,.form-actions,.cta-panel{justify-content:center!important}
.btn,.nav-cta,.demo-submit{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;max-width:100%!important}

/* ==========================================================
   PRODUCT — HERO
   ========================================================== */
.inner-hero .hero-grid{align-items:center!important}
.inner-hero .hero-copy{min-width:0!important}
.inner-hero h1{font-size:clamp(3rem,5.6vw,5.75rem)!important;line-height:.98!important;letter-spacing:-.055em!important}
.inner-hero .lede{font-size:clamp(1rem,1.45vw,1.18rem)!important;line-height:1.7!important}
.arch-visual{max-width:100%!important;overflow:hidden!important}
.arch-node{min-width:0!important}

/* ==========================================================
   PRODUCT — 7 NODE DETAIL CARDS
   ========================================================== */
#seven-node-architecture{background:linear-gradient(180deg,#0a111c 0%,#0b1320 100%)!important}
#seven-node-architecture .container{width:min(calc(100% - 48px),var(--siip-content-max))!important}
#seven-node-architecture .home-node-details-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:16px!important;
  margin-top:38px!important;
}
#seven-node-architecture .home-node-detail{
  display:grid!important;
  grid-template-columns:minmax(118px,.18fr) minmax(0,1.82fr)!important;
  align-items:start!important;
  gap:28px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:30px 32px!important;
  background:linear-gradient(145deg,rgba(16,28,47,.92),rgba(8,16,27,.96))!important;
  border:1px solid var(--siip-line)!important;
  border-radius:var(--siip-radius-lg)!important;
  box-shadow:0 16px 48px rgba(0,0,0,.14)!important;
  overflow:hidden!important;
}
#seven-node-architecture .home-node-detail-index{
  display:flex!important;
  align-items:center!important;
  min-height:34px!important;
  color:var(--siip-green)!important;
  font-size:.76rem!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
#seven-node-architecture .home-node-detail h3{
  margin:0 0 12px!important;
  color:var(--siip-text)!important;
  font-size:clamp(1.35rem,2.1vw,2rem)!important;
  line-height:1.15!important;
  letter-spacing:-.03em!important;
  text-align:left!important;
}
#seven-node-architecture .home-node-detail p{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  color:var(--siip-muted)!important;
  font-size:clamp(.94rem,1.15vw,1.05rem)!important;
  line-height:1.72!important;
  text-align:left!important;
}
#seven-node-architecture .home-node-detail p+p{margin-top:10px!important}
#seven-node-architecture .home-node-detail p strong{color:#dbe7f7!important;font-weight:700!important}

.product-patent-summary{
  margin-top:28px!important;
  padding:28px!important;
  border:1px solid var(--siip-line)!important;
  border-radius:var(--siip-radius-lg)!important;
  background:rgba(12,22,37,.82)!important;
}
.product-patent-summary h3{text-align:center!important;margin-top:0!important}
.patent-name-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.patent-name-grid>div{padding:14px 16px!important;border:1px solid rgba(148,163,184,.12)!important;border-radius:14px!important;background:rgba(255,255,255,.018)!important}

/* ==========================================================
   PRODUCT — HRIS INTEGRATION LOGOS
   ========================================================== */
.integration-section{background:#0a111c!important}
.integration-panel{
  width:min(100%,1180px)!important;
  margin-inline:auto!important;
  padding:clamp(26px,4vw,46px)!important;
  border:1px solid var(--siip-line)!important;
  border-radius:var(--siip-radius-lg)!important;
  background:linear-gradient(145deg,rgba(15,27,45,.94),rgba(8,15,25,.96))!important;
  overflow:hidden!important;
}
.integration-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(280px,.75fr)!important;
  align-items:end!important;
  gap:28px!important;
  margin-bottom:26px!important;
}
.integration-head h2{margin:0!important;font-size:clamp(1.8rem,3vw,3rem)!important;line-height:1.08!important;letter-spacing:-.04em!important}
.integration-head>p{margin:0!important;color:var(--siip-muted)!important;line-height:1.65!important}
.integration-logos{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
}
.integration-logo{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  min-height:118px!important;
  padding:20px!important;
  border:1px solid rgba(96,165,250,.18)!important;
  border-radius:18px!important;
  background:rgba(3,10,19,.62)!important;
  overflow:hidden!important;
}
.integration-logo img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:72%!important;
  max-height:64px!important;
  margin:auto!important;
  object-fit:contain!important;
}
.integration-logo.workday img{max-width:76%!important;max-height:62px!important}
.integration-logo.adp img{max-width:68%!important;max-height:62px!important}
.integration-logo.sap img{max-width:64%!important;max-height:58px!important}
.integration-logo.oracle img{max-width:78%!important;max-height:48px!important}
.integration-logo.workday::before,.integration-logo.sap::before{content:none!important;display:none!important}
.integration-logo.workday span,.integration-logo.sap span{display:none!important}
.integration-note{margin:20px auto 0!important;max-width:900px!important;text-align:center!important;color:#8fa0b7!important;line-height:1.6!important}

/* ==========================================================
   CARDS / ICON NORMALIZATION ACROSS SITE
   ========================================================== */
.g-card,.value-card,.info-card,.audience-card,.pillar-card,.layer-card,.process-card,.reg-card-new,.market-stat,.revenue-event-card{
  min-width:0!important;
}
.icon-ring,.value-card .icon-ring,.g-card .icon-ring{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.icon-ring svg,.value-card .icon-ring svg,.g-card .icon-ring svg{display:block!important;margin:auto!important}
.value-card h3,.value-card .card-sub{text-align:center!important}
.value-card>p:last-of-type{text-align:center!important}

/* ==========================================================
   GLOBAL MOBILE — 760px AND BELOW
   ========================================================== */
@media (max-width:760px){
  :root{--header:var(--siip-header-mobile)!important}
  .site-header{height:var(--siip-header-mobile)!important;min-height:var(--siip-header-mobile)!important;background:#09111c!important}
  .header-inner{padding-inline:16px!important}
  .brand-logo{width:176px!important;max-height:64px!important}
  .container{width:min(calc(100% - 28px),680px)!important}

  /* never let fixed header cover page hero */
  .inner-hero,.contact-hero{
    padding-top:calc(var(--siip-header-mobile) + 34px)!important;
    padding-bottom:48px!important;
    min-height:0!important;
    align-items:flex-start!important;
  }
  .inner-hero .hero-grid,.contact-hero-grid{grid-template-columns:1fr!important;gap:30px!important}
  .inner-hero .hero-copy,.contact-hero .hero-copy{text-align:center!important}
  .inner-hero .hero-kicker,.contact-hero .hero-kicker{justify-content:center!important;text-align:center!important}
  .inner-hero h1,.contact-hero h1{
    max-width:620px!important;
    margin-inline:auto!important;
    font-size:clamp(2rem,9.6vw,3.25rem)!important;
    line-height:1.04!important;
    letter-spacing:-.045em!important;
    text-align:center!important;
  }
  .inner-hero .lede,.contact-hero .lede{
    max-width:570px!important;
    margin-inline:auto!important;
    font-size:.98rem!important;
    line-height:1.65!important;
    text-align:center!important;
  }
  .hero-actions{display:flex!important;flex-direction:column!important;align-items:center!important;gap:10px!important;margin-top:24px!important}
  .hero-actions .btn{width:min(100%,340px)!important;margin-inline:auto!important}
  .arch-visual{width:100%!important;max-width:560px!important;margin-inline:auto!important}

  /* section spacing */
  .editorial-section,.value-section,.integration-section,.regulatory-section,.cta-section,.demo-section,.contact-main,.discovery-section,.company-section,#seven-node-architecture{
    padding-top:52px!important;
    padding-bottom:52px!important;
  }
  .section-head{margin-bottom:28px!important;text-align:center!important}
  .section-head .eyebrow{justify-content:center!important;text-align:center!important}
  .section-head h2{font-size:clamp(1.85rem,8vw,2.55rem)!important;line-height:1.07!important;text-align:center!important}
  .section-head .lede{font-size:.95rem!important;line-height:1.6!important;text-align:center!important}

  /* 7 node architecture cards */
  #seven-node-architecture .container{width:min(calc(100% - 24px),680px)!important}
  #seven-node-architecture .home-node-details-grid{gap:12px!important;margin-top:24px!important}
  #seven-node-architecture .home-node-detail{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:20px 18px!important;
    border-radius:18px!important;
    text-align:center!important;
  }
  #seven-node-architecture .home-node-detail-index{justify-content:center!important;text-align:center!important;font-size:.7rem!important}
  #seven-node-architecture .home-node-detail h3{font-size:1.27rem!important;line-height:1.2!important;text-align:center!important;margin-bottom:8px!important}
  #seven-node-architecture .home-node-detail p{
    font-size:.92rem!important;
    line-height:1.63!important;
    text-align:justify!important;
    text-align-last:left!important;
  }
  .product-patent-summary{padding:20px 16px!important;border-radius:18px!important}
  .product-patent-summary h3,.product-patent-summary>p{text-align:center!important}
  .patent-name-grid{grid-template-columns:1fr!important}
  .patent-name-grid>div{text-align:center!important}

  /* integration block */
  .integration-section{padding-block:52px!important}
  .integration-panel{padding:22px 16px!important;border-radius:20px!important}
  .integration-head{grid-template-columns:1fr!important;gap:12px!important;text-align:center!important;margin-bottom:20px!important}
  .integration-head h2,.integration-head>p,.integration-head .eyebrow{text-align:center!important;margin-inline:auto!important}
  .integration-head h2{font-size:1.8rem!important}
  .integration-head>p{font-size:.93rem!important;line-height:1.6!important}
  .integration-logos{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .integration-logo{min-height:92px!important;padding:14px!important;border-radius:15px!important}
  .integration-logo img{max-width:78%!important;max-height:48px!important}
  .integration-logo.workday img{max-width:82%!important;max-height:48px!important}
  .integration-logo.adp img{max-width:72%!important;max-height:48px!important}
  .integration-logo.sap img{max-width:68%!important;max-height:44px!important}
  .integration-logo.oracle img{max-width:82%!important;max-height:34px!important}
  .integration-note{font-size:.86rem!important}

  /* general card alignment / icons / buttons */
  .value-card,.g-card,.info-card,.audience-card,.pillar-card,.layer-card,.process-card,.reg-card-new,.revenue-event-card{text-align:center!important}
  .value-card h3,.g-card h3,.info-card h3,.audience-card h3,.pillar-card h3,.layer-card h3,.process-card h3,.reg-card-new h3,.revenue-event-card h3{text-align:center!important}
  .value-card p,.g-card p,.info-card p,.audience-card p,.pillar-card p,.layer-card p,.process-card p,.reg-card-new p,.revenue-event-card p{text-align:center!important}
  .icon-ring,.value-card .icon-ring,.g-card .icon-ring{margin-inline:auto!important}
  .cta-panel .btn,.early-actions .btn,.form-actions .btn,.discovery-copy .btn,.demo-submit{margin-inline:auto!important;width:min(100%,340px)!important}

  /* large editorial paragraphs: readable justification */
  .editorial-copy p,.quote-panel p,.founder-copy p,.company-copy p,.audience-panel p,.product-patent-summary p{
    font-size:.95rem!important;
    line-height:1.68!important;
    text-align:justify!important;
    text-align-last:left!important;
  }
  .editorial-copy h2,.quote-panel h2,.founder-copy h2,.company-copy h2,.audience-panel h2{text-align:center!important}
}

@media (max-width:420px){
  .container{width:min(calc(100% - 22px),680px)!important}
  .brand-logo{width:164px!important}
  .inner-hero h1,.contact-hero h1{font-size:clamp(1.9rem,9.5vw,2.65rem)!important}
  .integration-logos{grid-template-columns:1fr!important}
  .integration-logo{min-height:84px!important}
  .integration-logo img{max-width:68%!important}
  #seven-node-architecture .home-node-detail{padding:18px 15px!important}
  #seven-node-architecture .home-node-detail p{font-size:.9rem!important}
}


/* ==========================================================
   HOMEPAGE ARCHITECTURE — DESKTOP STICKY/SCROLL SAFETY
   ----------------------------------------------------------
   IMPORTANT: position:sticky fails when an ancestor becomes a
   secondary scroll container. Older responsive layers used
   overflow-x:hidden on html/body. This final layer uses clip
   instead and explicitly restores the animation geometry.
   ========================================================== */
:root{--header:88px!important}
main{overflow:visible!important;overflow-x:clip!important}

@media (min-width:761px){
  .arch-section,
  .arch-section.arch-scroll{
    overflow:visible!important;
    contain:none!important;
    transform:none!important;
  }

  .arch-section.arch-scroll{
    position:relative!important;
    height:600vh!important;
    height:600svh!important;
    min-height:600vh!important;
    min-height:600svh!important;
    margin:0!important;
    padding:0!important;
  }

  .arch-section .arch-sticky{
    position:-webkit-sticky!important;
    position:sticky!important;
    top:var(--header)!important;
    width:100%!important;
    height:calc(100vh - var(--header))!important;
    height:calc(100svh - var(--header))!important;
    min-height:calc(100vh - var(--header))!important;
    min-height:calc(100svh - var(--header))!important;
    max-height:calc(100vh - var(--header))!important;
    max-height:calc(100svh - var(--header))!important;
    overflow:hidden!important;
    z-index:3!important;
  }

  .arch-section .arch-sticky>.container{
    height:100%!important;
    min-height:0!important;
  }

  .arch-section .arch-stage,
  .arch-section .flow-zone{
    min-width:0!important;
  }

  .arch-section .flow-path-layer{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    overflow:visible!important;
    pointer-events:none!important;
  }

  .arch-section .route-runner,
  .arch-section .impact-flash{
    display:block!important;
    pointer-events:none!important;
  }

  .arch-section .flow-node svg,
  .arch-section .route-runner,
  .arch-section .flow-path-layer{
    flex:none!important;
  }
}

/* Keep mobile header/sticky math synchronized too. */
@media (max-width:760px){
  :root{--header:88px!important}
  html,body{overflow-x:clip!important}
  main{overflow:visible!important;overflow-x:clip!important}
}

@media (max-width: 760px) {
     .layer-card p {
        text-align: justify !important;
    }
}

@media (max-width: 760px) {
    .value-card p, .g-card p, .info-card p, .audience-card p, .pillar-card p, .layer-card p, .process-card p, .reg-card-new p, .revenue-event-card p {
        text-align: justify !important;
    }
}


.hero-actions {
    justify-content: left !important;
}

 .hero-actions .btn{
    margin-left: 10px !important; 
    margin-right: 10px !important; 
}


/* =========================================================
   REGULATORY / TAILWIND LIST
   Desktop + Mobile
   ========================================================= */

.tailwind-list {
  width: 100%;
  max-width: 1180px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(103, 142, 199, 0.22);
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      rgba(19, 31, 51, 0.78),
      rgba(9, 16, 27, 0.94)
    );
}

.tailwind-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 32px;
  align-items: flex-start;

  padding: 30px 36px;

  border-bottom: 1px solid rgba(103, 142, 199, 0.16);
}

.tailwind-item:last-child {
  border-bottom: 0;
}

/* NYC / CO / FED badge */
.tailwind-item > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  min-width: 64px;
  min-height: 36px;

  padding: 8px 14px;

  color: #42dbb0;
  background: rgba(30, 209, 157, 0.07);
  border: 1px solid rgba(48, 216, 169, 0.28);
  border-radius: 999px;

  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.13em;
  text-align: center;
}

.tailwind-item > div {
  min-width: 0;
}

.tailwind-item strong {
  display: block;
  margin: 0 0 10px;

  color: #f5f7fb;

  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 750;
  line-height: 1.25;
}

.tailwind-item p {
  max-width: 900px;
  margin: 0;

  color: #9baac0;

  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  font-weight: 400;
  line-height: 1.7;
}

/* subtle hover for desktop */
@media (hover: hover) {
  .tailwind-item {
    transition:
      background-color 180ms ease,
      border-color 180ms ease;
  }

  .tailwind-item:hover {
    background: rgba(36, 72, 122, 0.08);
  }

  .tailwind-item:hover > b {
    border-color: rgba(48, 216, 169, 0.48);
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .tailwind-list {
    margin-top: 36px;
    border-radius: 20px;
  }

  .tailwind-item {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 22px;
    padding: 26px 24px;
  }

  .tailwind-item strong {
    font-size: 1.15rem;
  }

  .tailwind-item p {
    font-size: 0.98rem;
    line-height: 1.65;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .tailwind-list {
    width: 100%;
    margin: 28px auto 0;

    border-radius: 18px;
  }

  .tailwind-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 14px;

    padding: 24px 18px;

    text-align: center;
  }

  .tailwind-item > b {
    min-width: 58px;
    min-height: 32px;

    margin: 0 auto;

    padding: 7px 12px;

    font-size: 0.7rem;
  }

  .tailwind-item > div {
    width: 100%;
    max-width: 420px;

    margin: 0 auto;

    text-align: center;
  }

  .tailwind-item strong {
    margin: 0 auto 9px;

    font-size: 1.08rem;
    line-height: 1.3;
    text-align: center;
  }

  .tailwind-item p {
    width: 100%;
    max-width: 390px;

    margin: 0 auto;

    font-size: 0.93rem;
    line-height: 1.6;
    text-align: center;
  }
  
  
  .manifesto-bullet span {
  
    margin-left: auto;
    margin-right: auto;
}


}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {
  .tailwind-item {
    padding: 21px 14px;
  }

  .tailwind-item strong {
    font-size: 1rem;
  }

  .tailwind-item p {
    font-size: 0.88rem;
    line-height: 1.58;
  }
}


/* =========================================================
   MARKET CONTEXT / MARKET OPPORTUNITY
   Desktop + Tablet + Mobile
   ========================================================= */

#market-opportunity {
  width: 100%;
  padding: 90px 0;
  overflow: hidden;
}

#market-opportunity > .container {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}


/* ---------------------------------------------------------
   SECTION HEADING
   --------------------------------------------------------- */

#market-opportunity .section-head {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 56px;
  text-align: center;
}

#market-opportunity .section-head .eyebrow {
  display: block;
  margin: 0 auto 20px;

  color: #3ad9ad;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
}

#market-opportunity .section-head h2 {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;

  color: #f6f8fc;

  font-size: clamp(2.5rem, 4.4vw, 4.75rem);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.045em;

  text-align: center;
  text-wrap: balance;
}

#market-opportunity .section-head h2 .gradient-text {
  background: linear-gradient(90deg, #d9efff 0%, #35d9a7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ---------------------------------------------------------
   MARKET GRID
   --------------------------------------------------------- */

.about-market-grid {
  width: 100%;
  max-width: 1080px;

  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 20px;

  align-items: stretch;
}


/*
   Supports either:
   .about-market-card
   OR direct children if old HTML has no card class
*/
.about-market-grid > *,
.about-market-card {
  min-width: 0;
}


/* ---------------------------------------------------------
   INDIVIDUAL MARKET CARDS
   --------------------------------------------------------- */

.about-market-grid > div,
.about-market-grid > article,
.about-market-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 250px;

  padding: 30px 30px 32px;

  background:
    linear-gradient(
      145deg,
      rgba(20, 35, 57, 0.92),
      rgba(10, 18, 30, 0.96)
    );

  border: 1px solid rgba(75, 121, 190, 0.25);
  border-radius: 24px;

  overflow: hidden;
}


/* subtle highlight */
.about-market-grid > div::before,
.about-market-grid > article::before,
.about-market-card::before {
  content: "";

  position: absolute;
  inset: 0 auto auto 0;

  width: 110px;
  height: 2px;

  background: linear-gradient(
    90deg,
    #35d9a7,
    rgba(63, 129, 255, 0)
  );
}


/* ---------------------------------------------------------
   EYEBROW / LABEL
   --------------------------------------------------------- */

.about-market-grid .eyebrow,
.about-market-card .eyebrow {
  margin: 0 0 22px;

  color: #3ad9ad;

  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;

  letter-spacing: 0.2em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------
   LARGE NUMBERS
   --------------------------------------------------------- */

.about-market-grid strong,
.about-market-card strong {
  display: block;

  margin: 0 0 10px;

  color: #f7f9fd;

  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 760;
  line-height: 1;

  letter-spacing: -0.035em;
}


/* ---------------------------------------------------------
   CARD TITLES
   --------------------------------------------------------- */

.about-market-grid h3,
.about-market-card h3 {
  margin: 0 0 12px;

  color: #f4f7fc;

  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
}


/* ---------------------------------------------------------
   BODY TEXT
   --------------------------------------------------------- */

.about-market-grid p,
.about-market-card p {
  width: 100%;
  max-width: 100%;

  margin: 0;

  color: #9ba9bd;

  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  font-weight: 400;
  line-height: 1.7;

  overflow-wrap: break-word;
}


/* prevent values like $28B + text joining */
.about-market-grid strong + p,
.about-market-grid strong + span,
.about-market-card strong + p,
.about-market-card strong + span {
  display: block;
  margin-top: 10px;
}


/* ---------------------------------------------------------
   OPTIONAL FULL-WIDTH FINAL "ONE LAYER" ITEM
   --------------------------------------------------------- */

.about-market-grid > div:last-child:nth-child(odd),
.about-market-grid > article:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  #market-opportunity {
    padding: 68px 0;
  }

  #market-opportunity > .container {
    width: min(100% - 36px, 760px);
  }

  #market-opportunity .section-head {
    margin-bottom: 38px;
  }

  #market-opportunity .section-head h2 {
    max-width: 720px;

    font-size: clamp(2.2rem, 6vw, 3.5rem);
    line-height: 1.05;
  }

  .about-market-grid {
    max-width: 720px;
    gap: 16px;
  }

  .about-market-grid > div,
  .about-market-grid > article,
  .about-market-card {
    min-height: 230px;
    padding: 26px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  #market-opportunity {
    padding: 48px 0 !important;
  }

  #market-opportunity > .container {
    width: calc(100% - 30px) !important;
    max-width: 480px;

    margin-inline: auto;
  }


  /* Heading */
  #market-opportunity .section-head {
    margin: 0 auto 30px !important;
    text-align: center !important;
  }

  #market-opportunity .section-head .eyebrow {
    margin-bottom: 14px !important;

    font-size: 0.7rem !important;
    letter-spacing: 0.18em !important;

    text-align: center !important;
  }

  #market-opportunity .section-head h2 {
    max-width: 440px !important;

    margin-inline: auto !important;

    font-size: clamp(2rem, 9vw, 2.7rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.038em !important;

    text-align: center !important;
  }


  /* One card per row */
  .about-market-grid {
    width: 100% !important;
    max-width: 460px !important;

    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 14px !important;
  }


  .about-market-grid > div,
  .about-market-grid > article,
  .about-market-card {
    grid-column: auto !important;

    width: 100% !important;
    min-height: 0 !important;

    padding: 24px 20px !important;

    border-radius: 18px !important;

    align-items: center !important;

    text-align: center !important;
  }


  /* Labels centered */
  .about-market-grid .eyebrow,
  .about-market-card .eyebrow {
    width: 100%;

    margin: 0 auto 16px !important;

    font-size: 0.68rem !important;

    text-align: center !important;
  }


  /* Numbers */
  .about-market-grid strong,
  .about-market-card strong {
    width: 100%;

    margin: 0 auto 10px !important;

    font-size: 2.1rem !important;
    line-height: 1 !important;

    text-align: center !important;
  }


  /* Card headings */
  .about-market-grid h3,
  .about-market-card h3 {
    width: 100%;
    max-width: 390px;

    margin: 0 auto 10px !important;

    font-size: 1.1rem !important;
    line-height: 1.3 !important;

    text-align: center !important;
  }


  /* Paragraphs centered on this section */
  .about-market-grid p,
  .about-market-card p {
    width: 100%;
    max-width: 390px;

    margin-inline: auto !important;

    font-size: 0.94rem !important;
    line-height: 1.62 !important;

    text-align: center !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
  }


  /* specifically prevent text joining $ values */
  .about-market-grid strong + p,
  .about-market-grid strong + span,
  .about-market-card strong + p,
  .about-market-card strong + span {
    display: block !important;

    width: 100% !important;

    margin-top: 9px !important;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  #market-opportunity > .container {
    width: calc(100% - 24px) !important;
  }

  #market-opportunity .section-head h2 {
    font-size: 1.9rem !important;
  }

  .about-market-grid > div,
  .about-market-grid > article,
  .about-market-card {
    padding: 21px 16px !important;
  }

  .about-market-grid strong,
  .about-market-card strong {
    font-size: 1.9rem !important;
  }

  .about-market-grid p,
  .about-market-card p {
    font-size: 0.9rem !important;
    line-height: 1.58 !important;
  }
}

.quote-panel>p:not(.eyebrow) {
 
    text-align: center !important;
}