/* components/website-design-hero/website-design-hero.css */
.website-design-hero .svc-hero__visual{--hv-h:470}.wd-spec__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;height:48px;margin-top:var(--space-5)}.wd-col{border-radius:2px}.wd-col--a{background:var(--blue-100);border:1px solid var(--blue-200)}.wd-col--b{background:var(--surface-sunken);border:1px solid var(--border)}.wd-spec__split{display:grid;grid-template-columns:7fr 5fr;gap:4px;margin-top:var(--space-2)}.wd-spec__split span{padding-top:var(--space-1);border-top:1px solid var(--border-strong);font-family:var(--font-display);font-size:.5625rem;font-variant-numeric:tabular-nums;text-align:center;color:var(--text-muted)}.wd-ramp{display:flex;align-items:baseline;gap:var(--space-5);margin-top:var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid var(--border)}.wd-ramp__step{display:flex;align-items:baseline;gap:var(--space-2)}.wd-ramp__step b{font-family:var(--font-serif);font-weight:var(--weight-regular);font-size:var(--s);line-height:.8;color:var(--text)}.wd-ramp__step i{font-family:var(--font-display);font-style:normal;font-size:.5625rem;font-variant-numeric:tabular-nums;color:var(--text-muted)}.wd-spec__list>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-2);border-bottom:1px solid var(--border)}.wd-spec__list>div:last-child{border-bottom:none}.wd-spec__list dt{font-size:var(--text-xs);color:var(--text-muted)}.wd-spec__list dd{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;color:var(--text)}
/* components/website-design-content/website-design-content.css */
.website-design-content{padding-block:var(--section-y)}.content-intro-row{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);margin-bottom:var(--space-8)}.content-intro-row .content-intro{max-width:40rem}.content-intro-row .content-intro h2{margin-block:var(--space-4) var(--space-4);font-size:var(--heading-lg)}.content-intro-row .content-intro p{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-muted)}.concept-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5)}.concept-card{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);transition:var(--transition-lift)}.concept-card:hover{transform:translateY(-4px);border-color:var(--accent-border);box-shadow:var(--shadow-lg)}.concept-image{aspect-ratio:3 / 2;overflow:hidden;background:var(--surface-subtle)}.concept-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}.concept-card:hover .concept-image img{transform:scale(1.04)}.concept-details{padding:var(--space-5)}.concept-details h3{margin-bottom:var(--space-2);font-size:var(--text-md);line-height:var(--leading-snug)}.concept-desc{margin-bottom:var(--space-3);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-muted)}.concept-details a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--accent);transition:var(--transition-colors)}.concept-details a .icon{transition:transform var(--duration-base) var(--ease-spring)}.concept-details a:hover{text-decoration:underline;text-underline-offset:3px}.concept-card:hover .concept-details a .icon{transform:translateX(3px)}@media (min-width:560px){.concept-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}}@media (min-width:900px){.content-intro-row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--space-8);margin-bottom:var(--space-9)}.content-intro-row .btn--secondary{flex:none}}@media (min-width:1200px){.concept-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}