/* Theme Detector page redesign — layout modelled on shopify.com/compare/sitespeed,
   in rajimulislamjoy.com branding (near-black, white pills, Bricolage Grotesque, teal/violet glow). */

.std-rd,.std-rd-content,.std-cta--footer{
  --rd-black:#0f0f0f;--rd-black2:#171717;--rd-black3:#1f1f1f;--rd-line-dk:#2c2c2c;
  --rd-ink:#0f0f0f;--rd-ink2:#52525b;--rd-ink3:#8a8a92;--rd-line:#e6e6e3;--rd-paper:#ffffff;--rd-paper2:#f5f5f2;
  --rd-teal:#00b8a9;--rd-teal-ink:#00786f;--rd-violet:#8b5cf6;
  --rd-head:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --std-accent:#00786f;--std-accent-soft:#dff4f1;--std-accent-ink:#fff;
}
/* ---------- full-bleed bands ---------- */
.std-root.std-rd,.std-content.std-rd-content,.std-cta.std-cta--footer{
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;
}
.std-root.std-rd{background:var(--rd-paper)}
.std-rd-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.std-rd h1,.std-rd h2,.std-rd h3,.std-rd-content h2,.std-rd-content h3,.std-cta--footer h2{font-family:var(--rd-head)!important}

/* ---------- hero ---------- */
.std-rd .std-rd-hero{
  position:relative;overflow:hidden;text-align:left;border-radius:0;color:#fff;
  padding:72px 0 64px;
  background:
    radial-gradient(ellipse closest-side at 82% 38%,rgba(0,184,169,.20),transparent 100%),
    radial-gradient(ellipse closest-side at 66% 70%,rgba(139,92,246,.14),transparent 100%),
    var(--rd-black);
}
.std-rd-announce{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;padding:6px 14px 6px 10px;
  font-size:13px;font-weight:500;color:#e8e8e8;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:999px
}
.std-rd .std-dot{background:var(--rd-teal);box-shadow:0 0 0 4px rgba(0,184,169,.22)}
.std-rd-kicker{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#bdbdbd}
.std-rd .std-h1{
  max-width:17ch;margin:0 0 22px;color:#fff!important;font-weight:500;
  font-size:clamp(34px,5.4vw,64px);line-height:1.04;letter-spacing:-.03em
}
.std-rd .std-lead{max-width:620px;margin:0 0 36px;font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:#c8c8c8}

/* form: one large field with a white pill button, as in the reference's stacked form */
.std-rd .std-form{max-width:980px}
.std-rd .std-form__row{
  gap:10px;padding:8px 8px 8px 12px;min-height:72px;border-radius:18px;
  background:var(--rd-black2);border:1px solid #3a3a3a;box-shadow:0 20px 60px rgba(0,0,0,.35)
}
.std-rd .std-form__row:focus-within{border-color:var(--rd-teal);box-shadow:0 0 0 4px rgba(0,184,169,.22),0 20px 60px rgba(0,0,0,.35)}
.std-rd .std-form__icon{color:#8a8a8a}
.std-rd .std-form input[type=text]{color:#fff!important;font-size:18px}
.std-rd .std-form input[type=text]::placeholder{color:#8f8f8f;opacity:1}
.std-rd .std-form .std-btn--primary{
  min-height:54px;padding:0 28px;border-radius:999px;font-weight:600;font-size:16px;
  background:#fff!important;color:var(--rd-black)!important;border:0!important;filter:none
}
.std-rd .std-form .std-btn--primary:hover{background:#e9e9e9!important}
.std-rd .std-form__hint{color:#9a9a9a;margin-top:14px}
.std-rd .std-form__hint.is-error{color:#ff8a7a}
.std-rd .std-link{color:#fff!important;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}

/* ---------- "what's included" cards straddling the hero edge ---------- */
.std-rd-included{background:linear-gradient(var(--rd-black) 0 130px,var(--rd-paper) 130px)}
.std-rd-included__label{margin:0;padding:6px 0 22px;color:#bdbdbd;font-size:15px}
.std-rd-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.std-rd-cards li{
  display:flex;flex-direction:column;gap:8px;min-height:190px;padding:26px 24px;
  background:#fff;border:1px solid var(--rd-line);border-radius:18px;box-shadow:0 8px 30px rgba(15,15,15,.08)
}
.std-rd-cards strong{margin-top:10px;font-family:var(--rd-head);font-size:19px;font-weight:600;line-height:1.25;color:var(--rd-ink);letter-spacing:-.01em}
.std-rd-cards span:not(.std-rd-check){font-size:15px;line-height:1.5;color:var(--rd-ink2)}
.std-rd-check{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--rd-ink);position:relative;flex:none}
.std-rd-check::after{content:"";position:absolute;left:11px;top:8px;width:8px;height:13px;border:solid var(--rd-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* report output + live feed sit on the white band */
.std-rd .std-app{max-width:1200px;margin:0 auto;padding:40px 24px 8px}
.std-rd .std-app:empty{display:none}
.std-rd .std-recent{max-width:1200px;margin:0 auto;padding:40px 24px 0}

/* ---------- article ---------- */
.std-content.std-rd-content{
  background:var(--rd-paper);color:var(--rd-ink);padding:56px 0 110px;font-size:17px;line-height:1.65;
  /* win over the site's dark-article palette (mu-plugin) */
  --std-bg:#fff;--std-bg2:var(--rd-paper2);--std-card:#fff;--std-ink:var(--rd-ink);--std-ink2:var(--rd-ink2);--std-ink3:var(--rd-ink3);--std-line:var(--rd-line);--std-line2:#efefec
}
.std-rd-content p,.std-rd-content li,.std-rd-content td{color:var(--rd-ink2)}
.std-rd-content strong{color:var(--rd-ink)}
.std-rd-content a{color:var(--rd-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rd-teal)}
.std-rd-content a:hover{color:var(--rd-teal-ink)}
.std-rd-content .std-updated{margin:0 0 56px;font-size:14px;color:var(--rd-ink3)}
.std-rd-content .std-sec{margin:0 0 120px}
.std-rd-content h2{
  margin:0 0 28px;max-width:22ch;color:var(--rd-ink)!important;font-weight:500;
  font-size:clamp(28px,3.6vw,46px);line-height:1.1;letter-spacing:-.025em
}
.std-rd-content h3{color:var(--rd-ink)!important;font-weight:500;letter-spacing:-.01em}
.std-rd-eyebrow{margin:0 0 14px!important;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rd-ink)!important}
.std-rd-content .std-answer{font-size:19px;line-height:1.6}

/* intro split */
.std-rd-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.std-rd-intro h2{margin:0}
.std-rd-intro__body .std-answer{margin:0}

/* step cards */
.std-rd-steps{counter-reset:rd;list-style:none;padding:0!important;margin:36px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.std-rd-steps li{counter-increment:rd;margin:0!important;padding:28px 26px;border:1px solid var(--rd-line);border-radius:18px;background:var(--rd-paper2)}
.std-rd-steps li::before{content:"0" counter(rd);display:block;margin-bottom:22px;font-family:var(--rd-head);font-size:14px;font-weight:600;color:var(--rd-teal-ink)}
.std-rd-steps li strong{display:block;margin-bottom:6px;font-family:var(--rd-head);font-size:20px;font-weight:600}

/* ruled feature rows (reference: "Why speed matters") */
.std-rd-rows{display:block!important;margin-top:44px;border-bottom:1px solid var(--rd-line)}
.std-rd-rows>div{
  display:grid;grid-template-columns:5fr 7fr;gap:32px;align-items:start;
  padding:34px 0!important;border:0!important;border-top:1px solid var(--rd-line)!important;border-radius:0!important;background:none!important
}
.std-rd-rows h3{margin:0!important;font-size:clamp(20px,2vw,26px)!important;line-height:1.25}
.std-rd-rows p{margin:0!important;font-size:16px!important}

/* dark rounded panel (reference: infrastructure/globe card) */
.std-rd-content .std-rd-panel{
  position:relative;overflow:hidden;padding:64px 56px;border-radius:28px;color:#fff;
  background:
    radial-gradient(520px 360px at 100% 0%,rgba(0,184,169,.22),transparent 70%),
    radial-gradient(480px 340px at 0% 100%,rgba(139,92,246,.18),transparent 70%),
    var(--rd-black)
}
.std-rd-panel h2,.std-rd-panel .std-rd-eyebrow{color:#fff!important}
.std-rd-panel .std-rd-eyebrow{color:#bdbdbd!important}
.std-rd-panel p,.std-rd-panel .std-answer{color:#c8c8c8;max-width:760px}
.std-rd-panel strong{color:#fff}
.std-rd-panel .std-table-wrap{margin-top:36px;border-color:var(--rd-line-dk);border-radius:16px;background:transparent}
.std-rd-panel .std-table{background:transparent;font-size:15px}
.std-rd-panel .std-table th{background:rgba(255,255,255,.04);color:#a0a0a0;border-bottom-color:var(--rd-line-dk)}
.std-rd-panel .std-table td{color:#cfcfcf;border-bottom-color:var(--rd-line-dk);padding:16px 18px}
.std-rd-panel .std-table th{padding:14px 18px}
.std-rd-panel .std-table td strong{color:#fff}

/* split block with code window (reference: whitepaper) */
.std-rd-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.std-rd-split h2{max-width:16ch}
.std-rd-split .std-steps{padding-left:20px}
.std-rd-split .std-steps li{margin-bottom:12px}
.std-rd-content kbd,.std-rd-content code{background:var(--rd-paper2);border-color:var(--rd-line);color:var(--rd-ink)}
.std-rd-code{border-radius:20px;overflow:hidden;background:var(--rd-black);box-shadow:0 30px 80px rgba(15,15,15,.25),0 0 0 1px #262626;transform:rotate(1.2deg)}
.std-rd-code__bar{display:flex;align-items:center;gap:7px;padding:14px 16px;background:var(--rd-black3);border-bottom:1px solid var(--rd-line-dk)}
.std-rd-code__bar i{width:11px;height:11px;border-radius:50%;background:#3a3a3a}
.std-rd-code__bar i:first-child{background:#ff5f57}.std-rd-code__bar i:nth-child(2){background:#febc2e}.std-rd-code__bar i:nth-child(3){background:#28c840}
.std-rd-code__bar span{margin-left:10px;font:12px/1 var(--std-mono);color:#8a8a8a}
.std-rd-code pre{margin:0;padding:28px 26px 32px;background:none;border:0;color:#d4d4d4;font:14px/1.75 var(--std-mono);white-space:pre;overflow-x:auto}
.std-rd-code .k{color:#8bc8ff}.std-rd-code .p{color:#c4b5fd}.std-rd-code .s{color:#5eead4}.std-rd-code .n{color:#fbbf24}

/* light table */
.std-rd-block .std-table-wrap{margin-top:12px;border-radius:18px;border-color:var(--rd-line)}
.std-rd-block .std-table{font-size:15px}
.std-rd-block .std-table th{padding:14px 18px;background:var(--rd-paper2)}
.std-rd-block .std-table td{padding:16px 18px}

/* ruled two-column rows with an H2 each */
.std-rd-rowgroup{margin:0 0 120px;border-bottom:1px solid var(--rd-line)}
.std-rd-rowgroup>.std-rd-eyebrow{margin-bottom:28px!important}
.std-rd-content .std-rd-row{display:grid;grid-template-columns:5fr 7fr;gap:32px;margin:0;padding:40px 0;border-top:1px solid var(--rd-line)}
.std-rd-row h2{margin:0;font-size:clamp(22px,2.2vw,28px);line-height:1.2;max-width:none}
.std-rd-row__body>p:first-child{margin-top:0}
.std-rd-row__body>p:last-child{margin-bottom:0}
.std-rd-row .std-answer{font-size:17px}

/* next-step cards */
.std-rd-next{list-style:none;padding:0!important;margin:36px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.std-rd-next li{margin:0!important;padding:28px 26px;border:1px solid var(--rd-line);border-radius:18px;font-size:16px}
.std-rd-next li strong{display:block;margin-bottom:8px;font-family:var(--rd-head);font-size:20px;font-weight:600}

/* FAQ rows with round +/− toggle */
.std-rd-faq h2{font-size:clamp(34px,4.4vw,56px);max-width:none;margin-bottom:36px}
.std-rd-faq .std-faq{border-bottom:1px solid var(--rd-line)}
.std-rd-faq .std-faq details{margin:0;padding:0;border:0;border-top:1px solid var(--rd-line);border-radius:0;background:none}
.std-rd-faq .std-faq summary{position:relative;list-style:none;display:block;padding:28px 64px 28px 0;cursor:pointer}
.std-rd-faq .std-faq summary::-webkit-details-marker{display:none}
.std-rd-faq .std-faq summary h3{display:block;font-size:clamp(18px,1.7vw,21px);font-weight:500;line-height:1.35}
.std-rd-faq .std-faq summary::before,.std-rd-faq .std-faq summary::after{content:"";position:absolute;right:0;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%}
.std-rd-faq .std-faq summary::before{background:var(--rd-black);transition:transform .2s}
.std-rd-faq .std-faq summary::after{
  background:
    linear-gradient(#fff,#fff) center/14px 2px no-repeat,
    linear-gradient(#fff,#fff) center/2px 14px no-repeat;transition:transform .2s
}
.std-rd-faq .std-faq details[open] summary::after{transform:rotate(90deg);background:linear-gradient(#fff,#fff) center/14px 2px no-repeat}
.std-rd-faq .std-faq summary:hover::before{transform:scale(1.08)}
.std-rd-faq .std-faq summary:focus-visible{outline:2px solid var(--rd-teal);outline-offset:4px;border-radius:6px}
.std-rd-faq .std-faq p{margin:-8px 0 28px;max-width:820px;font-size:16px}

/* author */
.std-rd-content .std-author{margin:0;padding:28px;border-radius:20px;border-color:var(--rd-line);background:var(--rd-paper2)}
.std-rd-content .std-author__avatar{background:var(--rd-black);font-family:var(--rd-head)}
.std-rd-content .std-author__name,.std-rd-content .std-author__name a{color:var(--rd-ink)}

/* ---------- closing CTA band (reference: "Dive deeper with a Shopify expert") ---------- */
.std-cta.std-cta--footer{
  margin-top:0;padding:110px 24px;color:#fff;
  background:
    radial-gradient(ellipse closest-side at 38% 50%,rgba(0,184,169,.14),transparent 100%),
    radial-gradient(ellipse closest-side at 64% 50%,rgba(139,92,246,.10),transparent 100%),
    var(--rd-black)
}
.std-cta--footer .std-cta__inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;max-width:860px;margin:0 auto;
  padding:0;background:none;box-shadow:none;border-radius:0
}
.std-cta--footer .std-cta__eyebrow{color:#bdbdbd;opacity:1;letter-spacing:.14em;font-size:12px;margin-bottom:14px}
.std-cta--footer .std-cta__title{font-family:var(--rd-head)!important;font-weight:500;font-size:clamp(30px,4.2vw,52px);line-height:1.08;letter-spacing:-.025em;margin:0 0 18px}
.std-cta--footer .std-cta__text{max-width:640px;margin:0 auto 26px;color:#c8c8c8;opacity:1;font-size:17px}
.std-cta--footer .std-cta__points{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 34px}
.std-cta--footer .std-cta__points li{padding:8px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.04);font-size:14px;color:#e2e2e2}
.std-cta--footer .std-cta__points li::before{color:var(--rd-teal)}
.std-cta--footer .std-cta__actions{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px}
.std-cta--footer .std-btn{border-radius:999px!important;font-family:inherit!important;font-weight:600!important}
.std-cta--footer .std-btn--primary,.std-cta--footer .std-btn--primary:hover,.std-cta--footer .std-btn--primary:focus{background:#fff!important;color:var(--rd-black)!important;border-color:#fff!important}
.std-cta--footer .std-btn--ghost,.std-cta--footer .std-btn--ghost:hover{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.55)!important}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .std-rd-cards{grid-template-columns:repeat(2,1fr)}
  .std-rd-split{grid-template-columns:1fr;gap:40px}
  .std-rd-code{transform:none}
}
@media (max-width:760px){
  .std-rd-wrap{padding:0 16px}
  .std-rd .std-rd-hero{padding:40px 0 48px}
  .std-rd-announce{font-size:12px;margin-bottom:22px}
  .std-rd .std-form__row{padding:8px;border-radius:16px}
  .std-rd .std-form .std-btn--primary{width:100%}
  .std-rd-included{background:linear-gradient(var(--rd-black) 0 110px,var(--rd-paper) 110px)}
  .std-rd-cards{grid-template-columns:1fr;gap:12px}
  .std-rd-cards li{min-height:0;padding:22px 20px}
  .std-rd .std-app,.std-rd .std-recent{padding-left:16px;padding-right:16px}
  .std-content.std-rd-content{padding:40px 0 72px}
  .std-rd-content .std-sec,.std-rd-rowgroup{margin-bottom:80px}
  .std-rd-intro,.std-rd-rows>div,.std-rd-content .std-rd-row{grid-template-columns:1fr;gap:12px}
  .std-rd-intro{gap:20px}
  .std-rd-steps,.std-rd-next{grid-template-columns:1fr}
  .std-rd-content .std-rd-panel{padding:40px 20px;border-radius:22px}
  .std-rd-code pre{font-size:12.5px;padding:20px 18px 24px}
  .std-cta.std-cta--footer{padding:72px 16px}
  .std-cta--footer .std-cta__actions{flex-direction:column;width:100%}
}
@media print{.std-rd-included{display:none!important}.std-rd .std-rd-hero{display:none!important}}

/* in-report CTA in brand black instead of the old green gradient */
.std-rd .std-cta--report .std-cta__inner{
  border-radius:22px;
  background:
    radial-gradient(420px 260px at 100% 0%,rgba(0,184,169,.22),transparent 70%),
    radial-gradient(420px 260px at 0% 100%,rgba(139,92,246,.16),transparent 70%),
    var(--rd-black)
}
.std-rd .std-cta--report .std-cta__title{font-family:var(--rd-head)!important;font-weight:500;letter-spacing:-.02em}
.std-rd .std-cta--report .std-cta__points li::before{color:var(--rd-teal)}
.std-rd .std-cta--report .std-btn{border-radius:999px!important}
.std-rd .std-cta--report .std-btn--primary,.std-rd .std-cta--report .std-btn--primary:hover{color:var(--rd-black)!important}

/* no dark gap between the white cards band and the article */
.std-root.std-rd{margin-bottom:0!important}
.std-content.std-rd-content{margin-top:0!important}