*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f8fc;color:#0d1932;font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif}a{text-decoration:none;color:inherit}
header{height:70px;background:#fff;border-bottom:1px solid #dce5ef}.nav{height:100%;max-width:1450px;margin:auto;padding:0 28px;display:flex;align-items:center}.logo{font-size:23px;font-weight:850;letter-spacing:-1px;display:flex;align-items:center;gap:9px}.logo>span:last-child>span{color:#2864e8}.mark{width:29px;height:29px;background:#111b33;color:#2864e8;border-radius:7px;display:grid;place-items:center;font-size:15px}nav{margin-left:auto;display:flex;gap:38px;color:#697a92;font-size:14px;font-weight:700}.cta{margin-left:35px;background:#2864e8;color:#fff;border-radius:8px;padding:14px 19px;font-size:11px;font-weight:850}
.hero{background:linear-gradient(120deg,#f9fbff,#f1f6fd);padding:50px 30px 40px}.hero{display:grid;grid-template-columns:minmax(300px,31%) minmax(700px,69%);gap:25px;max-width:1500px;margin:auto}.hero-left{padding:8px 0 0 10px}.eyebrow{font-size:10px;font-weight:850;letter-spacing:.14em;color:#7287a2}.hero-left .eyebrow{color:#2864e8}.hero-left h1{font-size:58px;line-height:1.01;letter-spacing:-3px;margin:17px 0 21px}.hero h1 em{font-style:normal;color:#2864e8}.hero-left>p{font-size:14px;line-height:1.8;color:#586d89;max-width:440px}.buttons{display:flex;gap:12px;margin-top:24px}.primary,.secondary{padding:14px 17px;border-radius:7px;font-size:10px;font-weight:850}.primary{background:#2864e8;color:#fff}.secondary{background:#fff;border:1px solid #cbd8e7}.tags{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:32px;color:#8393aa;font-size:8px;font-weight:850;letter-spacing:.08em}.tags strong{color:#2864e8;border:1px solid #cbd9ea;border-radius:5px;padding:7px 9px}
.features{background:rgba(255,255,255,.7);border:1px solid #d9e4ef;border-radius:14px;padding:22px;box-shadow:0 16px 40px rgba(38,70,108,.08)}.features-head{display:flex;justify-content:space-between;border-bottom:1px solid #e2e9f1;padding:0 3px 17px;margin-bottom:16px}.features-head small{font-size:8px;font-weight:850;letter-spacing:.13em;color:#8395ad}.features-head h2{font-size:22px;margin:6px 0 0;letter-spacing:-.6px}.features-head p{max-width:300px;color:#71829a;font-size:10px;line-height:1.6}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.card{background:#fff;border:1px solid #d8e3ef;border-radius:10px;padding:21px 17px;min-height:350px;display:flex;flex-direction:column}.top{display:flex;align-items:center;gap:9px}.top i{font-style:normal;width:32px;height:32px;border-radius:50%;background:#2864e8;color:#fff;display:grid;place-items:center;font-weight:850;font-size:14px}.green .top i{background:#20a764}.purple .top i{background:#7051e7}.orange .top i{background:#f28a38}.top small{font-size:7px;font-weight:850;letter-spacing:.09em;color:#8a9ab0}.card h3{font-size:21px;line-height:1.17;letter-spacing:-.5px;margin:19px 0 12px}.card p{font-size:11px;line-height:1.7;color:#60738e;margin:0}.labels{display:flex;flex-wrap:wrap;gap:5px;margin-top:20px}.labels span{border:1px solid #d1deec;border-radius:5px;padding:6px 7px;font-size:7px;font-weight:850;color:#2864e8}.green .labels span{color:#198a55}.purple .labels span{color:#7051e7}.orange .labels span{color:#e77b2b}.bottom{margin-top:auto;border-top:1px solid #edf1f5;padding-top:16px;color:#2864e8;font-size:9px;font-weight:850}
.how,.why{background:#fff;border-top:1px solid #e0e8f1}.wrap{max-width:1200px;margin:auto;padding:65px 30px}.how h2,.why h2{font-size:37px;letter-spacing:-1.8px;margin:9px 0 27px}.how h2 em,.why h2 em{font-style:normal;color:#2864e8}.steps{display:flex;align-items:center;gap:14px}.steps>div{flex:1;padding:20px;border:1px solid #dce5ef;border-radius:9px;background:#fbfdff}.steps>div>b{color:#2864e8;font-size:10px}.steps h3{margin:8px 0 5px;font-size:17px}.steps p{margin:0;color:#687b95;font-size:11px;line-height:1.6}.steps>strong{color:#9aabba}.why{background:#f5f8fc}.why p{max-width:700px;color:#667993;font-size:14px;line-height:1.8}.free{max-width:1200px;margin:0 auto 45px;background:#101d38;color:#fff;border-radius:9px;padding:18px 21px;display:flex;align-items:center}.free div{flex:1}.free b{display:block;font-size:12px}.free span{font-size:9px;color:#c2cfe1}.free>a{background:#2864e8;border-radius:6px;padding:12px 15px;font-size:9px;font-weight:850}footer{min-height:70px;background:#fff;border-top:1px solid #dce5ef;padding:0 30px;display:flex;align-items:center;gap:22px;color:#8291a7;font-size:9px}footer .logo{font-size:18px}footer .mark{width:25px;height:25px}footer>a:last-child{margin-left:auto;color:#2864e8;font-weight:850}
@media(max-width:1150px){.hero{display:block}.hero-left{padding:0 0 35px}.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){header{height:auto}.nav{padding:12px 15px;flex-wrap:wrap;gap:12px}nav{order:3;width:100%;justify-content:space-between;gap:8px;font-size:10px}.cta{margin-left:auto;padding:11px 12px;font-size:9px}.hero{padding:35px 15px 25px}.hero-left h1{font-size:46px}.features{padding:13px}.features-head{display:block}.cards{grid-template-columns:1fr}.card{min-height:0}.wrap{padding:50px 18px}.steps{display:block}.steps>div{margin-bottom:9px}.steps>strong{display:block;text-align:center;margin:5px}.free{margin:0 10px 30px;display:block}.free>a{display:inline-block;margin-top:13px}footer{padding:12px 15px;flex-wrap:wrap}footer small{display:none}}

/* Requested label improvements */
.timeframe-labels span,
.breakout-labels span{
  font-size:10px;
  padding:8px 10px;
  letter-spacing:.01em;
}
.timeframe-labels{
  gap:7px;
}
.breakout-labels{
  gap:7px;
}
.breakout-labels span{
  font-size:9px;
}
@media(max-width:700px){
  .timeframe-labels span,
  .breakout-labels span{
    font-size:9px;
    padding:7px 9px;
  }
}

/* Slightly larger typography for feature cards */
.feature-card h3{font-size:23px}
.feature-card p{font-size:12px;line-height:1.75}
.top small{font-size:8px}
.labels span{font-size:9px;padding:7px 9px}
.card-footer{font-size:10px}
@media(max-width:700px){
  .feature-card h3{font-size:22px}
  .feature-card p{font-size:12px}
  .labels span{font-size:9px}
}

/* Final larger, clearer card typography */
.card h3,.feature-card h3{font-size:26px;line-height:1.15;letter-spacing:-.65px}
.card p,.feature-card p{font-size:14px;line-height:1.72}
.top small,.card-kicker{font-size:9px;letter-spacing:.08em}
.labels span{font-size:10px;padding:8px 10px}
.card-footer{font-size:11px}
.features-head h2{font-size:24px}
.features-head p{font-size:12px}
@media(max-width:700px){
  .card h3,.feature-card h3{font-size:24px}
  .card p,.feature-card p{font-size:13px}
  .labels span{font-size:9px;padding:7px 9px}
}

/* Research card: business-growth factors */
.research-labels{gap:6px}
.research-labels span{font-size:9px;padding:7px 8px}
@media(max-width:700px){
  .research-labels span{font-size:8px;padding:6px 7px}
}

.research-labels{gap:5px}
.research-labels span{font-size:9px;padding:7px 7px}
@media(max-width:700px){
  .research-labels span{font-size:8px;padding:6px 7px}
}

/* CLEAR / ATTRACTIVE TYPOGRAPHY */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.feature-card h3{
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
  font-size:28px;
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.7px;
  color:#0b1730;
}
.feature-card p{
  font-size:15px;
  line-height:1.75;
  font-weight:400;
  color:#526985;
}
.top small,.card-kicker{
  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;
  color:#71839c;
}
.labels{
  gap:8px;
}
.labels span{
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:.01em;
  padding:9px 11px;
  background:#fff;
  border-radius:6px;
}
.timeframe-labels span{
  font-size:12px;
  padding:10px 13px;
}
.breakout-labels span{
  font-size:10px;
  padding:9px 10px;
}
.card-footer{
  font-size:11px;
  font-weight:800;
  letter-spacing:.01em;
}
@media(max-width:700px){
  .feature-card h3{font-size:25px}
  .feature-card p{font-size:14px}
  .timeframe-labels span{font-size:10px;padding:8px 10px}
  .breakout-labels span{font-size:9px;padding:8px 9px}
}

/* EXTRA-LARGE, HIGH-READABILITY TYPOGRAPHY */
.feature-card h3{font-size:31px;line-height:1.08;font-weight:850;letter-spacing:-.85px}
.feature-card p{font-size:16px;line-height:1.78;font-weight:450;color:#4f6583}
.top small,.card-kicker{font-size:11px;font-weight:850;letter-spacing:.085em}
.labels{gap:9px}
.labels span{font-size:12px;font-weight:850;padding:10px 12px;letter-spacing:.015em}
.timeframe-labels span{font-size:13px;padding:10px 14px}
.breakout-labels span{font-size:11px;padding:10px 11px}
.card-footer{font-size:12px;font-weight:850}
@media(max-width:1150px){
.feature-card h3{font-size:29px}
.feature-card p{font-size:15px}
}
@media(max-width:700px){
.feature-card h3{font-size:27px}
.feature-card p{font-size:14px}
.labels span{font-size:10px;padding:8px 9px}
.timeframe-labels span{font-size:11px;padding:8px 10px}
.breakout-labels span{font-size:10px;padding:8px 9px}
}

.primary{display:inline-flex;align-items:center;justify-content:center;min-width:320px;min-height:64px;padding:18px 28px;font-size:16px;font-weight:850;border-radius:10px;box-shadow:0 10px 25px rgba(40,100,232,.22)}
.primary b{font-size:22px;margin-left:12px}.secondary{min-height:64px;padding:18px 24px;font-size:14px;font-weight:800;border-radius:10px}
@media(max-width:700px){.primary,.secondary{width:100%;min-width:0}.buttons{width:100%;flex-wrap:wrap}}


/* ===== FINAL LANDING PAGE CTA ===== */
.buttons{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.buttons .primary{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:340px;
  min-height:70px;
  padding:20px 30px!important;
  background:#2864e8!important;
  color:#fff!important;
  border:0!important;
  border-radius:11px!important;
  font-size:17px!important;
  font-weight:850!important;
  letter-spacing:.01em;
  box-shadow:0 12px 30px rgba(40,100,232,.28);
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
}
.buttons .primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(40,100,232,.34)}
.buttons .secondary{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:145px;
  min-height:70px;
  padding:20px 24px!important;
  border:1px solid #cbd8e8!important;
  background:#fff!important;
  color:#17233a!important;
  border-radius:11px!important;
  font-size:14px!important;
  font-weight:800!important;
  cursor:pointer;
}


.seo-research{background:#fff;border-top:1px solid #dce5ef}
.seo-wrap{max-width:1250px;margin:0 auto;padding:78px 30px 90px}
.seo-wrap>h2{font-size:40px;line-height:1.1;letter-spacing:-1.5px;margin:10px 0 15px;color:#0c1932}
.seo-lead{max-width:900px;font-size:16px;line-height:1.8;color:#5c718d;margin:0}
.seo-keyword-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
.seo-keyword-grid article{padding:24px;background:#f8fbff;border:1px solid #d9e4ef;border-radius:12px}
.seo-keyword-grid h3{font-size:19px;line-height:1.25;margin:0 0 9px;color:#13213b}
.seo-keyword-grid p{font-size:13px;line-height:1.7;color:#60758f;margin:0}
.seo-faq{margin-top:52px;padding-top:38px;border-top:1px solid #dce5ef}
.seo-faq>h2{font-size:30px;letter-spacing:-.8px;margin:0 0 18px;color:#0c1932}
.seo-faq details{border-bottom:1px solid #dce5ef}
.seo-faq summary{cursor:pointer;list-style:none;padding:18px 0;font-size:16px;font-weight:800;color:#16233c}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary:after{content:"+";float:right;color:#2864e8;font-size:20px}
.seo-faq details[open] summary:after{content:"−"}
.seo-faq details p{max-width:900px;margin:0 0 18px;color:#5d728d;font-size:14px;line-height:1.7}
@media(max-width:900px){.seo-keyword-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.seo-wrap{padding:58px 18px 70px}.seo-wrap>h2{font-size:32px}.seo-keyword-grid{grid-template-columns:1fr}}
/* =========================================================
   SuperCharts Logo — LARGE HEADER VERSION
   Uses: img/supercharts-nse-logo.png
   ========================================================= */

header{
  height:96px;
}

header .nav{
  min-height:96px;
  gap:24px;
}

header .nav > .logo,
header .nav > a.logo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  width:auto;
  height:96px;
  gap:0;
  font-size:0;
  letter-spacing:0;
  line-height:0;
  overflow:hidden;
}

header .nav > .logo .site-logo-image,
header .nav > a.logo .site-logo-image{
  display:block;
  width:330px;
  height:auto;
  max-width:330px;
  max-height:88px;
  object-fit:contain;
  object-position:left center;
}

header .nav nav{
  gap:30px;
}

footer .logo{
  display:flex;
  align-items:center;
  height:60px;
  width:auto;
  font-size:0;
  letter-spacing:0;
  line-height:0;
}

footer .logo .site-logo-image,
footer a.logo .site-logo-image{
  display:block;
  width:225px;
  height:auto;
  max-width:225px;
  max-height:56px;
  object-fit:contain;
  object-position:left center;
}

@media(max-width:1150px){
  header{
    height:88px;
  }

  header .nav{
    min-height:88px;
  }

  header .nav > .logo,
  header .nav > a.logo{
    height:88px;
  }

  header .nav > .logo .site-logo-image,
  header .nav > a.logo .site-logo-image{
    width:290px;
    max-width:290px;
    max-height:82px;
  }
}

@media(max-width:700px){
  header{
    height:auto;
  }

  header .nav{
    min-height:0;
  }

  header .nav > .logo,
  header .nav > a.logo{
    height:72px;
  }

  header .nav > .logo .site-logo-image,
  header .nav > a.logo .site-logo-image{
    width:250px;
    max-width:250px;
    max-height:68px;
  }

  footer .logo .site-logo-image,
  footer a.logo .site-logo-image{
    width:195px;
    max-width:195px;
    max-height:50px;
  }
}


/* =========================================================
   SUPERCHARTS — CONSOLIDATED SECTION LAYOUT
   ========================================================= */

.feature-details{
    min-height:0;
    height:auto;
    background:linear-gradient(180deg,#f7faff 0%,#ffffff 42%,#f7faff 100%);
    border-top:1px solid #dce6f1;
    padding:38px 0;
}

.details-wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 32px;
}

.details-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    padding-bottom:22px;
    margin-bottom:22px;
    border-bottom:1px solid #dce5ef;
}

.details-top h2{
    font-size:44px;
    line-height:1.06;
    letter-spacing:-1.7px;
    margin:7px 0 10px;
    color:#0b1730;
}

.details-top h2 em{
    font-style:normal;
    color:#2864e8;
}

.details-top p{
    max-width:780px;
    margin:0;
    color:#5c718d;
    font-size:15px;
    line-height:1.7;
}

.back-home{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    padding:11px 16px;
    border:1px solid #cbd8e7;
    border-radius:8px;
    background:#fff;
    color:#2864e8;
    font-size:12px;
    font-weight:850;
}

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

.detail-card{
    position:relative;
    overflow:hidden;
    min-height:260px;
    padding:24px;
    background:#fff;
    border:1px solid #d9e4ef;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(35,67,105,.06);
}

.detail-card:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:4px;
    height:100%;
    background:#2864e8;
}

.detail-card.green:before{background:#1ca566}
.detail-card.purple:before{background:#7051e7}
.detail-card.orange:before{background:#ef812e}
.detail-card.dark:before{background:#7ea8ff}

.detail-card>b{
    font-size:12px;
    letter-spacing:.12em;
    color:#2864e8;
}

.detail-card.green>b{color:#1b9860}
.detail-card.purple>b{color:#7051e7}
.detail-card.orange>b{color:#e77f2c}
.detail-card.dark>b{color:#9fc0ff}

.detail-card h3{
    font-size:26px;
    line-height:1.15;
    letter-spacing:-.65px;
    margin:10px 0 11px;
    color:#0c1932;
}

.detail-card p{
    font-size:14px;
    line-height:1.68;
    color:#5b708c;
    margin:0;
    max-width:620px;
}

.detail-card ul{
    margin:14px 0 0;
    padding-left:20px;
    color:#4d6480;
    font-size:13px;
    line-height:1.8;
}

.detail-card.dark{
    background:#101d38;
    color:#fff;
    border-color:#101d38;
}

.detail-card.dark h3{color:#fff}
.detail-card.dark p,
.detail-card.dark ul{color:#c7d3e3}


/* =========================================================
   READY-MADE SCREENERS — COMPACT PROFESSIONAL RHYTHM
   ========================================================= */

.no-code-section{
    padding:38px 0;
    background:#f7f9fc;
}

.no-code-section > .details-wrap{
    padding-top:0;
    padding-bottom:0;
}

.no-code-section .details-top{
    margin-bottom:18px;
    padding-bottom:0;
    border-bottom:0;
}

.no-code-section .details-top h2{
    margin-top:5px;
    margin-bottom:9px;
}

.no-code-section .details-top p{
    margin:0;
}

.no-code-grid{
    margin-top:18px;
    gap:14px;
}

.no-code-grid article{
    padding:18px;
}

.no-code-grid h3{
    margin:0 0 7px;
}

.no-code-grid p{
    margin:0;
    line-height:1.5;
}

.no-code-callout{
    margin-top:14px;
    padding:14px 18px;
}


/* =========================================================
   SCROLL MOTION
   ========================================================= */

.sc-js .sc-reveal{
    opacity:0;
    transform:translate3d(0,34px,0);
    transition:
        opacity .75s cubic-bezier(.22,1,.36,1),
        transform .75s cubic-bezier(.22,1,.36,1);
    will-change:opacity,transform;
}

.sc-js .sc-reveal.sc-visible{
    opacity:1;
    transform:translate3d(0,0,0);
}

.sc-js .sc-from-left{
    opacity:0;
    transform:translate3d(-28px,0,0);
    transition:
        opacity .7s cubic-bezier(.22,1,.36,1),
        transform .7s cubic-bezier(.22,1,.36,1);
}

.sc-js .sc-from-left.sc-visible{
    opacity:1;
    transform:translate3d(0,0,0);
}

.sc-js .sc-from-right{
    opacity:0;
    transform:translate3d(28px,0,0);
    transition:
        opacity .7s cubic-bezier(.22,1,.36,1),
        transform .7s cubic-bezier(.22,1,.36,1);
}

.sc-js .sc-from-right.sc-visible{
    opacity:1;
    transform:translate3d(0,0,0);
}

.sc-js .sc-delay-1{transition-delay:.06s}
.sc-js .sc-delay-2{transition-delay:.14s}
.sc-js .sc-delay-3{transition-delay:.22s}
.sc-js .sc-delay-4{transition-delay:.30s}
.sc-js .sc-delay-5{transition-delay:.38s}

.sc-js .sc-section-label{
    opacity:0;
    transform:translate3d(-18px,0,0);
    transition:
        opacity .6s ease,
        transform .6s cubic-bezier(.22,1,.36,1);
}

.sc-js .sc-section-label.sc-visible{
    opacity:1;
    transform:translate3d(0,0,0);
}


/* =========================================================
   CARD MICRO-INTERACTION
   ========================================================= */

.sc-js .card,
.sc-js .no-code-grid article,
.sc-js .detail-card,
.sc-js .seo-keyword-grid article{
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.sc-js .card:hover,
.sc-js .no-code-grid article:hover,
.sc-js .detail-card:hover,
.sc-js .seo-keyword-grid article:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 32px rgba(35,67,105,.10);
}


/* =========================================================
   TOP SCROLL PROGRESS
   ========================================================= */

.sc-scroll-progress{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:3px;
    z-index:9999;
    pointer-events:none;
}

.sc-scroll-progress span{
    display:block;
    width:0;
    height:100%;
    background:#2864e8;
}


/* =========================================================
   RIGHT-SIDE SECTION INDEX
   ========================================================= */

.sc-side-index{
    position:fixed;
    right:22px;
    top:50%;
    z-index:1000;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:10px;
}

.sc-side-index button{
    position:relative;
    width:7px;
    height:7px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#c7d3e2;
    cursor:pointer;
    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.sc-side-index button:hover,
.sc-side-index button.sc-active{
    background:#2864e8;
    transform:scale(1.65);
    box-shadow:0 0 0 4px rgba(40,100,232,.10);
}

.sc-side-index button span{
    position:absolute;
    right:18px;
    top:-6px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    color:#61758f;
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
    transition:opacity .2s ease;
}

.sc-side-index button:hover span,
.sc-side-index button.sc-active span{
    opacity:1;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

    .details-top{
        display:block;
    }

    .back-home{
        margin-top:16px;
    }

    .detail-grid{
        grid-template-columns:1fr;
    }

    .sc-side-index{
        display:none;
    }
}

@media(max-width:800px){

    .feature-details{
        padding:30px 0;
    }

    .no-code-section{
        padding:30px 0;
    }

    .details-wrap{
        padding:0 18px;
    }

    .details-top h2{
        font-size:35px;
    }

    .detail-card h3{
        font-size:24px;
    }
}

@media(max-width:700px){

    .buttons{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
    }

    .buttons .primary,
    .buttons .secondary{
        width:100%;
        min-width:0;
    }

    .detail-card p{
        font-size:14px;
    }
}

@media(max-width:520px){

    .feature-details,
    .no-code-section{
        padding:24px 0;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .sc-js .sc-reveal,
    .sc-js .sc-from-left,
    .sc-js .sc-from-right,
    .sc-js .sc-section-label{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

    .sc-side-index,
    .sc-scroll-progress{
        display:none !important;
    }
}

/* =========================================================
   SUPERCHARTS IN ACTION — RESEARCH VIEW
   Restored research preview styling
   ========================================================= */

.screenshot-block{
    margin-top:35px;
    padding:28px;
    border:1px solid #d8e3ef;
    border-radius:13px;
    background:#f5f8fc;
    display:grid;
    grid-template-columns:34% 66%;
    gap:25px;
    align-items:center;
}

.screenshot-block h3{
    font-size:27px;
    line-height:1.18;
    margin:10px 0 12px;
    color:#0c1932;
}

.screenshot-block p{
    font-size:14px;
    line-height:1.7;
    color:#61758f;
    margin:0;
}

.screen-preview{
    background:#fff;
    border:1px solid #ccd9e8;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 14px 35px rgba(35,65,100,.12);
}

.browser{
    height:28px;
    border-bottom:1px solid #e5ebf2;
    color:#91a0b2;
    font-size:8px;
    font-weight:800;
    letter-spacing:.08em;
    padding:9px 18px 0;
}

.screen-preview h4{
    font-size:18px;
    margin:17px 18px 13px;
    color:#0c1932;
}

.preview-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
    padding:0 18px;
}

.preview-grid div{
    height:105px;
    padding:11px;
    border:1px solid #dbe5ef;
    border-radius:7px;
    font-size:10px;
    font-weight:850;
    color:#2864e8;
    background:linear-gradient(180deg,#fff,#f7fbff);
}

.preview-grid small{
    color:#8b9bae;
    font-size:8px;
}

.preview-chart{
    height:34px;
    margin:12px 18px 18px;
    padding-top:10px;
    border-top:1px solid #e0e7ef;
    color:#7588a0;
    font-size:8px;
    font-weight:800;
}

/* Research-view reveal animation */
.sc-js .screenshot-block{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease,
                transform .7s cubic-bezier(.22,.61,.36,1);
}

.sc-js .screenshot-block.sc-visible{
    opacity:1;
    transform:translateY(0);
}

@media(max-width:800px){
    .screenshot-block{
        grid-template-columns:1fr;
        padding:20px;
        gap:20px;
    }

    .screenshot-block h3{
        font-size:24px;
    }

    .preview-grid{
        grid-template-columns:1fr;
    }

    .preview-grid div{
        height:75px;
    }
}

@media(prefers-reduced-motion:reduce){
    .sc-js .screenshot-block{
        opacity:1;
        transform:none;
        transition:none;
    }
}


/* =========================================================
   FINAL SECTION SEPARATION
   ========================================================= */

/* Make every major content block read as a separate section. */
section.no-code-section{
    position:relative;
    background:#f7f9fc !important;
    border-top:1px solid #dce5ef;
    border-bottom:1px solid #dce5ef;
    padding:64px 0 !important;
    margin:0 !important;
}

section.no-code-section > .details-wrap{
    max-width:1250px;
    margin:0 auto;
    padding:0 30px !important;
}

section.feature-details{
    position:relative;
    background:#ffffff !important;
    border-top:1px solid #dce5ef;
    border-bottom:1px solid #dce5ef;
    min-height:0 !important;
    height:auto !important;
    padding:64px 0 !important;
    margin:0 !important;
}

section.feature-details > .details-wrap{
    max-width:1250px;
    margin:0 auto;
    padding:0 30px !important;
}

/* Research preview gets its own visual frame. */
section.feature-details .screenshot-block{
    margin-top:34px;
    background:#f5f8fc;
    border:1px solid #d7e2ef;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(31,62,100,.06);
}

/* How It Works */
section.how{
    position:relative;
    background:#ffffff !important;
    border-top:1px solid #dce5ef;
    border-bottom:1px solid #dce5ef;
    padding:70px 7% !important;
    margin:0 !important;
}

section.how .wrap{
    max-width:1250px;
    margin:0 auto;
    padding:0 30px;
}

section.how h2{
    font-size:42px;
    line-height:1.12;
    letter-spacing:-1.5px;
    margin:10px 0 28px;
}

section.how .steps{
    max-width:1250px;
}

section.how .steps > div{
    background:#fbfdff;
    border:1px solid #d7e2ef;
    border-radius:12px;
    padding:26px;
    box-shadow:0 5px 18px rgba(30,60,100,.035);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

section.how .steps > div:hover{
    transform:translateY(-3px);
    border-color:#bfcfe3;
    box-shadow:0 12px 28px rgba(30,60,100,.08);
}

section.how .steps > div > b{
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    color:#2864e8;
}

section.how .steps h3{
    font-size:21px;
    line-height:1.25;
    margin:11px 0 7px;
}

section.how .steps p{
    font-size:15px;
    line-height:1.65;
    color:#5d7390;
}

/* Why SuperCharts */
section.why{
    position:relative;
    background:#f5f8fc !important;
    border-top:1px solid #dce5ef;
    border-bottom:1px solid #dce5ef;
    padding:70px 7% !important;
    margin:0 !important;
}

section.why .wrap{
    max-width:1250px;
    margin:0 auto;
    padding:0 30px;
}

section.why h2{
    max-width:1150px;
    font-size:42px;
    line-height:1.14;
    letter-spacing:-1.6px;
    margin:10px 0 18px;
}

section.why p{
    max-width:850px;
    font-size:17px !important;
    line-height:1.75 !important;
    color:#60758f;
}

/* Better supporting typography in the screener section. */
section.no-code-section .details-top p{
    font-size:17px !important;
    line-height:1.75 !important;
}

section.no-code-section .no-code-grid h3{
    font-size:19px !important;
}

section.no-code-section .no-code-grid p{
    font-size:15px !important;
    line-height:1.65 !important;
}

/* Visual divider between sections without excessive whitespace. */
section.no-code-section::after,
section.feature-details::after,
section.how::after,
section.why::after{
    content:"";
    display:block;
    height:1px;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:#dce5ef;
}

/* Mobile */
@media(max-width:800px){
    section.no-code-section,
    section.feature-details{
        padding:50px 0 !important;
    }

    section.no-code-section > .details-wrap,
    section.feature-details > .details-wrap{
        padding-left:18px !important;
        padding-right:18px !important;
    }

    section.how,
    section.why{
        padding:55px 18px !important;
    }

    section.how .wrap,
    section.why .wrap{
        padding:0;
    }

    section.how h2,
    section.why h2{
        font-size:32px;
    }

    section.how .steps > div{
        padding:22px;
    }

    section.why p{
        font-size:15px !important;
    }
}

@media(max-width:520px){
    section.no-code-section,
    section.feature-details{
        padding:42px 0 !important;
    }
}