/* The same service colours in the menu, homepage and service detail pages. */
.service-custom{--service-tone:var(--service-custom);--service-line:var(--service-custom-line)}
.service-launch{--service-tone:var(--service-launch);--service-line:var(--service-launch-line)}
.service-sales{--service-tone:var(--service-sales);--service-line:var(--service-sales-line)}
.service-offer-custom{--offer-tone:var(--service-custom);--offer-line:var(--service-custom-line)}
.service-offer-launch{--offer-tone:var(--service-launch);--offer-line:var(--service-launch-line)}
.service-offer-sales{--offer-tone:var(--service-sales);--offer-line:var(--service-sales-line)}

/* Separate homepage panels make the three offers easy to distinguish. */
#main .service-grid.three-services{border:0;background:transparent;gap:20px}
#main .service-grid.three-services>article{background:var(--offer-tone);border:1px solid var(--offer-line);border-radius:14px;box-shadow:0 10px 30px #16203007;overflow:hidden}

/* Repeated highlights carry each page's service identity; editorial content stays on white. */
.service-page .service-summary-list>li{background:var(--service-tone);border-color:var(--service-line);border-radius:12px;box-shadow:0 8px 24px #16203006}
.service-page .extras,.service-page .service-work-example{background:var(--service-tone);border:1px solid var(--service-line);border-radius:12px;box-shadow:0 8px 24px #16203006}
.service-page .process{background:color-mix(in srgb,var(--service-tone) 55%,white)}
.service-page .process:after{background:repeating-radial-gradient(circle,var(--service-line) 0 2px,transparent 2px 14px)}
.service-page .contact{background:#fff}
.service-custom .custom-price-card{background:var(--service-tone);border:1px solid var(--service-line);border-radius:14px;box-shadow:0 12px 35px #16203008}
.service-custom .custom-price-card li{border-color:var(--service-line)}

/* Frame the demos with the service palette, preserving each example's own branding. */
.service-page .design-section,.service-page .example-stage,.service-page .launch-pricing,.service-page .sales-pricing,.service-page .custom-choice{background:color-mix(in srgb,var(--service-tone) 65%,white)}
.service-page .example-guide,.service-page .sales-example-guide{background:#ffffffa6;border-color:var(--service-line);border-radius:12px;overflow:hidden;box-shadow:0 8px 24px #16203005}
.service-page .example-guide>div+div,.service-page .sales-example-guide>div+div,.service-page .after-demo p,.service-page .example-controls,.service-page .demo-tabs{border-color:var(--service-line)}
.service-page .device-preview,.service-page .example-browser{background:#fff;border-color:var(--service-line);border-radius:12px;box-shadow:0 18px 45px #16203014}
.service-page .device-preview{background:color-mix(in srgb,var(--service-tone) 22%,white)}
.service-launch .price-cards{gap:20px;border:0}
.service-launch .price-cards>article{border:1px solid var(--service-line);border-radius:14px;background:var(--service-tone);box-shadow:0 10px 30px #16203008}
.service-launch .price-cards>article.managed{background:var(--ink);border-color:var(--ink)}
.service-launch .price-cards>article:not(.managed) li{border-color:var(--service-line)}
.service-sales .sales-pricing .custom-price-card{background:var(--service-tone);color:var(--ink);border:1px solid var(--service-line);border-radius:14px;box-shadow:0 12px 35px #16203008}
.service-sales .sales-pricing .custom-price-card li{border-color:var(--service-line)}
.service-sales .sales-pricing .custom-price-card .payment-detail{color:var(--muted)}
.service-sales .sales-pricing .custom-price-card .hosting-fee{color:var(--ink);font-weight:500}
.service-sales .sales-pricing .custom-price-card .button{background:var(--ink);border-color:var(--ink);color:#fff}
.service-sales .sales-pricing .custom-price-card .button:hover{background:#35383f;border-color:#35383f}

/* Comparison cards keep the colour of the offer they describe. */
.service-page .fit-grid,.service-page .sales-choice-grid{border:0;gap:20px}
.service-page .fit-grid>article,.service-page .sales-choice-grid>article{background:var(--offer-tone,#fff);border:1px solid var(--offer-line,var(--service-line));border-radius:12px}
@media(max-width:700px){#main .service-grid.three-services,.service-launch .price-cards,.service-page .fit-grid,.service-page .sales-choice-grid{gap:16px}.service-page .device-preview,.service-page .example-browser{box-shadow:0 10px 28px #16203012}}
/* A tighter desktop rhythm, with a more compact closing call to action. */
@media(min-width:901px){
 .service-page{--space:clamp(68px,6vw,96px)}
 .service-page .section-top{margin-bottom:40px}
 .service-page .extras{margin-top:40px}
 .service-page .contact{padding-block:clamp(56px,4.8vw,76px)}
 .service-page .contact .eyebrow{margin-bottom:16px}
 .service-page .contact-grid h2{margin-bottom:22px}
 .service-page .contact-grid>div>p:first-child{margin-bottom:20px}
 .service-page .contact .contact-note{margin-top:14px}
 .service-page .contact-alternatives{margin-top:18px;gap:8px}
}

/* Keep process and example introductions attached to their headings. */
.service-page .process .section-top,.service-page .design-section .section-top,.service-page .example-stage .section-top{display:block}
.service-page .process .section-top .section-intro,.service-page .design-section .section-top .section-intro,.service-page .example-stage .section-top .section-intro{font-family:'Wix Madefor Display',Arial,sans-serif;font-size:clamp(1.125rem,1.5vw,1.35rem);line-height:1.55;letter-spacing:-.012em;max-width:760px;margin:24px 0 0;color:var(--muted);text-wrap:pretty}

/* Centre the explanation beside the full headline-and-lead group. */
.custom-difference-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,76px);align-items:center}
.custom-difference-intro{min-width:0}.custom-difference-intro h2{max-width:650px}
.custom-difference-intro .large{font-family:'Wix Madefor Display',Arial,sans-serif;font-size:clamp(1.45rem,1.9vw,1.8rem);line-height:1.4;letter-spacing:-.02em;max-width:540px;margin-top:28px;color:var(--ink)}
.custom-difference-copy{min-width:0}.custom-difference-copy>p{font-size:1rem;line-height:1.65;color:var(--muted);margin-bottom:22px}.custom-difference-copy>p:last-child{margin-bottom:0}

/* A small, readable build-time cue beside the offer. */
.service-page .hero-summary>p:first-child{margin-bottom:18px}
.service-timeline{display:inline-flex;align-items:center;gap:9px;width:fit-content;max-width:100%;padding:9px 14px;background:var(--service-tone);border:1px solid var(--service-line);border-radius:99px;font-size:.875rem;line-height:1.45;color:var(--ink);margin:0 0 22px}
.service-timeline svg{width:18px;height:18px;flex-shrink:0}.service-timeline strong{font-weight:600;white-space:nowrap}
@media(max-width:800px){.custom-difference-layout{grid-template-columns:1fr;gap:28px}.custom-difference-intro h2{max-width:700px}.custom-difference-intro .large{max-width:620px}.custom-difference-copy{max-width:740px}}
@media(max-width:700px){.custom-difference-intro .large{font-size:1.1875rem;line-height:1.5;letter-spacing:-.01em;margin-top:22px}.custom-difference-copy>p{font-size:1rem}.service-page .process .section-top .section-intro,.service-page .design-section .section-top .section-intro,.service-page .example-stage .section-top .section-intro{margin-top:22px}.service-timeline{padding:8px 12px;margin-bottom:22px}}

/* Optional extras: a single readable column with equal visual breathing room. */
.service-page .extras{
 display:grid;
 grid-template-columns:minmax(0,1fr);
 align-items:start;
 justify-items:start;
 gap:14px;
 padding:40px 44px;
}
.service-page .extras>.extras-title{
 max-width:42ch;
 margin:0;
 font-family:'Wix Madefor Display',Arial,sans-serif;
 font-size:1.1875rem;
 font-weight:500;
 line-height:1.4;
 letter-spacing:-.015em;
 color:var(--ink);
 text-wrap:pretty;
}
.service-page .extras>p{
 max-width:68ch;
 min-width:0;
 margin:0;
 font-size:1rem;
 line-height:1.65;
 color:var(--muted);
 text-wrap:pretty;
}
@media(max-width:700px){
 .service-page .extras{gap:12px;padding:30px 24px}
 .service-page .extras>.extras-title,.service-page .extras>p{max-width:100%}
}