.cs-hero {
padding-bottom: 0;
}.cs-hero__grid {
display: grid;
gap: clamp(24px, 3vw, 44px);
align-items: end;
}.cs-hero__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
color: var(--fg-3);
}.cs-hero__mark {
padding: 5px 10px;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent);
letter-spacing: 0.12em;
}.cs-hero__title {
margin-top: 20px;
max-width: 15em;
font-family: var(--font-heading);
font-weight: 900;
font-size: clamp(2.2rem, 1rem + 4.2vw, 5.4rem);
line-height: 0.95;
letter-spacing: -0.012em;
text-transform: uppercase;
text-wrap: balance;
color: var(--fg);
}.cs-hero__side {
display: grid;
gap: 22px;
}.cs-hero__spec dd {
max-width: 60%;
}.cs-link {
color: var(--accent);
border-bottom: 1px solid currentColor;
}@media (min-width: 1100px) {
.cs-hero__grid {
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
column-gap: clamp(40px, 5vw, 96px);
}
}.cs-cover {
position: relative;
width: min(100% - var(--gutter) * 2, var(--container-max));
margin: clamp(32px, 4vw, 56px) auto 0;
aspect-ratio: 21 / 9;
border-radius: 18px;
overflow: hidden;
background: var(--dc-purple-dark);
}.cs-cover img {
width: 100%;
height: 118%;
object-fit: cover;
transform: translateY(var(--cs-shift, -6%));
will-change: transform;
}@media (max-width: 767px) {
.cs-cover {
aspect-ratio: 4 / 3;
}
}.cs-story__grid {
display: grid;
gap: clamp(40px, 5vw, 72px);
}.cs-story__brief,
.cs-story__approach {
display: grid;
gap: 22px;
align-content: start;
}.cs-h2 {
font-family: var(--font-body);
font-weight: 500;
font-size: clamp(1.35rem, 0.9rem + 1.4vw, 2.2rem);
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--fg);
text-wrap: pretty;
}.cs-steps {
display: grid;
border-top: 1px solid var(--line);
}.cs-steps li {
display: grid;
grid-template-columns: 3em minmax(0, 1fr);
gap: 12px;
padding: 18px 0;
border-bottom: 1px solid var(--line);
color: var(--fg-2);
}.cs-steps__n {
padding-top: 4px;
color: var(--accent);
}@media (min-width: 1024px) {
.cs-story__grid {
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
column-gap: clamp(48px, 6vw, 120px);
}
}.cs-build__grid {
display: grid;
gap: clamp(32px, 4vw, 64px);
align-items: start;
}.cs-build__copy {
display: grid;
gap: 22px;
align-content: start;
}.cs-built {
display: grid;
gap: 10px;
}.cs-built li {
display: flex;
align-items: center;
gap: 12px;
color: var(--fg-2);
}.cs-built .icon {
width: 18px;
height: 18px;
color: var(--dc-lime);
flex-shrink: 0;
}.cs-built--row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 24px;
}.cs-built--row li {
padding: 12px 16px;
border-radius: var(--radius-pill);
box-shadow: inset 0 0 0 1px var(--line-2);
color: var(--fg);
}.cs-build__note {
font-size: 0.875rem;
color: var(--fg-3);
}.cs-browser {
border-radius: 14px;
background: #fff;
box-shadow: var(--shadow-panel), 0 0 0 1px var(--line);
overflow: hidden;
}.cs-browser__bar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: #ece9f1;
color: #696370;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.08em;
}.cs-browser__bar .ui__dots i {
background: rgba(20, 13, 29, 0.2);
}.cs-browser__url {
flex: 1;
padding: 5px 12px;
border-radius: var(--radius-pill);
background: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}.cs-browser__view {
height: min(70vh, 680px);
overflow: hidden;
}.cs-browser__view img {
width: 100%;
height: auto;
transform: translateY(calc(var(--cs-scroll, 0) * -1px));
will-change: transform;
}@media (min-width: 1024px) {
.cs-build__grid {
grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
column-gap: clamp(48px, 6vw, 110px);
}.cs-build__copy {
position: sticky;
top: calc(var(--header-h) + 40px);
}
}.no-js .cs-browser__view,
html:not(.is-ready) .cs-browser__view {
overflow-y: auto;
}.cs-gallery {
padding-block: 0 clamp(16px, 2vw, 32px);
}.cs-gallery__grid {
display: grid;
gap: clamp(12px, 1.6vw, 24px);
}.cs-gallery__item {
margin: 0;
border-radius: 14px;
overflow: hidden;
background: var(--dc-purple-dark);
}.cs-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
}@media (min-width: 768px) {
.cs-gallery__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: center;
}.cs-gallery__item--1 {
grid-column: 1 / span 5;
}.cs-gallery__item--2 {
grid-column: 6 / span 4;
}.cs-gallery__item--3 {
grid-column: 10 / span 3;
}.cs-gallery__item--2 img {
aspect-ratio: 4 / 5;
}.cs-gallery__item--3 img {
aspect-ratio: 1;
}
}.cs-changes {
display: grid;
gap: 0;
margin-top: 24px;
border-top: 1px solid var(--line);
}.cs-changes li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: clamp(16px, 3vw, 48px);
align-items: baseline;
padding: clamp(18px, 2.4vw, 32px) 0;
border-bottom: 1px solid var(--line);
}.cs-changes__n {
font-family: var(--font-heading);
font-size: clamp(1.6rem, 1rem + 2vw, 3rem);
line-height: 1;
color: var(--accent);
}.cs-changes p {
font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.8rem);
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--fg);
}.cs-results {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
margin-top: 24px;
}.cs-results li {
display: grid;
gap: 6px;
}.cs-results__v {
font-family: var(--font-heading);
font-size: var(--fs-num);
line-height: 0.9;
color: var(--accent);
}.cs-results__l {
color: var(--fg-2);
}.cs-caps {
display: grid;
gap: 14px;
margin-top: clamp(36px, 4vw, 56px);
}.cs-caps__label {
color: var(--fg-3);
}.cs-caps ul {
display: flex;
flex-wrap: wrap;
gap: 10px;
}.cs-caps__link {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 10px 16px;
border-radius: var(--radius-pill);
box-shadow: inset 0 0 0 1px var(--line-2);
font-weight: 700;
color: var(--fg);
transition: box-shadow 0.35s var(--ease-out), color 0.35s var(--ease-out);
}.cs-caps__link .t-mono {
color: var(--accent);
}.cs-caps__link .icon {
width: 14px;
height: 14px;
transition: transform 0.5s var(--ease-expo);
}.cs-caps__link:hover {
box-shadow: inset 0 0 0 1px var(--accent);
}.cs-caps__link:hover .icon {
transform: translate(2px, -2px);
}.cs-next {
padding-block: clamp(48px, 6vw, 96px) clamp(24px, 3vw, 40px);
border-top: 1px solid var(--line);
}.cs-next__link {
display: grid;
gap: clamp(20px, 3vw, 40px);
align-items: center;
}.cs-next__media {
display: block;
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
background: var(--dc-purple-dark);
}.cs-next__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease-expo);
}.cs-next__body {
display: grid;
gap: 14px;
}.cs-next__kicker {
color: var(--accent);
}.cs-next__title {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 1rem + 2.8vw, 3.8rem);
line-height: 0.95;
text-transform: uppercase;
color: var(--fg);
text-wrap: balance;
}.cs-next__meta {
color: var(--fg-3);
}.cs-next__all {
margin-top: 28px;
}@media (hover: hover) {
.cs-next__link:hover .cs-next__media img {
transform: scale(1.04);
}.cs-next__link:hover .cs-next__title {
color: var(--dc-lime);
}
}@media (min-width: 900px) {
.cs-next__link {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
}