/* Offers: three equal cards within the native outer margins. */
.c2s-lab-packs > .container { padding-inline: var(--space-6); }
.c2s-lab-packs__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-6); align-items: start; }
.c2s-lab-packs .cds-services__title { grid-column: 2 / span 10; grid-row: auto; padding-bottom: 0; margin: 0; text-align: center; }
.c2s-lab-packs__intro { grid-column: 3 / span 8; justify-self: center; max-width: 56ch; margin: 0; text-align: center; color: var(--color-body-light); font-size: var(--18px-size); line-height: 1.6; padding-bottom: calc(var(--col) * .5); }
.c2s-lab-packs__cards { container-type: inline-size; grid-column: 2 / span 10; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.c2s-lab-pack { display: grid; grid-template-rows: subgrid; grid-row: span 4; min-width: 0; background: var(--white); padding: var(--space-6); color: var(--color-heading); }
/* A quiet tint below every control and label; Ultra keeps only this subtle reflection. */
.c2s-lab-packs .c2s-lab-pack::after,
.c2s-lab-contact .c2s-contact__design::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 70%); opacity: 0; transition: opacity var(--duration-base) var(--ease-out-expo); }
.c2s-lab-packs .c2s-lab-pack[data-design-level="2"]::after,
.c2s-lab-contact .c2s-contact__design[data-design-level="2"]::after { opacity: .5; }
@media (hover: hover) and (pointer: fine) {
    .c2s-lab-packs .c2s-lab-pack:hover::after { opacity: 1; }
}
.c2s-lab-pack h3 { color: inherit; font-size: var(--34px-size); font-weight: 500; line-height: 1.1; margin: 0 0 var(--space-4); }
.c2s-lab-pack__description { font-size: var(--14px-size); line-height: 1.6; color: var(--color-body-light); margin: 0; }
.c2s-lab-pack__from { display: block; color: var(--color-body-light); font-size: var(--12px-size); margin-bottom: var(--space-2); }
.c2s-lab-pack__price { color: var(--color-heading); font-size: clamp(var(--20px-size), 3cqi, var(--34px-size)); line-height: 1.2; font-weight: 500; margin: 0; letter-spacing: -.035em; }
.c2s-lab-pack__amounts { display: flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; }
.c2s-lab-pack__setup, .c2s-lab-pack__recurring { white-space: nowrap; }

.c2s-lab-pack__unit { font-size: var(--12px-size); font-weight: 400; letter-spacing: 0; }
.c2s-lab-pack__terms { display: flex; align-items: baseline; gap: var(--space-1); white-space: nowrap; color: var(--color-body-light); font-size: var(--14px-size); font-weight: 400; line-height: 1.5; letter-spacing: 0; margin: var(--space-2) 0 0; }
.c2s-lab-pack__term, .c2s-lab-pack__total { font: inherit; color: inherit; margin: 0; }
.c2s-lab-pack .c2s-counter__static { white-space: pre; }
/* Price-only layout correction; shared public counter animation remains untouched. */
.c2s-lab-pack [data-pack-counter] { position: relative; display: inline-block; line-height: 1; }
.c2s-lab-pack__price-reference { visibility: hidden; white-space: pre; }
.c2s-lab-pack__price-reels { position: absolute; inset: 0; display: flex; align-items: start; }
.c2s-lab-pack [data-pack-counter] .c2s-counter__slot { position: relative; flex: 0 0 auto; }
.c2s-lab-pack__digit-width { display: block; visibility: hidden; }
.c2s-lab-pack [data-pack-counter] .c2s-counter__track { position: absolute; top: 0; left: 0; right: 0; text-align: center; }

.c2s-lab-pack__accessible-price { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.c2s-lab-pack__feature-detail { display: block; font-size: var(--12px-size); line-height: 1.5; color: var(--color-body-light); margin-top: var(--space-1); }
.c2s-lab-pack__features { border-top: calc(var(--space-1) / 4) solid var(--color-border); list-style: none; display: grid; align-content: start; gap: var(--space-4); padding: var(--space-6) 0 0; margin: 0; }
.c2s-lab-pack__features li { display: flex; gap: var(--space-3); align-items: baseline; font-size: var(--14px-size); line-height: 1.5; }
.c2s-lab-pack__features svg { color: var(--color-primary); flex: none; width: var(--18px-size); height: var(--18px-size); align-self: start; margin-top: var(--space-1); }
.c2s-lab-pack__upgrade { position: relative; align-content: start; border-top: calc(var(--space-1) / 4) solid var(--color-border); padding-top: var(--space-6); }
.c2s-lab-pack__help { position: relative; flex: none; }
.c2s-lab-pack__help summary { display: flex; align-items: center; justify-content: center; width: var(--space-6); height: var(--space-6); border: 1px solid currentColor; border-radius: 50%; font-size: var(--14px-size); line-height: 1; cursor: pointer; list-style: none; }
.c2s-lab-pack__help summary::-webkit-details-marker { display: none; }
.c2s-lab-pack__help summary:hover, .c2s-lab-pack__help[open] summary { color: var(--color-primary); }
.c2s-lab-pack__help summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: var(--space-1); }
.c2s-lab-pack__help-body { position: absolute; z-index: var(--z-overlay); bottom: calc(100% + var(--space-2)); left: var(--help-left, 0px); width: var(--help-width, calc(var(--space-20) * 3)); padding: var(--space-4); background: var(--color-heading); color: var(--white); border: 1px solid var(--color-body-light); font-size: var(--14px-size); line-height: 1.5; }
.c2s-lab-pack__help-body p { color: inherit; margin: 0 0 var(--space-3); }
.c2s-lab-pack__help-body a { color: var(--color-primary); }
/* The canonical button becomes the card link; its existing arrow is the only visible part. */
.c2s-lab-packs [data-pack] > .c2s-lab-pack__cta { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.c2s-lab-pack__cta .c2s-footer__cta-btn { position: absolute; inset: 0; width: auto; height: auto; padding: 0; display: block; border-radius: inherit; pointer-events: auto; }
.c2s-lab-pack__cta .c2s-btn__bg,
.c2s-lab-pack__cta .c2s-btn__circle-wrap { display: none; }
.c2s-lab-pack__cta .c2s-btn__text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.c2s-lab-pack__cta .c2s-btn__icon { font-size: var(--space-6); position: absolute; top: var(--space-6); right: var(--space-6); margin: 0; }
.c2s-lab-pack__cta .c2s-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: var(--space-1); }
.c2s-lab-packs [data-pack] > .c2s-lab-pack__upgrade { z-index: 3; }
.c2s-lab-pack__heading h3 { padding-right: var(--space-8); }
/* Only the card link keeps its arrow on keyboard focus; Design focus never latches it.
   Preserve the native icon transforms and transition timing. */
.c2s-lab-pack__cta .c2s-btn:focus-visible .c2s-btn__icon-bg { transform: rotate(90deg); }
.c2s-lab-pack__cta .c2s-btn:focus-visible .c2s-btn__arrow { transform: translate(200%, 0px); }
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
 .c2s-lab-pack__cta .c2s-btn__icon { opacity: 0; }
 .c2s-lab-pack:hover .c2s-lab-pack__cta .c2s-btn__icon,
 .c2s-lab-pack__cta .c2s-btn:focus-visible .c2s-btn__icon { opacity: 1; }
 .c2s-lab-pack:hover .c2s-lab-pack__cta .c2s-btn__icon-bg { transform: rotate(90deg); }
 .c2s-lab-pack:hover .c2s-lab-pack__cta .c2s-btn__arrow { transform: translate(200%, 0px); }
}
.c2s-lab-pack--ultimate { background: var(--color-heading); color: var(--white); }
.c2s-lab-pack--ultimate .c2s-lab-pack__price { color: var(--color-primary); }
.c2s-lab-pack--ultimate .c2s-lab-pack__description,
.c2s-lab-pack--ultimate .c2s-lab-pack__terms,
.c2s-lab-pack--ultimate .c2s-lab-pack__from,
.c2s-lab-pack--ultimate .c2s-lab-pack__total,
.c2s-lab-pack--ultimate .c2s-lab-pack__feature-detail { color: var(--lightergrey); }
.c2s-lab-pack--ultimate .c2s-lab-pack__features,
.c2s-lab-pack--ultimate .c2s-lab-pack__upgrade { border-color: var(--color-body-light); }
.c2s-lab-packs__note { text-align: center; grid-column: 2 / span 10; font-size: var(--14px-size); line-height: 1.5; color: var(--color-body-light); margin: 0; }
@media (min-width: 992px) and (max-width: 1279px) {
    .c2s-lab-packs__cards { gap: var(--space-4); }
    .c2s-lab-pack { padding: var(--space-4); }
    .c2s-lab-pack__cta .c2s-btn__icon { top: var(--space-4); right: var(--space-4); }
    .c2s-lab-pack__features li { font-size: var(--14px-size); }
}
@media (max-width: 991px) {
    .c2s-lab-packs .cds-services__title { grid-column: 1 / -1; font-size: var(--48px-size); }
    .c2s-lab-packs__intro { grid-column: 2 / span 10; }
    .c2s-lab-packs__cards { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
    .c2s-lab-pack__price { font-size: clamp(var(--20px-size), 8.5cqi, var(--34px-size)); }
    .c2s-lab-pack { grid-row: auto; grid-template-rows: auto; gap: var(--space-6); }
    .c2s-lab-packs__note { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    .c2s-lab-packs .cds-services__title,
    .c2s-lab-packs__intro { grid-column: 1 / -1; }
    .c2s-lab-packs .cds-services__title { padding-bottom: 0; }
    .c2s-lab-packs__intro { padding-bottom: calc(var(--col) * .5); }
}

.c2s-lab-packs--seo .c2s-lab-pack { grid-row: span 3; }
.c2s-lab-packs__note a { color: var(--color-primary); white-space: nowrap; }
.c2s-lab-pack__help-body::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: var(--space-3); }
/* Native reveal/accordion/peel keep ownership of approach layout. */
.c2s-lab-page .c2s-lab-packs { padding-top: calc(var(--col) * 1.5); padding-bottom: var(--col); background: var(--color-bg); }
.c2s-lab-approach { padding-top: var(--col); padding-bottom: calc(var(--col) * 2.75); background: var(--color-bg); }
/* Exact native Creation service-grid video placement, also available on the SEO copy. */
.c2s-lab-approach .cds-services__video-wrap { grid-column: 9 / -1; grid-row: 1 / 3; align-self: stretch; margin-block: -2.25em -4.5em; border-radius: 1em; overflow: hidden; }
.c2s-lab-approach .cds-services__video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Scope FAQ layout fixes to copies: native approach selectors otherwise win the cascade. */
.c2s-lab-page .tv-faq__bounds { gap: var(--space-6); }
.c2s-lab-page .tv-faq .tv-faq__list { grid-column: 2 / span 10; }
.c2s-lab-page .tv-faq .tv-faq__a p { padding: 0; margin: 0 0 var(--space-4); max-width: none; color: inherit; font: inherit; }
.c2s-lab-page .tv-faq .tv-faq__a p:last-child { margin-bottom: 0; }
@media (max-width: 991px) {
    .c2s-lab-packs--seo .c2s-lab-pack { grid-row: auto; }
    .c2s-lab-approach .cds-services__video-wrap { grid-column: 1 / -1; grid-row: auto; margin-block: 0; margin-top: var(--space-6); max-height: 60vh; }
    .c2s-lab-page .tv-faq .tv-faq__list, .c2s-lab-page .tv-faq__title { grid-column: 1 / -1; }
}


@media (min-width: 992px) and (max-width: 1279px) {
    .c2s-lab-approach .cds-services__title { grid-column: 1 / span 4; }
}

/* Three-level control. Motion is rendered by design-slider.js, not CSS loops. */
.c2s-design { --design-thumb: var(--space-8); }
.c2s-design__heading { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--14px-size); line-height: 1.4; }
.c2s-design__heading > label { cursor: pointer; }
.c2s-design__heading .c2s-lab-pack__help summary { width: var(--space-6); height: var(--space-6); font-size: var(--12px-size); }
.c2s-design__level { color: var(--color-primary); font-weight: 500; margin-left: auto; white-space: nowrap; }
.c2s-design__control { position: relative; height: var(--space-12); isolation: isolate; }
.c2s-design__scene { position: absolute; inset: var(--space-1) 0; overflow: hidden; border-radius: var(--space-12); background: var(--color-heading); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent); pointer-events: none; }
.c2s-design__scene canvas { width: 100%; height: 100%; display: block; }
.c2s-design__stops { position: absolute; inset: 0 calc(var(--design-thumb) / 2) 0 calc(25% + var(--design-thumb) / 4); display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.c2s-design__stops i { width: var(--space-1); height: var(--space-1); border-radius: 50%; background: var(--lightergrey); opacity: .6; }
.c2s-design__thumb { position: absolute; top: calc(50% - var(--design-thumb) / 2); left: 0; width: var(--design-thumb); height: var(--design-thumb); border-radius: 50%; background: var(--white); box-shadow: 0 0 var(--space-4) color-mix(in srgb, var(--color-primary) 65%, transparent), 0 var(--space-1) var(--space-2) color-mix(in srgb, var(--color-heading) 45%, transparent); pointer-events: none; will-change: transform; }
.c2s-design:not([data-design-renderer]) .c2s-design__thumb { left: calc((100% - var(--design-thumb)) * .25); }
.c2s-design[data-design-level="1"]:not([data-design-renderer]) .c2s-design__thumb { left: calc((100% - var(--design-thumb)) * .625); }
.c2s-design[data-design-level="2"]:not([data-design-renderer]) .c2s-design__thumb { left: calc(100% - var(--design-thumb)); }
.c2s-design__range { position: absolute; inset: 0 0 0 calc(25% - var(--design-thumb) / 4); width: calc(75% + var(--design-thumb) / 4); height: 100%; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: grab; touch-action: pan-y; border-radius: var(--space-12); }
.c2s-design__range:active { cursor: grabbing; }
.c2s-design__range::-webkit-slider-runnable-track { height: var(--design-thumb); background: transparent; border: 0; }
.c2s-design__range::-moz-range-track { height: var(--design-thumb); background: transparent; border: 0; }
.c2s-design__range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: var(--design-thumb); height: var(--design-thumb); border: 0; background: transparent; }
.c2s-design__range::-moz-range-thumb { width: var(--design-thumb); height: var(--design-thumb); border: 0; background: transparent; }

/* Ultra keeps the original card surface, without a decorative outline. */
.c2s-lab-pack { position: relative; isolation: isolate; transition: background-color .65s, color .65s, box-shadow .65s; }
.c2s-lab-pack > * { position: relative; z-index: 1; }
.c2s-lab-pack { --pack-surface: var(--white); }
.c2s-lab-pack--ultimate { --pack-surface: var(--color-heading); }
.c2s-design__scene { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lightergrey) 25%, transparent); }
.c2s-design__scene canvas { clip-path: inset(0 75% 0 0); }
.c2s-design__example { margin: var(--space-3) 0 0; font-size: var(--12px-size); line-height: 1.5; color: inherit; }
.c2s-design__example a, .c2s-design__example-button { color: var(--color-primary); }
.c2s-design__example-button { display: inline; padding: 0; border: 0; background: none; font: inherit; line-height: inherit; text-align: inherit; vertical-align: baseline; cursor: pointer; }
.c2s-design__example-button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: var(--space-1); }
.c2s-design__example [hidden] { display: none !important; }
.c2s-design__example a:not([href]) { cursor: default; }
.c2s-design__example a:not([href])::after { display: none; }
@media (prefers-reduced-motion: reduce) {
    .c2s-lab-pack, .c2s-lab-packs .c2s-lab-pack::after, .c2s-lab-contact .c2s-contact__design::after { transition-duration: .15s; }
}
.c2s-design__range:focus-visible { outline: none; }
.c2s-design__control:has(.c2s-design__range:focus-visible) { outline: 2px solid var(--color-body-light); outline-offset: var(--space-1); border-radius: var(--space-12); }