:root {
	--purple: #522E91;
	--orange: #F37421;
	--ink: #222222;
	--meta: #555555;
	--tint: #F5F3F9;
	--line: #E3DEEE;
	--white: #FFFFFF;
	--gray: #CCCCCC;
	--body-font : 'Poppins', Arial, sans-serif;
	font-family: var(--body-font);
	color: var(--ink);
	font-size: 17px;
	line-height: 1.65;
	text-align: left;
	box-sizing: border-box;
}

*,
*::before,
*::after{ 
	box-sizing:inherit; 
}

.sc-content-page {
    font-family: var(--body-font);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.65;
	margin: 0 auto 40px;
}

.sc-content-page h1 {
    font-family: var(--body-font);
    color: var(--purple);
    font-size: 34px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 16px;
}

.sc-content-page h2 {
    font-family: var(--body-font);
    color: var(--purple);
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    margin: 48px 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--orange);
}

.sc-content-page p {
    font-family: var(--body-font);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 14px;
}

.sc-content-page a {
    color: var(--orange);
    font-weight: 600;
    text-decoration: none;
}

.sc-content-page a:hover {
    text-decoration: underline;
}

.sc-content-page .page-logo {
    display: block;
    width: 170px;
    height: auto;
    margin: 0 0 18px;
    border: 0;
}


/* ================================
   Statistics
================================ */

.stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 28px 0 8px;
}

.stat-card {
    flex: 1 1 200px;
    border-top: 4px solid var(--orange);
    background-color: var(--tint);
    padding: 18px 20px;
    box-sizing: border-box;
}

.stat-number {
    font-family: var(--body-font);
    color: var(--purple);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
}

.stat-label {
    font-family: var(--body-font);
    color: var(--meta);
    font-size: 14px;
    line-height: 1.45;
    margin-top: 6px;
}


/* ================================
   Timeline
================================ */

.timeline {
    margin: 8px 0 0;
}

.timeline-item {
    display: flex;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray);
}

.timeline-year {
    flex: 0 0 64px;
    font-family: var(--body-font);
    color: var(--orange);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.65;
}

.timeline-content {
    flex: 1 1 auto;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.65;
}

.brand-item {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    padding: 22px 0;
    border-bottom: 1px solid var(--gray);
}

.brand-logo {
    flex: 0 0 190px;
}

.brand-logo img {
    display: block;
    width: 180px;
    height: auto;
    max-width: 100%;
}

.brand-logo.logo-small img {
    width: 130px;
}

.brand-content {
    flex: 1 1 360px;
    min-width: 260px;
}

.brand-name {
    margin-bottom: 6px !important;
}

.brand-name strong {
    color: var(--purple);
    font-size: 18px;
}

.brand-link {
    margin: 0 !important;
}

.sc-content-page .intro {
    color: var(--orange);
    font-size: 19px;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 24px;
}

/* Feature list */

.sc-content-page .feature-list {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 16px;
    padding-left: 22px;
}

.sc-content-page .feature-list li {
    margin: 0 0 8px;
}


/* Skin Site options */

.skin-site-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 8px 0 18px;
}

.skin-site-option {
    flex: 1 1 280px;
    min-width: 240px;
    border-top: 4px solid var(--orange);
    background-color: var(--tint);
    padding: 18px 20px;
}

.skin-site-option-title {
    color: var(--purple);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 6px;
}

.skin-site-option-text {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.55;
}


/* Comparison table */

.skin-sites-table-wrapper {
    overflow-x: auto;
    margin: 0 0 18px;
}

.skin-sites-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 520px;
}

.skin-sites-table th {
    background-color: var(--purple);
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    padding: 10px 14px;
    border: 1px solid var(--purple);
    width: 33.333%;
}

.skin-sites-table td {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.5;
    padding: 10px 14px;
    border: 1px solid var(--gray);
    vertical-align: top;
}


/* Screenshot gallery */

.skin-sites-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 8px 0 0;
}

.skin-sites-gallery figure {
    flex: 1 1 380px;
    min-width: 260px;
    margin: 0 0 22px;
}

.skin-sites-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--gray);
}

.skin-sites-gallery figcaption {
    color: var(--meta);
    font-size: 14px;
    line-height: 1.45;
    margin: 8px 0 0;
}


/* Callout boxes */

.skin-sites-callout {
    border-left: 6px solid var(--orange);
    border-top: 1px solid var(--ink);
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 20px 24px;
    margin: 28px 0;
}

.skin-sites-callout-title {
    color: var(--purple);
    font-weight: 700;
    margin-bottom: 6px !important;
}

.skin-sites-callout p:last-child {
    margin-bottom: 0;
}


/* Bottom navigation */

.skin-sites-navigation {
    font-size: 16px;
    margin: 26px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--gray);
}

.skin-sites-navigation a {
    margin-right: 14px;
}


/* ================================
   Responsive
================================ */

@media (max-width: 768px) {

    .sc-content-page {
        font-size: 15px;
    }

    .sc-content-page h1 {
        font-size: 30px;
    }

    .sc-content-page h2 {
        font-size: 22px;
        margin-top: 40px;
    }

    .stats-grid {
        gap: 12px;
    }

    .stat-card {
        flex: 1 1 calc(50% - 12px);
    }

    .timeline-item {
        gap: 14px;
    }
	
	.brand-item {
        gap: 18px;
    }

    .brand-logo {
        flex: 0 0 160px;
    }

    .brand-logo img {
        width: 150px;
    }
	
	.skin-sites-gallery figure {
        flex-basis: 320px;
    }

}

@media (max-width: 500px) {

    .sc-content-page h1 {
        font-size: 27px;
    }

    .sc-content-page h2 {
        font-size: 20px;
    }

    .stat-card {
        flex: 1 1 100%;
    }

    .timeline-item {
        display: block;
    }

    .timeline-year {
        margin-bottom: 4px;
    }
	
	.brand-item {
        display: block;
        padding: 20px 0;
    }

    .brand-logo {
        margin-bottom: 18px;
    }

    .brand-logo img,
    .brand-logo.logo-small img {
        width: 160px;
    }

    .brand-content {
        min-width: 0;
    }
	
	.skin-site-options {
        display: block;
    }

    .skin-site-option {
        min-width: 0;
        margin-bottom: 16px;
    }

    .skin-sites-table {
        min-width: 520px;
    }

    .skin-sites-gallery {
        display: block;
    }

    .skin-sites-gallery figure {
        min-width: 0;
        margin-bottom: 24px;
    }

    .skin-sites-callout {
        padding: 18px;
    }

    .skin-sites-navigation a {
        display: inline-block;
        margin-bottom: 8px;
    }

}

.sca img{max-width:100%;height:auto;display:block}
.sca :where(h2,h3,h4,p,figure){margin:0}
.sca a{color:var(--purple)}
.sca a:focus-visible,.sca button:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
/*.sca-wrap{ max-width:1120px;margin:0 auto;padding:0 24px}*/
.sca-section{padding:72px 0}
.sca-section + .sca-section{border-top:1px solid var(--line)}
.sca-h2{font-size:32px;line-height:1.2;font-weight:600 !important;color:var(--purple);max-width:26ch}
.sca-lede{font-size:18px;color:var(--ink);max-width:62ch;margin-top:16px}
.sca-body{max-width:62ch}

/* Hero */
.sca-hero{background:var(--purple);color:var(--white);padding:72px 0 64px}
.sca-hero h2{font-size:46px;line-height:1.12;font-weight:600;max-width:17ch;color:var(--white)}
.sca-hero .sca-sub{font-size:19px;max-width:54ch;margin-top:20px;color:var(--white)}
.sca-proof{margin-top:36px;padding-left:20px;border-left:4px solid var(--orange);max-width:56ch;font-size:17px}
.sca-proof strong{font-weight:600}
.sca-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.sca-btn{display:inline-block;font-weight:600;font-size:16px;padding:14px 26px;border-radius:6px;text-decoration:none}
.sca-btn-primary{background:var(--orange);color:var(--white)!important}
.sca-btn-primary:hover{background:#D9621A}
.sca-btn-ghost{border:2px solid var(--white);color:var(--white)!important;padding:12px 24px}
.sca-btn-ghost:hover{background:var(--white);color:var(--purple)!important}

/* Figures */
.sca-figs{display:grid;grid-template-columns:repeat(4,1fr);background:var(--tint)}
.sca-fig{padding:28px 24px;border-left:1px solid var(--line)}
.sca-fig:first-child{border-left:0}
.sca-fig b{display:block;font-size:30px;line-height:1.1;font-weight:600;color:var(--purple)}
.sca-fig span{display:block;font-size:14px;line-height:1.45;color:var(--meta);margin-top:8px}
.sca-figsrc{font-size:14px;color:var(--meta);padding:10px 24px 0}

.sca-kick{font-size:18px;font-weight:600;color:var(--orange);margin-top:10px}
.sca-ask{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.sca-ask .sca-lede{margin-top:16px;flex:1 1 440px}

/* Listing */
.sca-two{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.sca-logos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px;max-width:420px}
.sca-logos img{width:100%}
.sca-points{display:grid;gap:0}
.sca-point{padding:22px 0;border-top:1px solid var(--line)}
.sca-point:first-child{border-top:0;padding-top:4px}
.sca-point h3{font-size:19px;font-weight:600;color:var(--purple)}
.sca-point p{margin-top:6px;margin-top:6px;font-size: 17px;line-height: 1.65}

/* Results page explainer */
.sca-explain{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;margin-top:40px;align-items:start}
.sca-svc{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:var(--white);border:0;border-left:4px solid var(--line);padding:18px 20px;margin-bottom:12px;cursor:pointer}
.sca-svc-t{display:block;font-size:19px;font-weight:600;color:var(--purple)}
.sca-svc-d{display:block;margin-top:6px;font-size:16px;line-height:1.6}
.sca-svc[aria-pressed="true"]{border-left-color:var(--orange);background:var(--tint)}
.sca-svc:hover{background:var(--tint)}
.sca-mock{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden;position:sticky;top:24px}
.sca-mock-bar{background:var(--tint);padding:12px 18px;font-size:14px;color:var(--meta);border-bottom:1px solid var(--line)}
.sca-mock-bar b{color:var(--ink);font-weight:500}
.sca-mock-body{padding:18px}
.sca-slot{border-radius:6px;padding:12px 14px;margin-bottom:12px;transition:opacity .2s ease, box-shadow .2s ease}
.sca-slot-label{display:block;font-size:13px;font-weight:600;letter-spacing:.01em}
.sca-slot-banner{background:var(--purple);color:var(--white);display:flex;justify-content:space-between;align-items:center}
.sca-slot-banner i{font-style:normal;font-size:12px;background:var(--orange);padding:3px 10px;border-radius:20px}
.sca-slot-offer{border:2px solid var(--orange);display:flex;gap:12px;align-items:center}
.sca-slot-offer .sca-thumb{flex:0 0 52px;height:52px}
.sca-slot-offer .sca-lines{flex:1}
.sca-slot-enh{border:2px solid var(--purple)}
.sca-grid9{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-top:10px}
.sca-grid9 div{height:34px;background:var(--tint);border-radius:3px}
.sca-grid9 .you{background:var(--purple)}
.sca-slot-std{background:#FAFAFA;border:1px solid #EEEEEE}
.sca-thumb{background:var(--tint);border-radius:4px}
.sca-lines div{height:8px;border-radius:4px;background:#E6E6E6;margin:6px 0}
.sca-lines div:first-child{width:70%}
.sca-lines div:last-child{width:40%}
.sca-stdrow{display:flex;gap:12px;align-items:center;margin-top:10px}
.sca-stdrow .sca-thumb{flex:0 0 40px;height:40px;background:#EDEDED}
.sca-stdrow .sca-lines{flex:1}
.sca-mock-note{font-size:13px;color:var(--meta);padding:0 18px 16px}
.sca-mock[data-active] .sca-slot{opacity:.35}
.sca-mock[data-active="enhanced"] .sca-slot-enh,
.sca-mock[data-active="offers"] .sca-slot-offer.is-offer,
.sca-mock[data-active="newprod"] .sca-slot-offer.is-new,
.sca-mock[data-active="banner"] .sca-slot-banner{opacity:1;box-shadow:0 0 0 3px var(--orange)}

.sca-note{grid-column:1 / -1;margin-top:8px;font-size:15px;color:var(--meta);max-width:70ch}

/* Mailing */
.sca-mail{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start}
.sca-mail-logo{max-width:260px}
.sca-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:28px}
.sca-cols h3{font-size:19px;font-weight:600;color:var(--purple)}
.sca-cols p{margin-top:6px}
.sca-callout{margin-top:32px;background:var(--tint);border-left:4px solid var(--orange);padding:18px 22px;max-width:70ch}

.sca-chan{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin-top:28px}
.sca-ch{padding:18px 0;border-top:1px solid var(--line)}
.sca-ch h3{font-size:19px;font-weight:600;color:var(--purple)}
.sca-ch p{margin-top:4px;font-size:16px}
.sca-mfigs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:24px;background:var(--tint)}
.sca-mfigs div{padding:20px 22px;border-left:1px solid var(--line)}
.sca-mfigs div:first-child{border-left:0}
.sca-mfigs b{display:block;font-size:28px;line-height:1.1;font-weight:600;color:var(--purple)}
.sca-mfigs span{display:block;font-size:14px;line-height:1.45;color:var(--meta);margin-top:6px}

/* Bundles */
.sca-bundle{background:var(--tint)}
.sca-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;counter-reset:step;list-style:none;padding:0}
.sca-steps li{background:var(--white);padding:26px 24px;border-top:4px solid var(--purple);counter-increment:step}
.sca-steps li::before{content:counter(step);display:block;font-size:28px;font-weight:600;color:var(--orange);line-height:1}
.sca-steps h3{font-size:19px;font-weight:600;color:var(--purple);margin-top:12px}
.sca-steps p{margin-top:6px;font-size:16px}

/* Beyond */
.sca-beyond{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.sca-card{border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;border-radius:8px}
.sca-card h3{font-size:21px;font-weight:600;color:var(--purple)}
.sca-card p{margin-top:8px;flex:1}
.sca-card a.sca-link{margin-top:18px;font-weight:600;color:var(--orange);text-decoration:none}
.sca-card a.sca-link:hover{text-decoration:underline}
.sca-card img{max-width:180px;margin-bottom:18px}
.sca-card img[alt^="Merchandise"]{max-width:240px}
.sca-card p.sca-date{margin-top:14px;flex:0 0 auto}
.sca-date{margin-top:14px;font-weight:600;color:var(--ink)}

/* Team */
.sca-team{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.sca-person img{width:140px;height:140px;border-radius:50%;object-fit:cover}
.sca-person h3{font-size:19px;font-weight:600;color:var(--purple);margin-top:16px}
.sca-person .sca-role{font-size:15px;color:var(--meta)}
.sca-person a{display:inline-block;margin-top:6px;font-size:16px;text-decoration: underline;}

@media (max-width:991px){
  .sca-two,.sca-explain,.sca-mail{grid-template-columns:1fr;gap:32px}
  .sca-mock{position:static;order:-1}
  .sca-mail-logo{max-width:200px}
  .sca-figs{grid-template-columns:1fr 1fr}
  .sca-fig:nth-child(3){border-left:0}
  .sca-fig:nth-child(n+3){border-top:1px solid var(--line)}
  .sca-steps,.sca-beyond{grid-template-columns:1fr}
}
@media (max-width:500px){
  .sca-hero h2{font-size:34px}
  .sca-h2{font-size:26px}
  .sca-section{padding:52px 0}
  .sca-cols,.sca-chan,.sca-mfigs{grid-template-columns:1fr}
  .sca-mfigs div{border-left:0;border-top:1px solid var(--line)}
  .sca-mfigs div:first-child{border-top:0}
  .sca-grid9{grid-template-columns:repeat(9,1fr);gap:3px}
  .sca-grid9 div{height:22px}
  .sca-team{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.sca-slot{transition:none}}