.sk-checks span,
.sk-step__title,
.sk-step__when,
.sk-step__text,
.sk-results__label,
.sk-sample__label,
.sk-note p {
-webkit-hyphens: none;
hyphens: none;
}
.sk-hero .service-hero__grid {
grid-template-columns: minmax(0, 1fr);
align-items: center;
}
@media (min-width: 1024px) {
.sk-hero {
min-height: 0;
padding-block: var(--space-9) var(--space-8);
}
.sk-hero .service-hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.74fr);
gap: var(--space-8);
}
}
.sk-hero .service-hero__content {
max-width: 46rem;
}
.sk-hero__media {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
.sk-hero__doc-link {
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-1) var(--space-2);
min-height: 44px;
padding-inline: var(--space-2);
text-align: center;
font-size: var(--font-size-sm);
color: rgb(255 255 255 / 0.82);
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
transition: color var(--duration-base) var(--easing-standard);
}
.sk-hero__doc-link:hover,
.sk-hero__doc-link:focus-visible {
color: var(--color-white);
}
.sk-hero__doc-icon {
flex: none;
width: 1.125rem;
height: 1.125rem;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
color: var(--color-blue-light);
}
.sk-doc {
width: 100%;
max-width: 14rem;
height: auto;
font-family: var(--font-family-base);
}
@media (min-width: 640px) {
.sk-doc {
max-width: 18rem;
}
}
@media (min-width: 1024px) {
.sk-doc {
max-width: 26rem;
}
}
.sk-doc__behind rect {
fill: rgb(255 255 255 / 0.14);
}
.sk-doc__sheet {
fill: var(--color-white);
}
.sk-doc__mark,
.sk-doc__num {
fill: var(--color-blue-light);
}
.sk-doc__line {
fill: rgb(59 73 86 / 0.22);
}
.sk-doc__rule {
stroke: rgb(59 73 86 / 0.16);
stroke-width: 1;
}
.sk-doc__chip {
fill: rgb(61 154 211 / 0.14);
}
.sk-doc__chip-text {
font-size: 7px;
font-weight: 500;
letter-spacing: 0.06em;
fill: color-mix(in srgb, var(--color-blue-dark) 85%, black);
}
.sk-doc__title {
font-size: 21px;
font-weight: 500;
letter-spacing: -0.01em;
fill: var(--color-logo-black);
}
.sk-doc__sub {
font-size: 9.5px;
fill: rgb(59 73 86 / 0.8);
}
.sk-doc__foot {
font-size: 8px;
fill: rgb(59 73 86 / 0.6);
}
.sk-doc__matrix .t1 { fill: rgb(61 154 211 / 0.14); }
.sk-doc__matrix .t2 { fill: rgb(61 154 211 / 0.30); }
.sk-doc__matrix .t3 { fill: rgb(61 154 211 / 0.52); }
.sk-doc__matrix .t4 { fill: rgb(61 154 211 / 0.78); }
.sk-hero .service-hero__points {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
}
.sk-parts .section__intro,
.sk-when .section__intro,
.sk-process .section__intro,
.sk-advice .section__intro,
.sk-price .section__intro {
text-align: center;
}
.sk-parts .section__intro > *,
.sk-when .section__intro > *,
.sk-process .section__intro > *,
.sk-advice .section__intro > *,
.sk-price .section__intro > * {
margin-inline: auto;
}
.sk-advice .sk-checks,
.sk-price .sk-checks {
max-width: 46rem;
margin-inline: auto;
}
.sk-parts .sk-checks--grid {
max-width: 60rem;
margin-inline: auto;
}
.sk-when .sk-note {
margin-inline: auto;
}
.sk-process .sk-actions {
justify-content: center;
}
.sk-checks {
list-style: none;
margin: var(--space-7) 0 0;
padding: 0;
display: grid;
gap: 0;
}
.sk-checks li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-4);
align-items: start;
padding-block: var(--space-4);
border-top: 1px solid var(--color-border);
line-height: var(--line-height-base);
color: var(--color-text-muted);
}
.sk-checks li:last-child {
border-bottom: 1px solid var(--color-border);
}
.sk-checks strong {
color: var(--color-text);
font-weight: 500;
}
.sk-checks__tick {
width: 1.25rem;
height: 1.25rem;
margin-top: 0.2em;
color: var(--color-blue-light);
fill: none;
stroke: currentColor;
stroke-width: 2.25;
}
@media (min-width: 900px) {
.sk-checks--grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-8);
}
.sk-checks--grid li:nth-child(2) {
border-top: 1px solid var(--color-border);
}
}
.sk-note {
margin-top: var(--space-7);
max-width: 46rem;
padding: var(--space-5) var(--space-6);
border-left: 2px solid var(--color-blue-light);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
background-color: rgb(255 255 255 / 0.04);
color: var(--color-text-muted);
line-height: var(--line-height-base);
}
.sk-note strong { color: var(--color-text); font-weight: 500; }
.section--light .sk-note {
background-color: rgb(59 73 86 / 0.05);
}
.sk-steps {
--sk-dot: 12px;
list-style: none;
margin: var(--space-8) 0 0;
padding: 0;
display: grid;
gap: var(--space-7);
max-width: 52rem;
margin-inline: auto;
}
@media (min-width: 1024px) {
.sk-steps {
--sk-gutter: 2.5rem;
max-width: 62rem;
margin-inline: auto;
}
.sk-step {
width: calc(50% - var(--sk-gutter));
padding-left: 0;
}
.sk-step:nth-child(odd) {
margin-inline-end: auto;
text-align: right;
}
.sk-step:nth-child(even) {
margin-inline-start: auto;
text-align: left;
}
.sk-step:nth-child(odd)::before,
.sk-step:nth-child(odd):not(:last-child)::after {
left: auto;
right: calc(-1 * var(--sk-gutter) - var(--sk-dot) / 2);
}
.sk-step:nth-child(even)::before,
.sk-step:nth-child(even):not(:last-child)::after {
left: calc(-1 * var(--sk-gutter) - var(--sk-dot) / 2);
}
.sk-step:nth-child(odd):not(:last-child)::after {
right: calc(-1 * var(--sk-gutter) - 0.5px);
}
.sk-step:nth-child(even):not(:last-child)::after {
left: calc(-1 * var(--sk-gutter) - 0.5px);
}
}
.sk-step {
position: relative;
padding-left: var(--space-8);
}
.sk-step::before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: var(--sk-dot);
height: var(--sk-dot);
background-color: var(--color-blue-light);
opacity: var(--step-node, 1);
transform: scale(var(--step-node, 1));
}
.sk-step:not(:last-child)::after {
content: "";
position: absolute;
left: calc(var(--sk-dot) / 2 - 0.5px);
top: calc(6px + var(--sk-dot) + 8px);
bottom: calc(-1 * (var(--space-7) + 4px));
width: 1px;
background-color: var(--color-blue-light);
transform: scaleY(var(--step-line, 1));
transform-origin: top center;
opacity: 0.45;
}
.sk-step__num {
display: block;
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
letter-spacing: 0.06em;
color: var(--color-text-muted);
margin-bottom: var(--space-1);
}
.sk-step__title {
font-size: var(--font-size-md);
font-weight: 500;
line-height: 1.3;
color: var(--color-text);
}
.sk-step__when {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-regular);
color: var(--color-text-muted);
}
@media (min-width: 640px) {
.sk-step__when { display: inline; }
.sk-step__when::before { content: "· "; }
}
.sk-step__text {
margin-top: var(--space-2);
line-height: var(--line-height-base);
color: var(--color-text-muted);
}
.sk-results-sec .section__intro {
text-align: center;
}
.sk-results-sec .section__intro h2 {
max-width: 26ch;
margin-inline: auto;
}
.sk-results {
list-style: none;
margin: var(--space-8) 0 0;
padding: 0;
display: grid;
gap: var(--space-6);
}
@media (min-width: 768px) {
.sk-results { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
}
.sk-results__link {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-2);
padding: var(--space-4);
border-radius: var(--radius-md);
text-decoration: none;
color: inherit;
transition: background-color var(--duration-base) var(--easing-standard);
}
.sk-results__link:hover,
.sk-results__link:focus-visible {
background-color: rgb(59 73 86 / 0.05);
}
.sk-results .stat__value {
font-size: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem);
font-weight: var(--font-weight-regular);
color: var(--color-accent-strong);
font-variant-numeric: tabular-nums;
line-height: 1.05;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.sk-results .stat__value {
font-size: clamp(2.25rem, 6.7vw - 0.9rem, 4.15rem);
}
}
.sk-results__label {
display: block;
color: rgb(59 73 86 / 0.75);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
}
.sk-results__more {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-2);
font-size: var(--font-size-sm);
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
}
.sk-results__more .icon {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: currentColor;
transition: rotate var(--duration-base) var(--easing-standard);
}
.sk-results__link:hover .sk-results__more .icon,
.sk-results__link:focus-visible .sk-results__more .icon {
rotate: 45deg;
}
.sk-quote {
margin-top: var(--space-8);
max-width: 46rem;
margin-inline: auto;
}
.sk-sample__grid {
display: grid;
gap: var(--space-7);
align-items: center;
}
@media (min-width: 900px) {
.sk-sample__grid {
grid-template-columns: 1fr 0.7fr;
gap: var(--space-9);
}
}
.sk-sample__frame {
max-width: 22rem;
width: 100%;
margin-inline: auto;
}
.sk-sample__doc {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
text-decoration: none;
color: inherit;
transition: transform var(--duration-base) var(--easing-standard);
}
.sk-sample__doc:hover,
.sk-sample__doc:focus-visible {
transform: translateY(-4px);
}
.sk-sample__doc .sk-doc {
max-width: 100%;
filter: drop-shadow(0 18px 40px rgb(1 1 1 / 0.13));
transition: filter var(--duration-base) var(--easing-standard);
}
.sk-sample__doc:hover .sk-doc,
.sk-sample__doc:focus-visible .sk-doc {
filter: drop-shadow(0 26px 52px rgb(1 1 1 / 0.18));
}
.section--light .sk-doc__behind rect {
fill: rgb(59 73 86 / 0.13);
}
.section--light .sk-doc__sheet {
stroke: rgb(1 1 1 / 0.08);
stroke-width: 1;
}
.sk-sample__doc-text {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
text-align: center;
}
.sk-sample__doc-title {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-md);
font-weight: 500;
color: var(--color-logo-black);
}
.sk-sample__doc-meta {
font-size: var(--font-size-sm);
color: rgb(59 73 86 / 0.88);
-webkit-hyphens: none;
hyphens: none;
}
.sk-sample__doc-arrow {
width: 1.5rem;
height: 1.5rem;
fill: none;
stroke: color-mix(in srgb, var(--color-blue-dark) 85%, black);
stroke-width: 1.75;
transition: transform var(--duration-base) var(--easing-standard);
}
.sk-sample__doc:hover .sk-sample__doc-arrow,
.sk-sample__doc:focus-visible .sk-sample__doc-arrow {
transform: rotate(45deg);
}
.sk-actions {
margin-top: var(--space-7);
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
.sk-cta-box {
margin-top: var(--space-8);
width: fit-content;
max-width: 100%;
margin-inline: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--space-4) var(--space-6);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: rgb(255 255 255 / 0.04);
}
.sk-cta-box__line {
color: var(--color-text);
font-size: var(--font-size-md);
}
@media (max-width: 639.98px) {
.sk-actions,
.sk-cta-box {
flex-direction: column;
align-items: stretch;
}
.sk-cta-box {
width: auto;
}
.sk-actions .btn,
.sk-cta-box .btn {
width: 100%;
justify-content: center;
white-space: normal;
}
}
.sk-certs {
margin-top: var(--space-8);
padding-top: 0;
border-top: 0;
}
.sk-trust .section__intro {
text-align: center;
}
.sk-trust .section__intro h2 {
max-width: 34ch;
margin-inline: auto;
}
.sk-trust .section__intro > p {
margin-inline: auto;
}
.sk-trust .section__intro a {
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
}
.sk-parts .section__intro h2,
.sk-when .section__intro h2,
.sk-price .section__intro h2 {
max-width: 26ch;
}
.sk-advice .section__intro h2 {
max-width: 30ch;
}