/* SiteOS for Sites — shares the sponsor page's visual language, with site-team context. */
body.sites-page { --sites-accent: #1575ef; }

.sites-page .hero-visual img { object-position: center; filter: saturate(1.08) brightness(1.08); }
.sites-page .visual-callout--mirror { top: 12%; left: 8%; color: var(--sponsor-ink); border-color: rgba(255, 255, 255, .86); background: rgba(239, 249, 255, .93); }
.sites-page .visual-callout--mirror strong { color: var(--sponsor-ink); font-family: Bitter, Georgia, serif; font-size: 16px; }
.sites-page .visual-callout--rail { top: 24%; right: 7%; }
.sites-page .visual-alert--risk { top: 48%; right: 15%; }
.sites-page .visual-alert--success { right: 4%; bottom: 18%; }
.sites-page .sites-hero-note { margin-top: 16px; color: var(--sponsor-muted); font-size: 12px; }

.sites-page .value-section { background: radial-gradient(circle at 92% 5%, rgba(122, 111, 247, .15), transparent 26%), linear-gradient(180deg, #f6fbff, #fff); }
.sites-page .value-card:nth-child(2) .value-icon { color: #2f64e8; background: linear-gradient(145deg, #e8f0ff, #e2f9ff); }
.sites-page .value-card:nth-child(3) .value-icon { color: var(--sponsor-teal); background: linear-gradient(145deg, #e5fbf9, #e6f5ff); }

.sites-page .sites-faq-section{display:none}
.sites-page .comparison-shell{grid-template-columns:minmax(0,1fr) 125px minmax(0,1fr);align-items:center;gap:20px;margin-top:54px;padding:27px;border:1px solid #dce7f5;border-radius:26px;background:linear-gradient(110deg,#fff5fa,#fff 43%,#f1fffd 70%,#f6ffff);overflow:hidden}
.sites-page .comparison-side{min-height:275px;padding:20px 19px}
.sites-page .comparison-side--traditional{border-radius:19px 70px 70px 19px}
.sites-page .comparison-side--siteos{border-radius:70px 19px 19px 70px}
.sites-page .comparison-center{width:106px;height:106px;border-width:7px}
@media(max-width:1000px){.sites-page .comparison-shell{grid-template-columns:1fr;gap:14px;padding:20px}.sites-page .comparison-center{margin:0 auto}.sites-page .comparison-side--traditional,.sites-page .comparison-side--siteos{border-radius:20px}.sites-page .comparison-center::after{display:none}}

.sites-page .prevention-section { background: radial-gradient(circle at 14% 58%, rgba(128, 111, 246, .12), transparent 30%), #f7fbff; }
.sites-page .prevention-card--data { right: auto; bottom: auto; }
@media (min-width: 701px) {
    .sites-page .prevention-card--consent,
    .sites-page .prevention-card--delegation { padding-left: 52px; }
}
@media (min-width: 701px) and (max-width: 1100px) {
    .sites-page .prevention-card--missed { left: 0; }
    .sites-page .prevention-card--delegation { right: 0; }
}

.sites-page .sites-how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 30px; border-top: 1px solid var(--sponsor-line); border-bottom: 1px solid var(--sponsor-line); }
.sites-page .sites-how-step { position: relative; padding: 17px 16px 16px 0; color: var(--sponsor-copy); font-size: 11px; line-height: 1.4; }
.sites-page .sites-how-step + .sites-how-step { padding-left: 16px; border-left: 1px solid var(--sponsor-line); }
.sites-page .sites-how-step strong { display: block; margin-bottom: 5px; color: var(--sponsor-ink); font: 700 14px/1.1 Bitter, Georgia, serif; }
.sites-page .sites-how-step b { display: block; margin-bottom: 7px; color: var(--sponsor-blue); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.sites-page .sites-how-steps { width: calc(200% + 32px); }
.sites-page .sites-how-step b { display: none; }
.sites-page .how-grid { position: relative; padding-bottom: 0; }
.sites-page .sites-how-steps { grid-column: 1 / -1; position: static; width: 100%; margin-top: 8px; }

.sites-faq-section { background: #fff; }
.sites-faq-heading { max-width: 760px; }
.sites-faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-top: 40px; }
.sites-faq-card { padding: 22px 24px 21px; border: 1px solid #dce9f9; border-radius: 16px; background: linear-gradient(135deg, #fbfdff, #f4f9ff); box-shadow: 0 10px 22px rgba(64, 118, 187, .06); }
.sites-faq-card strong { display: block; color: var(--sponsor-ink); font: 700 20px/1.1 Bitter, Georgia, serif; letter-spacing: -.025em; }
.sites-faq-card p { margin: 10px 0 0; color: var(--sponsor-copy); font-size: 13px; line-height: 1.5; }
.sites-faq-card p strong { display: inline; color: var(--sponsor-blue); font: inherit; font-weight: 700; }
.sites-faq-tag { display: inline-flex; margin-bottom: 13px; padding: 5px 9px; border-radius: 999px; background: #e8f4ff; color: var(--sponsor-blue); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.sites-page .final-section { position: relative; overflow: hidden; background: linear-gradient(105deg, #102b55, #283078 53%, #4b2580); }
.sites-page .final-section::before,
.sites-page .final-section::after { position: absolute; z-index: 0; width: 430px; height: 430px; border-radius: 50%; filter: blur(14px); mix-blend-mode: screen; content: ""; pointer-events: none; }
.sites-page .final-section::before { top: -55%; left: 20%; background: radial-gradient(circle, rgba(57, 221, 249, .42), rgba(103, 232, 249, .18) 34%, transparent 72%); opacity: .72; animation: sites-final-spotlight-cyan 8s ease-in-out infinite; }
.sites-page .final-section::after { top: 2%; right: 3%; background: radial-gradient(circle, rgba(196, 6, 233, .34), rgba(125, 91, 235, .2) 38%, transparent 72%); opacity: .76; animation: sites-final-spotlight-violet 9s ease-in-out infinite; }
.sites-page .final-grid { position: relative; z-index: 1; }
.sites-page .final-copy { color: #f2f6ff; }
.sites-page .final-tagline { max-width: 260px; }

@keyframes sites-final-spotlight-cyan {
    0%, 100% { transform: translate(-18%, -8%) scale(.78); }
    25% { transform: translate(30%, 28%) scale(1.04); }
    50% { transform: translate(92%, -4%) scale(.86); }
    75% { transform: translate(42%, 42%) scale(1.12); }
}
@keyframes sites-final-spotlight-violet {
    0%, 100% { transform: translate(18%, 20%) scale(.82); }
    25% { transform: translate(-36%, -8%) scale(1.08); }
    50% { transform: translate(-78%, 24%) scale(.9); }
    75% { transform: translate(-28%, 48%) scale(1.16); }
}
@media (prefers-reduced-motion: reduce) {
    .sites-page .final-section::before,
    .sites-page .final-section::after { animation: none; }
}

@media (max-width: 900px) {
    .sites-page .how-grid { padding-bottom: 0; }
    .sites-page .sites-how-steps { position: static; width: 100%; margin-top: 30px; }
    .sites-page .sites-how-steps { grid-template-columns: repeat(2, 1fr); }
    .sites-page .sites-how-step:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--sponsor-line); }
    .sites-page .sites-how-step:nth-child(4) { border-top: 1px solid var(--sponsor-line); }
    .sites-faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .sites-page .visual-callout--mirror { top: 11%; left: 4%; max-width: 145px; }
    .sites-page .visual-callout--rail { top: 28%; right: 4%; max-width: 136px; }
    .sites-page .visual-alert--risk { top: 48%; right: 8%; }
    .sites-page .visual-alert--success { right: 3%; bottom: 19%; }
    .sites-page .sites-how-steps { grid-template-columns: 1fr; }
    .sites-page .sites-how-step, .sites-page .sites-how-step + .sites-how-step { padding: 15px 0; border-left: 0; border-top: 1px solid var(--sponsor-line); }
    .sites-page .sites-how-step:first-child { border-top: 0; }
    .sites-faq-card { padding: 19px; }
}
.sites-page .sponsor-eyebrow{display:none}
.sites-page .systems-note,.sites-page .systems-list{display:none}

/* Match the final Sponsors comparison palette. */
.sites-page .comparison-shell{border-color:rgba(105,135,190,.26);background:linear-gradient(110deg,#f7f9fd 0%,#fff 43%,#f5faff 70%,#fbf9ff 100%)}
.sites-page .comparison-side--traditional{background:linear-gradient(90deg,rgba(235,240,249,.96),rgba(247,248,252,.56))}
.sites-page .comparison-side--siteos{background:linear-gradient(90deg,rgba(232,247,255,.4),rgba(237,236,255,.92))}
.sites-page .comparison-label{border-color:rgba(99,123,165,.42);color:#526486}
.sites-page .comparison-side--siteos .comparison-label{border-color:rgba(117,91,235,.4);background:linear-gradient(100deg,#31c7e9,#7d4ded);color:#fff}
.sites-page .comparison-step i{background:#e8edf8;color:#5c6f94;box-shadow:0 0 0 7px rgba(135,155,196,.14)}
.sites-page .comparison-side--siteos .comparison-step i{background:linear-gradient(145deg,#d8f7fb,#e9e3ff);color:#6551df;box-shadow:0 0 0 7px rgba(99,184,234,.14)}
.sites-page .comparison-arrow{color:#7186ae}.sites-page .comparison-side--siteos .comparison-arrow{color:#5a72d4}
.sites-page .comparison-note{color:#687895}.sites-page .comparison-side--siteos .comparison-note{color:#5e65a9}

/* Give the SiteOS pathway the full brand gradient and keep its contents legible. */
.sites-page .comparison-side--siteos{
    border:1px solid rgba(255,255,255,.36);
    background:var(--brand-gradient);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 18px 34px -20px rgba(59,76,184,.46);
    color:#fff;
}
.sites-page .comparison-side--siteos .comparison-label{
    border:1px solid rgba(255,255,255,.58);
    background:rgba(255,255,255,.16);
    box-shadow:0 8px 16px rgba(44,62,153,.2);
    color:#fff;
}
.sites-page .comparison-side--siteos .comparison-support,
.sites-page .comparison-side--siteos .comparison-step,
.sites-page .comparison-side--siteos .comparison-note{
    color:rgba(255,255,255,.96);
}

/* Tighten the mobile hamburger bars for a cleaner menu control. */
@media(max-width:900px){
    .sites-page .sponsor-site-header .nav-toggle-bar{
        margin:2px auto;
    }
    .sites-page .sponsor-site-header .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){
        transform:translateY(4px) rotate(45deg);
    }
    .sites-page .sponsor-site-header .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){
        transform:translateY(-4px) rotate(-45deg);
    }
}
.sites-page .comparison-side--siteos .comparison-step i{
    border:1px solid rgba(255,255,255,.3);
    background:rgba(255,255,255,.16);
    color:#fff;
    box-shadow:0 0 0 7px rgba(255,255,255,.14),0 8px 18px rgba(42,56,157,.2);
}
.sites-page .comparison-side--siteos .comparison-arrow{color:#fff}

/* Bring the Traditional side into the same visual system while keeping its linear story. */
.sites-page .comparison-side--traditional .comparison-label{
    border-color:rgba(92,117,161,.42);
    background:rgba(255,255,255,.58);
    box-shadow:0 6px 14px rgba(83,107,151,.1);
    color:#53698f;
}
.sites-page .comparison-side--traditional .comparison-step i{
    border:1px solid rgba(255,255,255,.8);
    background:rgba(255,255,255,.58);
    color:#5a7099;
    box-shadow:0 0 0 5px rgba(147,169,207,.14),0 6px 14px rgba(78,102,149,.12);
}
.sites-page .comparison-side--traditional .comparison-step span{
    padding:2px 5px;
    border:1px solid rgba(132,154,193,.22);
    border-radius:4px;
    background:rgba(255,255,255,.58);
    color:#243b63;
    font-size:10px;
}

/* Keep both comparison backgrounds on the same full-height footprint. */
.sites-page .comparison-side--traditional,
.sites-page .comparison-side--siteos{
    align-self:stretch;
}

/* Center the Traditional process as a compact row within its panel. */
.sites-page .comparison-side--traditional .comparison-flow{
    position:absolute;
    top:50%;
    left:50%;
    width:calc(100% - 24px);
    max-width:420px;
    margin:0;
    justify-content:center;
    transform:translate(-50%,-50%);
}
@media(max-width:600px){
    .sites-page .comparison-side--traditional .comparison-flow{
        position:relative;
        top:0;
        left:auto;
        width:100%;
        max-width:none;
        margin-top:16px;
        transform:none;
    }
}

/* Pull the takeaway lines above the panels so they read as section captions. */
.sites-page .comparison-side .comparison-note{
    position:absolute;
    top:-27px;
    margin:0;
    color:var(--sponsor-ink);
    font-size:13px;
    font-style:normal;
    font-weight:700;
    line-height:1.25;
}
.sites-page .comparison-side--traditional .comparison-note{
    left:19px;
    text-align:left;
}
.sites-page .comparison-side--siteos .comparison-note{
    right:19px;
    text-align:right;
}
@media(max-width:1000px){
    .sites-page .comparison-side .comparison-note{
        top:-24px;
    }
}

.sites-page .comparison-side--siteos .comparison-note{margin-top:0}

/* Give the captions a clear band of space above the comparison panels. */
.sites-page .comparison-shell{
    padding-top:43px;
}
@media(max-width:1000px){
    .sites-page .comparison-shell{
        padding-top:36px;
    }
}

/* Keep the takeaway lines inside each panel, beneath its process. */
.sites-page .comparison-side .comparison-note{
    position:static;
    top:auto;
    right:auto;
    left:auto;
    margin:auto 0 0;
    color:#687895;
    font-size:12px;
    font-style:italic;
    font-weight:700;
    line-height:normal;
    text-align:center;
}
.sites-page .comparison-side--siteos .comparison-note{
    color:rgba(255,255,255,.96);
}
.sites-page .comparison-shell{
    padding-top:27px;
}
@media(max-width:1000px){
    .sites-page .comparison-shell{
        padding-top:20px;
    }
}

/* Turn the SiteOS steps into a continuous three-part loop. */
.sites-page .comparison-flow--loop{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:58px 58px;
    gap:10px 34px;
    min-height:126px;
    margin-top:6px;
    padding:8px 22px 0;
    top:0;
}

.sites-page .comparison-flow--loop::before{
    display:none;
}
.sites-page .comparison-flow--loop::after{display:none}
.sites-page .comparison-loop-connectors{
    position:absolute;
    inset:8px 18px 0;
    z-index:0;
    width:calc(100% - 36px);
    height:100%;
    overflow:visible;
    pointer-events:none;
}
.sites-page .comparison-loop-connector{
    fill:none;
    stroke:rgba(255,255,255,.78);
    stroke-dasharray:2 5;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:1.25;
    marker-end:url("#siteos-loop-arrowhead");
}
.sites-page .comparison-loop-connectors marker path{fill:rgba(255,255,255,.9)}
.sites-page .comparison-flow--loop .comparison-step{
    position:relative;
    z-index:1;
    gap:7px;
    font-size:10px;
}
.sites-page .comparison-flow--loop .comparison-step i{
    width:38px!important;
    min-width:38px;
    max-width:38px;
    height:38px!important;
    min-height:38px;
    max-height:38px;
    flex-basis:38px;
    box-shadow:0 0 0 5px rgba(255,255,255,.14),0 6px 14px rgba(42,56,157,.18);
}
.sites-page .comparison-flow--loop .comparison-step--work{
    grid-column:1;
    grid-row:1;
    justify-self:start;
}
.sites-page .comparison-flow--loop .comparison-step--context{
    grid-column:2;
    grid-row:1;
    justify-self:end;
}
.sites-page .comparison-flow--loop .comparison-step--correct{
    grid-column:1 / -1;
    grid-row:2;
    justify-self:center;
}
@media(max-width:600px){
    .sites-page .comparison-flow--loop{
        grid-template-rows:52px 52px;
        min-height:114px;
        gap:8px 20px;
        padding:6px 8px 0;
    }
    .sites-page .comparison-loop-connectors{inset:6px 8px 0;width:calc(100% - 16px)}
    .sites-page .comparison-flow--loop .comparison-step{font-size:8px}
    .sites-page .comparison-flow--loop .comparison-step i{box-shadow:0 0 0 4px rgba(255,255,255,.14),0 5px 12px rgba(42,56,157,.18)}
}
/* Place all three icon centers on one ellipse, with labels clear of its arcs. */
.sites-page .comparison-flow--loop{
    display:block;
    height:190px;
    min-height:190px;
    padding:0;
    margin:4px 0 10px;
}
.sites-page .comparison-flow--loop .comparison-loop-connectors{
    inset:0;
    width:100%;
    height:100%;
}
.sites-page .comparison-flow--loop .comparison-step{
    position:absolute;
    width:38px;
    top:56px;
    transform:translateX(-50%);
}
.sites-page .comparison-flow--loop .comparison-step--work{left:12%}
.sites-page .comparison-flow--loop .comparison-step--context{left:88%}
.sites-page .comparison-flow--loop .comparison-step--correct{left:50%;top:116px}
.sites-page .comparison-flow--loop .comparison-step span{
    position:absolute;
    top:46px;
    left:50%;
    transform:translateX(-50%);
    width:max-content;
    max-width:none;
    padding:2px 5px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:4px;
    background:rgba(77,57,184,.42);
    font-size:10px;
}
.sites-page .comparison-flow--loop .comparison-step--work span{left:48px;transform:none;top:-14px}
.sites-page .comparison-flow--loop .comparison-step--context span{left:auto;right:48px;transform:none;top:-14px}
@media(max-width:600px){
    .sites-page .comparison-flow--loop .comparison-step--work span,
    .sites-page .comparison-flow--loop .comparison-step--context span{width:52px;white-space:normal;top:-10px}
}

/* On phones, turn the visual loop into a clear, full-width sequence. The
   elliptical desktop treatment leaves the labels too small and too dispersed. */
@media(max-width:600px){
    .sites-page .comparison-shell{
        gap:10px;
        padding:10px;
    }
    .sites-page .comparison-side{
        padding:15px 13px 16px;
    }
    .sites-page .comparison-side--traditional .comparison-flow{
        width:100%;
        max-width:none;
        gap:4px;
    }
    .sites-page .comparison-side--traditional .comparison-step{
        gap:12px;
    }
    .sites-page .comparison-side--traditional .comparison-step span{
        display:flex;
        width:100%!important;
        min-height:34px;
        align-items:center;
        box-sizing:border-box;
        padding:7px 10px;
        border-radius:8px;
        font-size:12px;
        line-height:1.25;
    }
    .sites-page .comparison-side--traditional .comparison-arrow{
        height:12px!important;
        flex-basis:12px!important;
    }
    .sites-page .comparison-center{
        width:72px;
        height:72px;
        border-width:5px;
    }
    .sites-page .comparison-center img{
        width:40px;
        height:40px;
    }
    .sites-page .comparison-flow--loop{
        display:flex;
        width:100%;
        height:auto;
        min-height:0;
        flex-direction:column;
        gap:4px;
        margin:8px 0 0;
        padding:0;
    }
    .sites-page .comparison-flow--loop .comparison-loop-connectors{
        display:none;
    }
    .sites-page .comparison-flow--loop .comparison-step,
    .sites-page .comparison-flow--loop .comparison-step--work,
    .sites-page .comparison-flow--loop .comparison-step--context,
    .sites-page .comparison-flow--loop .comparison-step--correct{
        position:relative;
        top:auto;
        left:auto;
        display:grid;
        width:100%;
        grid-template-columns:31px minmax(0,1fr);
        align-items:center;
        gap:12px;
        transform:none;
    }
    .sites-page .comparison-flow--loop .comparison-step i{
        width:31px!important;
        min-width:31px;
        max-width:31px;
        height:31px!important;
        min-height:31px;
        max-height:31px;
        flex-basis:31px;
    }
    .sites-page .comparison-flow--loop .comparison-step span,
    .sites-page .comparison-flow--loop .comparison-step--work span,
    .sites-page .comparison-flow--loop .comparison-step--context span{
        position:static;
        display:flex;
        width:100%!important;
        min-height:34px;
        align-items:center;
        box-sizing:border-box;
        padding:7px 10px;
        transform:none;
        font-size:12px;
        line-height:1.25;
        text-align:left;
        white-space:normal;
    }
    .sites-page .comparison-note{
        margin-top:14px;
        text-align:left;
    }
}