/* ─── TOKENS ─────────────────────────────── */
:root {
  --navy:      #0D1626;
  --navy-2:    #152038;
  --navy-3:    #1E2F50;
  --accent:    #E8521A;
  --accent-2:  #D44BA0;
  --shopify:   #5C8E26;
  --sp-bg:     #E8F5D8;
  --light:     #F4F7FF;
  --white:     #FFFFFF;
  --border:    #DDE5F8;
  --tx-dark:   #0D1626;
  --tx-mid:    #445070;
  --tx-dim:    #7B8CB0;
  --tx-white:  #EEF2FF;
  --tx-w-dim:  rgba(238,242,255,.6);
  /* chrome (the tab-switcher wrapper) */
  --ch-bg:     #F0F3FA;
  --ch-border: #DDE5F8;
  --ch-tab:    #FFFFFF;
  --ch-tab-tx: #445070;
  --ch-active: #4C6EF5;
  --ch-active-tx: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ch-bg:     #0E1422;
    --ch-border: #1C2840;
    --ch-tab:    #152038;
    --ch-tab-tx: #7B8CB0;
    --ch-active: #4C6EF5;
    --ch-active-tx: #FFFFFF;
  }
}
span.cred-dot.shopify-plus-partner {
    background: #5C8E26;
}
span.cred-dot.top-rated-plus {
    background: #E8521A;
}
span.cred-dot.\31 00-job-success {
     background: #E8521A;
}
span.cred-dot.since-2010 {
    background: #5C8E26;
}
.btn-primary:hover, .btn-primary:focus {
    color: #000000 !important;
    border: 1px solid rgba(255, 255, 255, .3)!important;
    background: #dad8ff !important;
}
h1.hero-h {
    margin-block: 20px !important;
}
.stat-item:nth-child(5) span.stat-n {
    color: #e8521a;
}
.two-col .lead {
    font-size: 16px !important;
}
span.cred-dot-1, span.cred-dot-2 , span.cred-dot-3 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

span.cred-dot-1 {
    background: #5C8E26;
    }
  span.cred-dot-2 {
    background: #D44BA0;
    }
    span.cred-dot-3 {
    background: #E8521A;
    }
:root[data-theme="dark"]  { --ch-bg:#0E1422; --ch-border:#1C2840; --ch-tab:#152038; --ch-tab-tx:#7B8CB0; }
:root[data-theme="light"] { --ch-bg:#F0F3FA; --ch-border:#DDE5F8; --ch-tab:#FFFFFF; --ch-tab-tx:#445070; }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--ch-bg); font-family:Lato,Helvetica,Arial,sans-serif; font-size:15px; line-height: unset !important;}

/* ─── CHROME SHELL ───────────────────────── */
.chrome { display:flex; flex-direction:column; min-height:100vh; }

/* ─── MOCKUP WRAPPER ─────────────────────── */
.mockup-stage { padding:0; }
.page.active { display:block; }

/* ─── SIMULATED HEADER ───────────────────── */
.sim-header {
  background:#FFFFFF;
  box-shadow:0 1px 0 #E4EAF6, 0 2px 14px rgba(0,0,0,.06);
  padding:0 5%;
  display:flex; align-items:center; justify-content:space-between;
  height:64px; position:sticky; top:0; z-index:90;
}
.sim-logo-wrap { display:flex; align-items:center; gap:12px; }
.sim-logo-mark {
  font-size:30px; font-weight:900; line-height:1;
  font-family:Georgia,serif; font-style:italic;
  background:linear-gradient(135deg,#E8521A 0%,#D44BA0 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; letter-spacing:-.03em;
}
.sim-logo-divider { width:1px; height:34px; background:#DDE5F8; }
.sim-logo-name { font-size:11.5px; font-weight:800; color:#0D1626; letter-spacing:.07em; line-height:1.2; }
.sim-logo-sub  { font-size:8px; font-weight:600; color:#9BA5C8; letter-spacing:.13em; }
.sim-nav { display:flex; align-items:center; gap:24px; }
.sim-nav a {
  font-size:12px; font-weight:700; color:#6B7A9E;
  text-decoration:none; letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap;
}
.sim-nav a.sim-active { color:#0D1626; }
.sim-nav a.sim-dd::after { content:' ▾'; font-size:8px; font-weight:normal; }
.sim-cta-btn {
  background:#0D1626; color:#FFFFFF;
  padding:9px 20px; border-radius:40px;
  font-size:12px; font-weight:700; letter-spacing:.04em; white-space:nowrap;
}

/* ─── SHARED SECTION STYLES ─────────────── */
.s { width:100%; }
.s-dark  { background:var(--navy);   color:var(--tx-white); }
.s-dark2 { background:var(--navy-2); color:var(--tx-white); }
.s-dark3 { background:var(--navy-3); color:var(--tx-white); }
.s-white { background:var(--white);  color:var(--tx-dark); }
.s-light { background:var(--light);  color:var(--tx-dark); }
.s-accent { background:var(--accent); color:#fff; }

.inner { max-width:1170px; margin:0 auto; padding:0 15px; }
.pad-lg { padding-top:64px; padding-bottom:64px; }
.pad-md { padding-top:44px; padding-bottom:44px; }
.pad-sm { padding-top:28px; padding-bottom:28px; }

.eyebrow {
  font-size:9.5px; font-family:'SF Mono','Fira Code',monospace;
  letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:14px; opacity:.6;
}
.eyebrow-accent { color:var(--accent); opacity:1; }

h1.hero-h {
    font-family: Georgia,'Times New Roman',serif;
    font-size: clamp(26px,4vw,40px);
    font-weight: normal;
    line-height: 1.2;
    text-wrap: balance;
    color: #fff !important;
}
h2.section-h { font-family:Georgia,'Times New Roman',serif; font-size:clamp(22px,3vw,30px); font-weight:normal; line-height:1.25; text-wrap:balance; margin-bottom:14px; }
h3.card-h { font-size: 15.5px; font-family: lato; font-weight: 600; margin-bottom: 8px; }
p.lead {
    font-size: clamp(14px,1.6vw,16px);
    line-height: 1.75;
    opacity: .8;
    max-width: 580px;
	font-weight:400;
}
.body-copy p{ font-size:14.5px; line-height:1.8; color:var(--tx-mid); }
.body-copy p + p { margin-top:14px; }
.img-ph-light.tall img {
    width: 100%;
}
.hero-creds .cred-card .cred-sub {
    padding-left: 16px;
}
/* badge */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:20px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
}
.badge-shopify { background:var(--sp-bg); color:var(--shopify); }
.badge-white   { background:rgba(255,255,255,.12); color:var(--tx-white); }

/* hero split */
.hero-split { display:flex; align-items:center; gap:48px; }
.hero-split .hero-text { flex:1; }
.hero-creds { flex-shrink:0; display:flex; flex-direction:column; gap:12px; padding:8px 0; }
.cred-card {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  border-radius:10px; padding:14px 18px; min-width:240px;
}
.cred-card:nth-child(1) { transform:translateX(28px); }
.cred-card:nth-child(2) { transform:translateX(0); }
.cred-card:nth-child(3) { transform:translateX(18px); }
.cred-title { color:#fff; font-size:12px; font-weight:600; display:flex; align-items:center; gap:8px; }
.cred-sub { color:rgba(255,255,255,.42); font-size:10.5px; margin-top:4px; }
.cred-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
@media(max-width:760px) { .hero-split { flex-direction:column; } .hero-creds { width:100%; } .cred-card { transform:none !important; } }

/* hero cta row */
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.btn-primary { background: var(--accent); color:#fff; padding:11px 24px; border-radius:7px; font-size:14px; font-weight:600; text-decoration:none; display:inline-block;border: 1px solid #ff4800 !important; }
.btn-outline { background:transparent; color:var(--tx-white); padding:11px 24px; border-radius:7px; font-size:14px; font-weight:500; border:1px solid rgba(255,255,255,.3); display:inline-block; }
.cta-inner .btn-outline {
    background: transparent;
    padding: 11px 24px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
}
.btn-outline-dark { background:transparent; color:var(--accent); padding:10px 22px; border-radius:7px; font-size:14px; font-weight:600; border:2px solid var(--accent); display:inline-block; }

/* stats bar */
.stats-bar { display:flex; flex-wrap:wrap; gap:0; }
.stat-item { flex:1; min-width:120px; padding:28px 20px; border-right:1px solid var(--border); text-align:center; }
.stat-item:last-child { border-right:none; }
.stat-n { font-family:Georgia,serif; font-size:32px; color:var(--navy); display:block; font-weight:normal; font-variant-numeric:tabular-nums; }
.stat-n.accent { color:var(--accent); }
.stat-l { font-size:10px; color:var(--tx-dim); text-transform:uppercase; letter-spacing:.08em; }

/* two-col */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.two-col.flip { }
@media(max-width:680px) { .two-col { grid-template-columns:1fr; } }

/* image placeholder */
.img-ph {
  background: linear-gradient(135deg, var(--navy-2) 0%, var(--navy-3) 100%);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--tx-w-dim); font-size:11px; letter-spacing:.1em;
  font-family:'SF Mono',monospace; text-transform:uppercase;
}
.img-ph.tall { height:280px; }
.img-ph.short { height:200px; }
.img-ph-light {
  background:var(--border); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--tx-dim); font-size:11px; letter-spacing:.1em;
  font-family:'SF Mono',monospace; text-transform:uppercase;
}
.img-ph-light.tall { height:260px; }

/* cards */
.card-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width: 767px) {
    .img-ph-light.tall img {
        width: 100%;
        height: 260px;
        object-fit: cover;
    }
}
@media(max-width:700px) { .card-grid-3,.card-grid-2 { grid-template-columns:1fr; } }

.card {
  background:var(--white); border:1px solid var(--border);
  border-radius:10px; padding:24px 20px;
}
.card.dark-card { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); }
.card-icon img {
    height: auto;
    max-width: 40px;
}
.card-icon {
    height: 40px;
    width: 40px;
    border-radius: 10px;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: #fff;
}
.card-icon svg { width:20px; height:20px; }

.card-body { font-size:13.5px; color:var(--tx-mid); line-height:1.7; }
.dark-card .card-body { color:var(--tx-w-dim); }
.card-link { font-size:13px; color:var(--accent); font-weight:500; margin-top:12px; display:block; }
.dark-card .card-link { color:rgba(180,200,255,.8); }

/* checklist */
.checklist { list-style:none; padding:0; }
.checklist li {
  font-size:14px; color:var(--tx-mid); padding:10px 0;
  border-bottom:1px solid var(--border); display:flex; gap:10px; align-items:flex-start;
  line-height:1.55;
}
.checklist li:last-child { border-bottom:none; }
.check-icon { color:var(--shopify); flex-shrink:0; margin-top:1px; font-size:14px; }

/* creds */
.cred-row { display:flex; gap:16px; flex-wrap:wrap; }
.cred-pill {
  display:flex; align-items:center; gap:10px;
  background:var(--light); border:1px solid var(--border);
  border-radius:40px; padding:10px 18px;
}
.cred-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cred-dot.green { background:var(--shopify); }
.cred-dot.blue  { background:var(--accent); }
.cred-text { font-size:13px; color:var(--tx-dark); font-weight:500; }
.cred-sub  { font-size:11px; color:var(--tx-dim); }

/* cta band */
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-text-block h2 { font-family:Georgia,serif; font-size:22px; font-weight:normal; margin-bottom:6px; color: #fff !important; }
.cta-text-block p {
    font-size: 14px;
    /* opacity: .75; */
  
}

/* who-card */
.who-card { background:var(--light); border-radius:10px; padding:24px; border:1px solid var(--border); }
.who-card p { font-size:14.5px; line-height:1.8; color:var(--tx-mid); }

/* real footer */
.sim-footer { background:#242424; padding:18px 5%; }
.sim-footer-inner {
  max-width:960px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
}
.sim-footer-copy { font-size:12px; color:rgba(255,255,255,.45); }
.sim-footer-nav { display:flex; gap:20px; flex-wrap:wrap; }
.sim-footer-nav a { font-size:12px; color:rgba(255,255,255,.45); text-decoration:none; }

/* platform pills */
.platform-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.plat-pill {
  background:var(--light); border:1px solid var(--border); color:var(--tx-mid);
  border-radius:20px; padding:5px 14px; font-size:12.5px;
}

/* services dropdown in header */
.sim-svc-wrap {
  position:relative;
  height:64px;
  display:flex; align-items:center;
}
.sim-svc-menu {
  display:none;
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid #DDE5F8; border-radius:10px;
  padding:6px 0; min-width:240px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  z-index:200;
}
.sim-svc-item {
  display:block; padding:10px 18px;
  font-size:12.5px; color:#445070; font-weight:500;
  letter-spacing:.01em; text-transform:none; text-decoration:none;
  cursor:pointer;
  transition:background .1s, color .1s;
}
.sim-svc-item:hover { background:#F4F7FF; color:#0D1626; }
.sim-svc-wrap:hover .sim-svc-menu { display:block; }