:root {
    --creation-ink: #102a43;
    --creation-ink-soft: #334e68;
    --creation-paper: #fbfaf7;
    --creation-warm: #f3efe7;
    --creation-panel: #ffffff;
    --creation-line: #d9e2ec;
    --creation-blue: #1747c8;
    --creation-blue-dark: #113aa8;
    --creation-teal: #087f72;
    --creation-coral: #c83d2d;
    --creation-lime: #d7f45b;
    --creation-shadow: 0 24px 70px rgba(16, 42, 67, 0.12);
    --creation-radius: 22px;
}

.site-creation-page {
    margin: 0;
    padding-top: 74px;
    color: var(--creation-ink);
    background: var(--creation-paper);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
}

.site-creation-page *,
.site-creation-page *::before,
.site-creation-page *::after {
    box-sizing: border-box;
}

.symbol-library {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.site-creation-page svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-creation-page h1,
.site-creation-page h2,
.site-creation-page h3,
.site-creation-page p,
.site-creation-page ul,
.site-creation-page ol,
.site-creation-page fieldset {
    margin-top: 0;
}

.site-creation-page h1,
.site-creation-page h2,
.site-creation-page h3 {
    color: inherit;
    font-weight: 760;
    letter-spacing: -0.035em;
}

.site-creation-page a {
    color: inherit;
}

.creation-shell {
    width: min(100% - 40px, 1180px);
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    z-index: 10000;
    top: 0.65rem;
    left: 0.65rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    background: var(--creation-ink);
    font-weight: 750;
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-creation-page :where(a, button, input, textarea, summary):focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 3px;
}

.site-creation-page :where(section, #main-content)[id] {
    scroll-margin-top: 74px;
}

.creation-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    border-bottom: 1px solid rgba(16, 42, 67, 0.09);
    background: rgba(251, 250, 247, 0.92);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.creation-header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    align-items: center;
    min-height: 74px;
}

.creation-logo {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    border-radius: 8px;
}

.creation-logo img {
    display: block;
    width: auto;
    height: 42px;
}

.creation-header nav {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

.creation-header nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    color: var(--creation-ink-soft);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.creation-header nav a:hover {
    color: var(--creation-blue);
    background: rgba(23, 71, 200, 0.07);
}

.button,
.site-creation-page .form-button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.78rem 1.2rem;
    border: 2px solid var(--creation-blue);
    border-radius: 13px;
    color: #ffffff;
    background: var(--creation-blue);
    box-shadow: 0 10px 24px rgba(23, 71, 200, 0.18);
    font: inherit;
    font-size: 0.94rem;
    font-weight: 760;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.site-creation-page .button,
.site-creation-page .form-button {
    color: #ffffff;
}

.button:hover,
.site-creation-page .form-button:hover {
    border-color: var(--creation-blue-dark);
    background: var(--creation-blue-dark);
    box-shadow: 0 14px 30px rgba(23, 71, 200, 0.23);
    transform: translateY(-2px);
}

.button:disabled {
    border-color: #9fb3c8;
    color: #526d82;
    background: #d9e2ec;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.button-small {
    min-height: 44px;
    padding: 0.62rem 0.95rem;
    border-radius: 11px;
    font-size: 0.88rem;
}

.button-quiet,
.button-back {
    border-color: rgba(16, 42, 67, 0.2);
    color: var(--creation-ink);
    background: transparent;
    box-shadow: none;
}

.site-creation-page .button-quiet,
.site-creation-page .button-back {
    color: var(--creation-ink);
}

.button-quiet:hover,
.button-back:hover {
    border-color: var(--creation-ink);
    color: var(--creation-ink);
    background: rgba(16, 42, 67, 0.06);
    box-shadow: none;
}

.creation-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3.2rem, 7vw, 6.5rem) 0 clamp(3.5rem, 7vw, 6rem);
    background:
        radial-gradient(circle at 7% 3%, rgba(215, 244, 91, 0.24), transparent 22rem),
        radial-gradient(circle at 96% 16%, rgba(23, 71, 200, 0.12), transparent 27rem),
        var(--creation-paper);
}

.creation-hero::after {
    position: absolute;
    right: -6rem;
    bottom: -12rem;
    width: 34rem;
    height: 34rem;
    border: 1px solid rgba(23, 71, 200, 0.08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.creation-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr);
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;
}

.creation-hero-copy {
    max-width: 640px;
}

.eyebrow {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 1rem;
    color: var(--creation-teal);
    font-size: 0.78rem;
    font-weight: 820;
    letter-spacing: 0.105em;
    line-height: 1.3;
    text-transform: uppercase;
}

.eyebrow > span {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 2px;
    background: currentColor;
}

.creation-hero h1 {
    max-width: 670px;
    margin-bottom: 1.35rem;
    font-size: clamp(2.55rem, 5.2vw, 5rem);
    line-height: 0.98;
}

.creation-lead {
    max-width: 610px;
    margin-bottom: 1.5rem;
    color: var(--creation-ink-soft);
    font-size: clamp(1.04rem, 1.55vw, 1.22rem);
    line-height: 1.6;
}

.creation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.action-assurance {
    margin: 0.65rem 0 0;
    color: #526d82;
    font-size: 0.82rem;
    font-weight: 650;
}

.action-assurance span {
    padding-inline: 0.25rem;
    color: #9fb3c8;
}

.creation-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    margin: 1.65rem 0 0;
    padding: 0;
    color: var(--creation-ink-soft);
    font-size: 0.86rem;
    font-weight: 680;
    list-style: none;
}

.creation-benefits li {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.creation-benefits li span {
    color: var(--creation-teal);
    font-weight: 900;
}

.preview-stage {
    position: relative;
    padding: 0.7rem;
    border: 1px solid rgba(16, 42, 67, 0.12);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--creation-shadow);
}

.preview-stage::before {
    position: absolute;
    z-index: -1;
    top: -1.5rem;
    right: -1.5rem;
    width: 7rem;
    height: 7rem;
    border-radius: 24px;
    background: var(--creation-lime);
    content: "";
    transform: rotate(9deg);
}

.preview-toolbar {
    display: flex;
    min-height: 50px;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.4rem 0.7rem 0.6rem;
    color: var(--creation-ink-soft);
    font-size: 0.76rem;
    font-weight: 750;
}

.preview-toolbar > div:first-child {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.preview-status {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #15a46d;
    box-shadow: 0 0 0 4px rgba(21, 164, 109, 0.12);
}

.preview-switch {
    display: flex;
    padding: 0.2rem;
    border: 1px solid var(--creation-line);
    border-radius: 10px;
    background: var(--creation-warm);
}

.preview-switch button {
    min-height: 36px;
    padding: 0.35rem 0.65rem;
    border: 0;
    border-radius: 7px;
    color: #526d82;
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.preview-switch button.is-active {
    color: var(--creation-ink);
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(16, 42, 67, 0.1);
}

.site-preview {
    display: grid;
    min-height: 410px;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(23, 71, 200, 0.08), rgba(8, 127, 114, 0.08)),
        #eaf0f4;
    transition: padding 240ms ease;
}

.demo-browser {
    width: 94%;
    overflow: hidden;
    border: 1px solid rgba(16, 42, 67, 0.13);
    border-radius: 14px;
    background: #fdfbf5;
    box-shadow: 0 18px 50px rgba(16, 42, 67, 0.22);
    transition: width 260ms ease, border-radius 260ms ease;
}

.demo-browser-bar {
    display: flex;
    height: 31px;
    gap: 0.3rem;
    align-items: center;
    padding: 0 0.65rem;
    border-bottom: 1px solid #e2e8ee;
    background: #ffffff;
}

.demo-browser-bar > span {
    width: 0.43rem;
    height: 0.43rem;
    border-radius: 50%;
    background: #bcccdc;
}

.demo-browser-bar > span:first-child {
    background: #eb6b5d;
}

.demo-browser-bar i {
    min-width: 7rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    color: #829ab1;
    background: #f3f5f7;
    font-size: 0.48rem;
    font-style: normal;
    text-align: center;
}

.demo-page {
    min-height: 330px;
    color: #153e52;
    background: #fbf6e9;
}

.demo-nav {
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.3rem;
    border-bottom: 1px solid rgba(21, 62, 82, 0.08);
}

.demo-brand {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.demo-brand span {
    color: #d56342;
}

.demo-nav-lines {
    display: flex;
    gap: 0.8rem;
}

.demo-nav-lines i {
    display: block;
    width: 2.2rem;
    height: 3px;
    border-radius: 999px;
    background: rgba(21, 62, 82, 0.28);
}

.demo-hero {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 1.1rem;
    align-items: center;
    min-height: 218px;
    padding: 1.6rem 1.4rem;
}

.demo-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.demo-kicker {
    margin-bottom: 0.55rem;
    color: #d56342;
    font-size: 0.48rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.demo-copy strong {
    max-width: 18rem;
    font-size: clamp(1.15rem, 2.15vw, 1.9rem);
    letter-spacing: -0.045em;
    line-height: 0.99;
}

.demo-text {
    max-width: 20rem;
    margin-top: 0.7rem;
    color: #486581;
    font-size: 0.54rem;
    line-height: 1.5;
}

.demo-button {
    margin-top: 0.8rem;
    padding: 0.42rem 0.7rem;
    border-radius: 6px;
    color: #ffffff;
    background: #153e52;
    font-size: 0.51rem;
    font-weight: 780;
}

.demo-art {
    position: relative;
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 48% 52% 39% 61% / 49% 41% 59% 51%;
    background: #e9dcc0;
}

.demo-art::before,
.demo-art::after {
    position: absolute;
    border-radius: 50%;
    content: "";
}

.demo-art::before {
    top: 11%;
    right: 12%;
    width: 25%;
    aspect-ratio: 1;
    background: #d7f45b;
}

.demo-art::after {
    bottom: 8%;
    left: 5%;
    width: 19%;
    aspect-ratio: 1;
    background: #d56342;
}

.demo-monogram {
    position: relative;
    z-index: 2;
    font-family: Georgia, serif;
    font-size: clamp(3.1rem, 8vw, 5.7rem);
    font-style: italic;
    line-height: 1;
}

.demo-orbit {
    position: absolute;
    z-index: 1;
    border: 1px solid rgba(21, 62, 82, 0.3);
    border-radius: 50%;
}

.orbit-one {
    width: 78%;
    height: 42%;
    transform: rotate(30deg);
}

.orbit-two {
    width: 54%;
    height: 86%;
    transform: rotate(-38deg);
}

.demo-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    padding: 0.7rem 1.3rem 1rem;
}

.demo-facts span {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    color: #486581;
    font-size: 0.46rem;
    font-weight: 700;
}

.demo-facts i {
    color: #d56342;
    font-style: normal;
    font-weight: 900;
}

.site-preview[data-preview="mobile"] {
    padding: 1.2rem 0;
}

.site-preview[data-preview="mobile"] .demo-browser {
    width: min(53%, 235px);
    border-radius: 25px;
}

.site-preview[data-preview="mobile"] .demo-browser-bar {
    height: 24px;
}

.site-preview[data-preview="mobile"] .demo-browser-bar > span {
    display: none;
}

.site-preview[data-preview="mobile"] .demo-nav {
    height: 42px;
    padding: 0 0.75rem;
}

.site-preview[data-preview="mobile"] .demo-nav-lines i:not(:last-child) {
    display: none;
}

.site-preview[data-preview="mobile"] .demo-nav-lines i {
    width: 1.1rem;
}

.site-preview[data-preview="mobile"] .demo-hero {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    padding: 1rem 0.8rem 0.75rem;
}

.site-preview[data-preview="mobile"] .demo-copy {
    text-align: left;
}

.site-preview[data-preview="mobile"] .demo-copy strong {
    font-size: 1.05rem;
}

.site-preview[data-preview="mobile"] .demo-art {
    width: 78%;
    margin-inline: auto;
}

.site-preview[data-preview="mobile"] .demo-monogram {
    font-size: 3.4rem;
}

.site-preview[data-preview="mobile"] .demo-facts {
    grid-template-columns: 1fr;
    padding: 0.5rem 0.8rem 0.9rem;
}

.site-preview[data-preview="mobile"] .demo-facts span:not(:first-child) {
    display: none;
}

.preview-caption {
    margin: 0.62rem 0 0.15rem;
    color: #627d98;
    font-size: 0.72rem;
    text-align: center;
}

.proof-strip {
    border-top: 1px solid rgba(16, 42, 67, 0.08);
    border-bottom: 1px solid rgba(16, 42, 67, 0.08);
    background: #ffffff;
}

.proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.proof-grid > div {
    display: flex;
    min-height: 112px;
    gap: 0.85rem;
    align-items: center;
    padding: 1.2rem 1.5rem;
}

.proof-grid > div + div {
    border-left: 1px solid var(--creation-line);
}

.proof-icon {
    display: grid;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 50%;
    color: var(--creation-teal);
    background: rgba(8, 127, 114, 0.09);
    font-size: 0.68rem;
    font-weight: 850;
}

.proof-grid p,
.proof-grid strong,
.proof-grid p span {
    display: block;
    margin: 0;
}

.proof-grid strong {
    margin-bottom: 0.13rem;
    font-size: 0.9rem;
}

.proof-grid p span {
    color: #627d98;
    font-size: 0.78rem;
    line-height: 1.4;
}

.desire-section {
    padding: clamp(4.5rem, 9vw, 7.5rem) 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(8, 127, 114, 0.1), transparent 28rem),
        var(--creation-paper);
}

.desire-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    gap: clamp(2.2rem, 6vw, 6rem);
    align-items: center;
}

.desire-image-card {
    position: relative;
    margin: 0;
}

.desire-image-card::before {
    position: absolute;
    z-index: 0;
    top: -1.15rem;
    left: -1.15rem;
    width: 7rem;
    height: 7rem;
    border: 1px solid rgba(8, 127, 114, 0.35);
    border-radius: 28px;
    content: "";
    transform: rotate(-7deg);
}

.desire-image-card img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 1px solid rgba(16, 42, 67, 0.12);
    border-radius: var(--creation-radius);
    background: #e9e4dc;
    box-shadow: var(--creation-shadow);
}

.desire-image-card figcaption {
    position: relative;
    z-index: 1;
    margin-top: 0.65rem;
    color: #627d98;
    font-size: 0.74rem;
}

.desire-copy h2 {
    margin-bottom: 1.7rem;
    font-size: clamp(2.05rem, 4.5vw, 4rem);
    line-height: 1.02;
}

.desire-benefits {
    display: grid;
    gap: 0.7rem;
    margin-bottom: 1.6rem;
}

.desire-benefits article {
    display: grid;
    grid-template-columns: 2.8rem 1fr;
    gap: 0.85rem;
    align-items: center;
    padding: 0.9rem;
    border: 1px solid var(--creation-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
}

.desire-benefits svg {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.48rem;
    border-radius: 12px;
    color: var(--creation-teal);
    background: rgba(8, 127, 114, 0.09);
}

.desire-benefits strong,
.desire-benefits span {
    display: block;
}

.desire-benefits strong {
    margin-bottom: 0.1rem;
    font-size: 0.94rem;
}

.desire-benefits span {
    color: #627d98;
    font-size: 0.8rem;
}

.project-check-section,
.creation-pricing,
.creation-process,
.creation-faq {
    padding: clamp(4.5rem, 9vw, 8rem) 0;
}

.project-check-section {
    background: var(--creation-warm);
}

.section-heading {
    max-width: 760px;
    margin-bottom: clamp(2rem, 4vw, 3.3rem);
}

.section-heading-split {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;
}

.section-heading h2 {
    max-width: 760px;
    margin-bottom: 0;
    font-size: clamp(2.05rem, 4.5vw, 4.1rem);
    line-height: 1.02;
}

.section-heading > p:last-child,
.section-heading-split > p {
    margin: 0;
    color: #526d82;
    font-size: 1.02rem;
}

.project-check-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
    gap: 1.25rem;
    align-items: start;
}

.project-check,
.check-result {
    border: 1px solid rgba(16, 42, 67, 0.1);
    border-radius: var(--creation-radius);
    background: #ffffff;
    box-shadow: 0 14px 42px rgba(16, 42, 67, 0.07);
}

.project-check {
    padding: clamp(1.25rem, 3vw, 2.1rem);
}

.check-progress {
    height: 5px;
    overflow: hidden;
    border-radius: 99px;
    background: #e7ecf1;
}

.check-progress span {
    display: block;
    width: 25%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--creation-teal), var(--creation-blue));
    transition: width 220ms ease;
}

.check-progress-text {
    margin: 0.75rem 0 1.7rem;
    color: #627d98;
    font-size: 0.82rem;
    font-weight: 680;
}

.check-step {
    min-width: 0;
    margin: 0 0 2rem;
    padding: 0 0 2rem;
    border: 0;
    border-bottom: 1px solid var(--creation-line);
    scroll-margin-top: 88px;
}

.check-step:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 8px;
}

.project-check.is-enhanced .check-step {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.check-step legend {
    display: flex;
    width: 100%;
    gap: 0.8rem;
    align-items: center;
    margin-bottom: 1.4rem;
    color: var(--creation-ink);
    font-size: clamp(1.18rem, 2.2vw, 1.55rem);
    font-weight: 780;
    letter-spacing: -0.025em;
    line-height: 1.25;
}

.check-step legend > span {
    display: grid;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--creation-ink);
    font-size: 0.82rem;
    letter-spacing: 0;
}

.choice-grid {
    display: grid;
    gap: 0.7rem;
}

.choice-card {
    position: relative;
    display: block;
    cursor: pointer;
}

.choice-card input {
    position: absolute;
    top: 1.25rem;
    left: 1.15rem;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--creation-blue);
}

.choice-card > span {
    display: grid;
    grid-template-columns: 2.65rem minmax(0, 1fr);
    gap: 0.72rem;
    align-items: center;
    min-height: 76px;
    padding: 1rem 1rem 1rem 3.2rem;
    border: 2px solid var(--creation-line);
    border-radius: 14px;
    background: #ffffff;
    transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.choice-icon {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.43rem;
    border-radius: 11px;
    color: var(--creation-teal);
    background: rgba(8, 127, 114, 0.09);
}

.choice-copy {
    min-width: 0;
}

.choice-card input:checked + span .choice-icon {
    color: var(--creation-blue);
    background: rgba(23, 71, 200, 0.1);
}

.choice-card:hover > span {
    border-color: #9fb3c8;
    transform: translateY(-1px);
}

.choice-card input:checked + span {
    border-color: var(--creation-blue);
    background: rgba(23, 71, 200, 0.055);
}

.choice-card input:focus-visible + span {
    outline: 3px solid #ffbf47;
    outline-offset: 3px;
}

.choice-card strong,
.choice-card small {
    display: block;
}

.choice-card strong {
    margin-bottom: 0.2rem;
    color: var(--creation-ink);
    font-size: 0.96rem;
    letter-spacing: -0.01em;
}

.choice-card small {
    color: #627d98;
    font-size: 0.8rem;
    line-height: 1.4;
}

.check-controls {
    display: flex;
    gap: 0.7rem;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.check-controls[hidden] {
    display: none;
}

.check-result {
    position: sticky;
    top: 94px;
    padding: clamp(1.35rem, 3vw, 2rem);
    border-color: rgba(8, 127, 114, 0.23);
    background:
        radial-gradient(circle at 100% 0, rgba(215, 244, 91, 0.24), transparent 15rem),
        #ffffff;
    scroll-margin-top: 88px;
}

.check-result[hidden] {
    display: none;
}

.result-label {
    margin-bottom: 0.7rem;
    color: #627d98;
    font-size: 0.75rem;
    font-weight: 820;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.result-fit {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
    color: #075e54;
    background: rgba(8, 127, 114, 0.11);
    font-size: 0.74rem;
    font-weight: 820;
}

.check-result h3 {
    margin-bottom: 0.35rem;
    font-size: clamp(1.45rem, 3vw, 2.05rem);
    line-height: 1.08;
}

.result-price {
    margin-bottom: 1rem;
    color: var(--creation-blue);
    font-size: 1.35rem;
    font-weight: 850;
    letter-spacing: -0.035em;
}

.check-result > p:not(.result-label, .result-price, .result-note) {
    color: #486581;
}

.result-columns {
    display: grid;
    gap: 1rem;
    margin: 1.3rem 0;
    padding: 1.1rem;
    border-radius: 14px;
    background: var(--creation-paper);
}

.result-columns strong {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
}

.result-columns ul {
    margin: 0;
    padding-left: 1.1rem;
    color: #526d82;
    font-size: 0.78rem;
}

.result-columns li + li {
    margin-top: 0.25rem;
}

.result-note {
    margin: 1rem 0;
    padding-left: 0.8rem;
    border-left: 3px solid var(--creation-lime);
    color: #627d98;
    font-size: 0.76rem;
}

.result-actions {
    display: grid;
    gap: 0.4rem;
}

.text-button {
    min-height: 44px;
    border: 0;
    border-radius: 9px;
    color: var(--creation-blue);
    background: transparent;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 760;
    cursor: pointer;
}

.text-button:hover {
    background: rgba(23, 71, 200, 0.06);
}

.no-js-note {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #e3c36a;
    border-radius: 12px;
    background: #fff8df;
    color: #594a20;
}

.creation-showcase {
    padding: clamp(4.5rem, 9vw, 8rem) 0;
    color: #ffffff;
    background:
        radial-gradient(circle at 87% 6%, rgba(215, 244, 91, 0.13), transparent 25rem),
        radial-gradient(circle at 4% 64%, rgba(31, 111, 235, 0.17), transparent 32rem),
        #102a43;
}

.eyebrow-light {
    color: var(--creation-lime);
}

.creation-showcase .section-heading > p:last-child,
.creation-showcase .section-heading-split > p {
    color: #bcccdc;
}

.palette-heading {
    margin-bottom: clamp(2rem, 5vw, 3.8rem);
}

.style-palette {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: calc(var(--creation-radius) + 6px);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 32px 90px rgba(0, 13, 26, 0.24);
}

.palette-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(3, 21, 38, 0.36);
}

.palette-tabs[hidden] {
    display: none;
}

.palette-tabs button {
    display: flex;
    min-width: 0;
    min-height: 58px;
    gap: 0.65rem;
    align-items: center;
    padding: 0.75rem;
    border: 0;
    border-radius: 13px;
    color: #9fb3c8;
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 760;
    text-align: left;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
}

.palette-tabs button span {
    display: grid;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9px;
    color: #d9e2ec;
    font-size: 0.68rem;
}

.palette-tabs button:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.palette-tabs button[aria-selected="true"] {
    color: #102a43;
    background: #ffffff;
}

.palette-tabs button[aria-selected="true"] span {
    color: #ffffff;
    border-color: #1747c8;
    background: #1747c8;
}

.palette-panels {
    padding: clamp(0.75rem, 2vw, 1.25rem);
}

.palette-panel {
    display: grid;
    grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.78fr);
    gap: clamp(1.2rem, 3vw, 2rem);
    align-items: stretch;
}

.style-palette.is-enhanced .palette-panel[hidden] {
    display: none;
}

.style-palette:not(.is-enhanced) .palette-panel + .palette-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.palette-panel-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: clamp(0.8rem, 2vw, 1.4rem) clamp(0.3rem, 1vw, 0.8rem);
}

.palette-number {
    margin: 0 0 0.6rem;
    color: var(--creation-lime);
    font-size: 0.7rem;
    font-weight: 820;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.palette-panel-copy h3 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.65rem, 3.2vw, 2.7rem);
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.palette-panel-copy > p:not(.palette-number) {
    margin: 0;
    color: #bcccdc;
    font-size: 0.9rem;
}

.palette-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
}

.palette-traits li {
    padding: 0.33rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #d9e2ec;
    font-size: 0.68rem;
    font-weight: 710;
}

.palette-actions {
    display: grid;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1.5rem;
}

.palette-open {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--creation-lime);
    font-size: 0.82rem;
    font-weight: 780;
    text-decoration: underline;
    text-decoration-color: rgba(215, 244, 91, 0.38);
    text-underline-offset: 4px;
}

.palette-choice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

.palette-choice-row button {
    display: inline-flex;
    min-height: 46px;
    gap: 0.35rem;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 11px;
    color: #d9e2ec;
    background: rgba(255, 255, 255, 0.04);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 750;
    cursor: pointer;
}

.palette-choice-row button:not(:disabled):hover {
    border-color: rgba(215, 244, 91, 0.55);
    background: rgba(255, 255, 255, 0.08);
}

.palette-choice-row button[aria-pressed="true"][data-style-choice="like"] {
    color: #102a43;
    border-color: var(--creation-lime);
    background: var(--creation-lime);
}

.palette-choice-row button[aria-pressed="true"][data-style-choice="less"] {
    color: #ffffff;
    border-color: #9fb3c8;
    background: rgba(159, 179, 200, 0.22);
}

.palette-choice-row button:disabled {
    opacity: 0.55;
    cursor: default;
}

.palette-request {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0.66rem 0.8rem;
    border: 1px solid var(--creation-lime);
    border-radius: 11px;
    color: #102a43;
    background: var(--creation-lime);
    box-shadow: 0 10px 24px rgba(0, 13, 26, 0.18);
    font-size: 0.78rem;
    font-weight: 820;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.palette-request:hover {
    background: #e4fa82;
    box-shadow: 0 14px 28px rgba(0, 13, 26, 0.24);
    transform: translateY(-1px);
}

.palette-frame {
    min-width: 0;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    color: #1b2a32;
    background: #eef2f4;
    box-shadow: 0 28px 70px rgba(0, 10, 20, 0.28);
}

.palette-browser-bar {
    display: flex;
    height: 38px;
    gap: 0.32rem;
    align-items: center;
    padding: 0 0.8rem;
    color: #627d98;
    background: #f5f7f8;
}

.palette-browser-bar > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #bcccdc;
}

.palette-browser-bar i {
    overflow: hidden;
    margin-left: 0.45rem;
    font-size: 0.6rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.palette-site {
    min-height: 460px;
    background: #f8f5ef;
}

.palette-site-nav {
    display: flex;
    min-height: 64px;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    font-size: 0.68rem;
}

.palette-site-nav strong {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    letter-spacing: -0.02em;
}

.palette-site-nav strong i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: #bf5435;
    font-size: 0.58rem;
    font-style: normal;
}

.palette-site-nav > span {
    color: #697981;
    font-weight: 670;
}

.palette-site-hero {
    display: grid;
    min-height: 312px;
    grid-template-columns: minmax(0, 1.05fr) minmax(180px, 0.95fr);
    gap: 5%;
    align-items: center;
    padding: 5%;
}

.palette-site-hero > div:first-child {
    position: relative;
    z-index: 2;
}

.palette-site-hero small,
.palette-site-hero b,
.palette-site-hero p,
.palette-site-hero em {
    display: block;
}

.palette-site-hero small {
    margin-bottom: 0.55rem;
    color: #bf5435;
    font-size: 0.55rem;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.palette-site-hero b {
    max-width: 390px;
    font-size: clamp(1.35rem, 3vw, 2.6rem);
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.palette-site-hero p {
    max-width: 330px;
    margin: 0.8rem 0 1rem;
    color: #68757c;
    font-size: clamp(0.65rem, 1.2vw, 0.8rem);
    line-height: 1.45;
}

.palette-site-hero em {
    width: max-content;
    max-width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 999px;
    color: #ffffff;
    background: #bf5435;
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 790;
}

.palette-site-strip {
    display: grid;
    min-height: 84px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(29, 45, 54, 0.1);
}

.palette-site-strip span {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    justify-content: center;
    color: #56666f;
    font-size: 0.64rem;
    font-weight: 730;
}

.palette-site-strip span + span {
    border-left: 1px solid rgba(29, 45, 54, 0.1);
}

.palette-site-strip i {
    color: #bf5435;
    font-size: 0.55rem;
    font-style: normal;
}

.palette-handwerk-art,
.palette-praxis-art,
.palette-genuss-art,
.palette-technik-art {
    position: relative;
    min-width: 0;
    height: 240px;
    overflow: hidden;
    border-radius: 50% 50% 16px 16px;
}

.palette-handwerk-art {
    background: linear-gradient(154deg, #f1cf91 0 57%, #8b735f 57%);
}

.palette-handwerk-art > span {
    position: absolute;
    top: 16%;
    left: 12%;
    width: 42%;
    height: 42%;
    border: 7px solid #ffffff;
    background: linear-gradient(#9bc4cf 55%, #9bb78d 55%);
}

.palette-handwerk-art > i {
    position: absolute;
    right: 10%;
    bottom: 20%;
    width: 36%;
    height: 60%;
    border-radius: 90px 90px 0 0;
    background: #bf5435;
}

.palette-handwerk-art > i::after {
    position: absolute;
    inset: 15% 16% 0;
    border-radius: inherit;
    background: #303d43;
    content: "";
}

.palette-handwerk-art > b {
    position: absolute;
    bottom: 10%;
    left: 9%;
    width: 50%;
    height: 10%;
    border-radius: 5px;
    background: #ffffff;
}

.palette-frame-praxis .palette-site {
    color: #24372f;
    background: #f1f5ef;
    font-family: Georgia, "Times New Roman", serif;
}

.palette-frame-praxis .palette-site-nav strong i,
.palette-frame-praxis .palette-site-hero em {
    background: #397864;
}

.palette-frame-praxis .palette-site-hero small {
    color: #397864;
}

.palette-praxis-art {
    border-radius: 50%;
    background: #dce9df;
}

.palette-praxis-art > span {
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(57, 120, 100, 0.38);
    border-radius: 50%;
    box-shadow: inset 0 0 0 35px rgba(57, 120, 100, 0.07);
}

.palette-praxis-art > i {
    position: absolute;
    bottom: 8%;
    left: 7%;
    width: 32%;
    height: 58%;
    border-radius: 100% 0 100% 0;
    background: #e7b8a6;
    transform: rotate(-14deg);
}

.palette-praxis-art > b {
    position: absolute;
    right: 5%;
    bottom: 8%;
    padding: 0.7rem;
    border-radius: 12px;
    color: #397864;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 12px 30px rgba(36, 55, 47, 0.12);
    font-size: 0.65rem;
    line-height: 1.2;
}

.palette-frame-genuss .palette-site {
    color: #301f1c;
    background: #fff4d6;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

.palette-frame-genuss .palette-site-nav strong i,
.palette-frame-genuss .palette-site-hero em {
    background: #d53e2f;
}

.palette-frame-genuss .palette-site-hero small {
    color: #d53e2f;
}

.palette-frame-genuss .palette-site-hero b {
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.palette-genuss-art {
    border: 4px solid #301f1c;
    border-radius: 20px;
    background: #f4bd38;
}

.palette-genuss-art > span {
    position: absolute;
    top: -20%;
    right: -16%;
    width: 65%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #d53e2f;
}

.palette-genuss-art > i {
    position: absolute;
    right: 13%;
    bottom: 12%;
    width: 62%;
    height: 48%;
    border: 5px solid #301f1c;
    border-radius: 55% 55% 42% 42%;
    background: #d98c43;
    box-shadow: 10px 11px 0 #fff4d6;
    transform: rotate(7deg);
}

.palette-genuss-art > i::before {
    position: absolute;
    top: 20%;
    left: 17%;
    width: 66%;
    height: 6px;
    border-radius: 999px;
    background: #fff4d6;
    box-shadow: 0 30px 0 #fff4d6, 0 60px 0 #fff4d6;
    content: "";
    transform: rotate(-12deg);
}

.palette-genuss-art > b {
    position: absolute;
    bottom: 5%;
    left: 5%;
    padding: 0.55rem;
    border-radius: 9px;
    color: #ffffff;
    background: #301f1c;
    font-size: 0.75rem;
    line-height: 0.9;
}

.palette-genuss-art > b small {
    margin: 0.25rem 0 0;
    color: #f4bd38;
    font-size: 0.45rem;
}

.palette-frame-technik .palette-site {
    color: #e6f4f5;
    background: #081b2a;
    background-image: linear-gradient(rgba(196, 235, 72, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(196, 235, 72, 0.045) 1px, transparent 1px);
    background-size: 24px 24px;
}

.palette-frame-technik .palette-site-nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.palette-frame-technik .palette-site-nav strong i,
.palette-frame-technik .palette-site-hero em {
    color: #081b2a;
    background: #c4eb48;
}

.palette-frame-technik .palette-site-nav > span,
.palette-frame-technik .palette-site-hero p,
.palette-frame-technik .palette-site-strip span {
    color: #a9c0cf;
}

.palette-frame-technik .palette-site-hero small {
    color: #c4eb48;
}

.palette-frame-technik .palette-site-strip,
.palette-frame-technik .palette-site-strip span + span {
    border-color: rgba(255, 255, 255, 0.12);
}

.palette-technik-art {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    background: rgba(13, 37, 54, 0.9);
}

.palette-technik-art > span {
    position: absolute;
    inset: 16%;
    border: 2px solid #0b8f86;
    border-radius: 50%;
    box-shadow: inset 0 0 0 26px rgba(11, 143, 134, 0.08), 0 0 32px rgba(11, 143, 134, 0.14);
}

.palette-technik-art > i {
    position: absolute;
    top: 50%;
    left: 20%;
    width: 60%;
    height: 3px;
    background: #c4eb48;
    box-shadow: 0 -30px 0 rgba(196, 235, 72, 0.25), 0 30px 0 rgba(196, 235, 72, 0.25);
    transform: rotate(-12deg);
}

.palette-technik-art > b {
    position: absolute;
    right: 5%;
    bottom: 5%;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #a9c0cf;
    background: #081b2a;
    font-size: 0.48rem;
    letter-spacing: 0.08em;
}

.palette-technik-art > b small {
    margin: 0.2rem 0 0;
    color: #c4eb48;
    font-size: 0.65rem;
}

.palette-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.3rem;
    align-items: center;
    margin: 0 clamp(0.75rem, 2vw, 1.25rem) clamp(0.75rem, 2vw, 1.25rem);
    padding: clamp(1rem, 2.5vw, 1.4rem);
    border: 1px solid rgba(215, 244, 91, 0.26);
    border-radius: 16px;
    background: rgba(215, 244, 91, 0.075);
}

.palette-summary div > span,
.palette-summary div > strong,
.palette-summary div > small {
    display: block;
}

.palette-summary div > span {
    margin-bottom: 0.22rem;
    color: var(--creation-lime);
    font-size: 0.68rem;
    font-weight: 820;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.palette-summary div > strong {
    color: #ffffff;
    font-size: 1rem;
}

.palette-summary div > small {
    margin-top: 0.25rem;
    color: #9fb3c8;
    font-size: 0.7rem;
}

.palette-summary .button:disabled {
    color: #7d91a4;
    background: #304b62;
    opacity: 1;
}

.palette-noscript {
    margin: 0 1.25rem 1.25rem;
    padding: 0.85rem;
    border: 1px solid #e3c36a;
    border-radius: 11px;
    color: #594a20;
    background: #fff8df;
    font-size: 0.8rem;
}

.palette-noscript .button {
    width: 100%;
    margin-top: 0.8rem;
}

.product-proof {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(180px, 0.8fr));
    gap: 0.75rem;
    align-items: stretch;
    margin-top: 1rem;
}

.product-proof > div,
.product-proof > a {
    min-height: 132px;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
}

.product-proof h3 {
    max-width: 520px;
    margin: 0;
    font-size: clamp(1.25rem, 2.2vw, 1.8rem);
    line-height: 1.1;
}

.showcase-label {
    margin: 0 0 0.55rem;
    color: var(--creation-lime);
    font-size: 0.68rem;
    font-weight: 820;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.product-proof > a {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 0.75rem;
    align-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.product-proof > a:hover {
    border-color: rgba(215, 244, 91, 0.52);
    background: rgba(255, 255, 255, 0.075);
    transform: translateY(-2px);
}

.product-proof > a > span {
    grid-row: span 2;
    color: var(--creation-lime);
    font-size: 0.68rem;
    font-weight: 820;
}

.product-proof > a strong {
    font-size: 1.15rem;
}

.product-proof > a small {
    color: #9fb3c8;
    font-size: 0.68rem;
}

.showcase-footnote {
    margin: 1.2rem 0 0;
    color: #9fb3c8;
    font-size: 0.8rem;
}

.showcase-footnote a {
    color: #d9e2ec;
    text-underline-offset: 3px;
}

.creation-pricing {
    background: #ffffff;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.pricing-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: clamp(1.35rem, 2.6vw, 2rem);
    border: 1px solid var(--creation-line);
    border-radius: var(--creation-radius);
    background: var(--creation-paper);
}

.pricing-icon {
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1.15rem;
    padding: 0.68rem;
    border-radius: 15px;
    color: var(--creation-teal);
    background: rgba(8, 127, 114, 0.09);
}

.pricing-type {
    margin-bottom: 1.4rem;
    color: var(--creation-teal);
    font-size: 0.72rem;
    font-weight: 830;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.pricing-card h3 {
    margin-bottom: 0.4rem;
    font-size: 1.42rem;
    line-height: 1.15;
}

.pricing-value {
    min-height: 3.2rem;
    margin-bottom: 0.8rem;
    color: var(--creation-blue);
    font-size: 1.25rem;
    font-weight: 850;
    line-height: 1.25;
}

.pricing-fit {
    min-height: 4.8rem;
    margin-bottom: 1rem;
    color: #526d82;
}

.pricing-card ul {
    display: grid;
    gap: 0.55rem;
    margin: auto 0 0;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--creation-line);
    list-style: none;
}

.pricing-card li {
    position: relative;
    padding-left: 1.25rem;
    color: #486581;
    font-size: 0.86rem;
}

.pricing-card li::before {
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--creation-teal);
    content: "";
}

.pricing-cta {
    width: 100%;
    margin-top: 1.3rem;
}

.scope-note {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.4rem;
    align-items: start;
    margin-top: 1rem;
    padding: 1.3rem 1.5rem;
    border-radius: 16px;
    color: #d9e2ec;
    background: var(--creation-ink);
}

.scope-note strong {
    color: var(--creation-lime);
}

.scope-note p {
    margin: 0;
    font-size: 0.86rem;
}

.pricing-handoff {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.4rem;
    align-items: center;
    margin-top: 1rem;
    padding: clamp(1.25rem, 3vw, 1.8rem);
    border: 1px solid rgba(23, 71, 200, 0.2);
    border-radius: 20px;
    background:
        radial-gradient(circle at 92% 15%, rgba(215, 244, 91, 0.25), transparent 15rem),
        #eef4ff;
    box-shadow: 0 16px 40px rgba(16, 42, 67, 0.08);
}

.pricing-handoff span,
.pricing-handoff strong,
.pricing-handoff p {
    display: block;
}

.pricing-handoff span {
    margin-bottom: 0.25rem;
    color: var(--creation-teal);
    font-size: 0.69rem;
    font-weight: 840;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pricing-handoff strong {
    margin-bottom: 0.25rem;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    letter-spacing: -0.025em;
}

.pricing-handoff p {
    margin: 0;
    color: #486581;
    font-size: 0.88rem;
}

.pricing-handoff .button {
    min-width: 250px;
}

.mobile-handoff {
    display: none;
}

.mobile-handoff[hidden] {
    display: none !important;
}

.creation-process {
    background: var(--creation-paper);
}

.creation-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--creation-line);
    border-radius: var(--creation-radius);
    background: var(--creation-line);
    list-style: none;
}

.creation-steps li {
    min-height: 250px;
    padding: clamp(1.4rem, 3vw, 2.1rem);
    background: #ffffff;
}

.creation-steps > li > .step-mark {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3rem;
    color: var(--creation-teal);
}

.step-mark svg {
    width: 3rem;
    height: 3rem;
    padding: 0.62rem;
    border-radius: 14px;
    background: rgba(8, 127, 114, 0.09);
}

.step-mark i {
    color: #9fb3c8;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.creation-steps h3 {
    margin-bottom: 0.55rem;
    font-size: 1.3rem;
}

.creation-steps p {
    margin: 0;
    color: #526d82;
}

.creation-faq {
    border-top: 1px solid rgba(16, 42, 67, 0.08);
    background: var(--creation-warm);
}

.faq-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(2rem, 7vw, 7rem);
}

.faq-layout .section-heading {
    margin-bottom: 0;
}

.faq-list {
    border-top: 1px solid #bcccdc;
}

.faq-list details {
    border-bottom: 1px solid #bcccdc;
}

.faq-list summary {
    position: relative;
    min-height: 68px;
    padding: 1.25rem 3rem 1.25rem 0;
    color: var(--creation-ink);
    font-weight: 760;
    cursor: pointer;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    position: absolute;
    top: 1.05rem;
    right: 0;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid #9fb3c8;
    border-radius: 50%;
    content: "+";
    font-size: 1.1rem;
    font-weight: 500;
}

.faq-list details[open] summary::after {
    content: "−";
}

.faq-list details p {
    max-width: 670px;
    margin: -0.35rem 0 1.35rem;
    padding-right: 2rem;
    color: #526d82;
}

.creation-contact {
    padding: clamp(4.5rem, 9vw, 8rem) 0;
    color: #ffffff;
    background:
        radial-gradient(circle at 8% 100%, rgba(8, 127, 114, 0.42), transparent 28rem),
        radial-gradient(circle at 90% 0, rgba(23, 71, 200, 0.45), transparent 32rem),
        #102a43;
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(450px, 1.18fr);
    gap: clamp(2.5rem, 7vw, 7rem);
    align-items: start;
}

.contact-copy {
    position: sticky;
    top: 105px;
}

.contact-copy h2 {
    margin-bottom: 1.25rem;
    font-size: clamp(2.2rem, 4.6vw, 4.3rem);
    line-height: 1.01;
}

.contact-copy > p:not(.eyebrow) {
    max-width: 540px;
    color: #bcccdc;
    font-size: 1.02rem;
}

.contact-person {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    margin-top: 2rem;
}

.person-mark {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 50%;
    color: var(--creation-ink);
    background: var(--creation-lime);
    font-size: 0.78rem;
    font-weight: 850;
}

.contact-person p,
.contact-person strong,
.contact-person span {
    display: block;
    margin: 0;
}

.contact-person .person-mark {
    display: grid;
}

.contact-person p span {
    color: #9fb3c8;
    font-size: 0.8rem;
}

.site-creation-page .creation-contact-form {
    max-width: none;
    margin: 0;
    padding: clamp(1.25rem, 3vw, 2.1rem);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--creation-radius);
    color: var(--creation-ink);
    background: #ffffff;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
}

.site-creation-page .creation-contact-form .form-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1.4rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--creation-line);
}

.creation-contact-form .form-intro span {
    color: var(--creation-teal);
    font-size: 0.7rem;
    font-weight: 830;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.creation-contact-form .form-intro h3 {
    margin: 0.2rem 0 0;
    font-size: 1.45rem;
}

.creation-contact-form .form-intro p {
    margin: 0;
    color: #627d98;
    font-size: 0.78rem;
}

.site-creation-page .creation-contact-form > label:not(.privacy-check) {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.site-creation-page .creation-contact-form label > span:first-child {
    color: var(--creation-ink);
    font-size: 0.84rem;
    font-weight: 730;
}

.site-creation-page .creation-contact-form input:not([type="checkbox"]),
.site-creation-page .creation-contact-form textarea {
    width: 100%;
    min-height: 50px;
    padding: 0.8rem 0.9rem;
    border: 2px solid var(--creation-line);
    border-radius: 11px;
    color: var(--creation-ink);
    background: #ffffff;
    font: inherit;
    font-size: 1rem;
}

.site-creation-page .creation-contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

.site-creation-page .creation-contact-form input:not([type="checkbox"]):focus,
.site-creation-page .creation-contact-form textarea:focus {
    border-color: var(--creation-blue);
    outline: 3px solid rgba(23, 71, 200, 0.14);
}

.applied-result-note {
    margin: -0.3rem 0 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    color: #075e54;
    background: rgba(8, 127, 114, 0.1);
    font-size: 0.78rem;
    font-weight: 680;
}

.site-creation-page .optional-details {
    margin: 0 0 1.1rem;
    padding: 0;
    border: 1px solid var(--creation-line);
    border-radius: 11px;
    background: var(--creation-paper);
}

.site-creation-page .optional-details summary {
    min-height: 48px;
    padding: 0.78rem 0.9rem;
    color: var(--creation-ink);
    font-size: 0.82rem;
    font-weight: 720;
    cursor: pointer;
}

.site-creation-page .optional-details summary span {
    color: #829ab1;
    font-weight: 600;
}

.site-creation-page .optional-grid {
    padding: 0 0.9rem 0.9rem;
}

.site-creation-page .optional-grid label {
    display: grid;
    gap: 0.4rem;
}

.site-creation-page .privacy-check {
    display: grid;
    grid-template-columns: 1.2rem 1fr;
    gap: 0.65rem;
    align-items: start;
    margin-bottom: 1.1rem;
    color: #526d82;
    font-size: 0.78rem;
}

.site-creation-page .privacy-check input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.13rem 0 0;
    accent-color: var(--creation-blue);
}

.site-creation-page .privacy-check a,
.site-creation-page .form-fallback a {
    color: var(--creation-blue);
    font-weight: 720;
    text-underline-offset: 3px;
}

.site-creation-page .form-trap {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.site-creation-page .form-actions {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    justify-content: space-between;
}

.site-creation-page .form-fallback {
    margin: 0;
    color: #627d98;
    font-size: 0.78rem;
}

.creation-footer {
    padding: 2.2rem 0;
    color: #9fb3c8;
    background: #0b2033;
    font-size: 0.78rem;
}

.creation-footer .creation-shell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.4rem;
    justify-content: space-between;
}

.creation-footer p {
    margin: 0;
}

.creation-footer strong,
.creation-footer a {
    color: #ffffff;
}

@supports (content-visibility: auto) {
    .creation-showcase,
    .creation-pricing,
    .creation-process,
    .creation-faq {
        content-visibility: auto;
        contain-intrinsic-size: auto 850px;
    }
}

@media (max-width: 1020px) {
    .creation-hero-grid,
    .desire-grid,
    .project-check-layout,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .creation-hero-copy {
        max-width: 760px;
    }

    .preview-stage {
        width: min(100%, 760px);
    }

    .desire-image-card {
        width: min(100%, 760px);
    }

    .check-result,
    .contact-copy {
        position: static;
    }

    .pricing-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pricing-card:last-child {
        grid-column: 1 / -1;
    }

    .palette-panel {
        grid-template-columns: minmax(215px, 0.7fr) minmax(0, 1.3fr);
    }

    .product-proof {
        grid-template-columns: 1fr 1fr;
    }

    .product-proof > div {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .site-creation-page {
        padding-top: 66px;
    }

    .site-creation-page.has-mobile-handoff {
        padding-bottom: 88px;
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    .mobile-handoff:not([hidden]) {
        position: fixed;
        z-index: 1200;
        right: 10px;
        bottom: 10px;
        left: 10px;
        right: max(10px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        left: max(10px, env(safe-area-inset-left));
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.7rem;
        align-items: center;
        padding: 0.62rem;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 16px;
        color: #ffffff;
        background: rgba(16, 42, 67, 0.97);
        box-shadow: 0 18px 44px rgba(0, 13, 26, 0.32);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    .mobile-handoff > span,
    .mobile-handoff strong,
    .mobile-handoff small {
        display: block;
        min-width: 0;
    }

    .mobile-handoff strong {
        font-size: 0.82rem;
        line-height: 1.18;
    }

    .mobile-handoff small {
        margin-top: 0.12rem;
        color: #bcccdc;
        font-size: 0.64rem;
        line-height: 1.25;
    }

    .mobile-handoff .button {
        min-height: 46px;
        padding: 0.62rem 0.78rem;
        border-color: var(--creation-lime);
        color: #102a43;
        background: var(--creation-lime);
        box-shadow: none;
        font-size: 0.76rem;
        white-space: nowrap;
    }

    .mobile-handoff .button:hover {
        border-color: #e4fa82;
        color: #102a43;
        background: #e4fa82;
    }

    .site-creation-page :where(section, #main-content)[id] {
        scroll-margin-top: 66px;
    }

    .check-step,
    .check-result {
        scroll-margin-top: 78px;
    }

    .creation-shell {
        width: min(100% - 28px, 1180px);
    }

    .creation-header-inner {
        min-height: 66px;
        gap: 0.55rem;
    }

    .creation-logo img {
        height: 36px;
    }

    .creation-header nav {
        display: none;
    }

    .creation-header .button-small {
        justify-self: end;
    }

    .creation-hero {
        padding: 2.25rem 0 3.4rem;
    }

    .creation-hero-grid {
        gap: 2.4rem;
    }

    .creation-hero h1 {
        font-size: clamp(2.35rem, 11.5vw, 3.75rem);
        line-height: 0.99;
    }

    .creation-lead {
        font-size: 1rem;
        line-height: 1.52;
    }

    .creation-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .creation-actions .button {
        width: 100%;
    }

    .action-assurance {
        text-align: center;
    }

    .creation-benefits {
        display: grid;
        gap: 0.42rem;
    }

    .preview-stage {
        margin-top: 0.3rem;
        padding: 0.48rem;
        border-radius: 21px;
    }

    .preview-stage::before {
        top: -0.9rem;
        right: -0.2rem;
        width: 4.2rem;
        height: 4.2rem;
        border-radius: 15px;
    }

    .preview-toolbar {
        padding: 0.2rem 0.2rem 0.5rem 0.4rem;
    }

    .preview-toolbar > div:first-child {
        display: none;
    }

    .preview-switch {
        width: 100%;
    }

    .preview-switch button {
        flex: 1;
        min-height: 42px;
    }

    .site-preview {
        min-height: 330px;
        border-radius: 16px;
    }

    .demo-browser {
        width: 96%;
    }

    .demo-page {
        min-height: 274px;
    }

    .demo-nav {
        height: 40px;
        padding: 0 0.7rem;
    }

    .demo-hero {
        min-height: 180px;
        padding: 1rem 0.8rem;
    }

    .demo-copy strong {
        font-size: 1.05rem;
    }

    .demo-art::after {
        display: none;
    }

    .demo-facts {
        padding: 0.6rem 0.8rem 0.8rem;
    }

    .proof-grid,
    .section-heading-split,
    .showcase-grid,
    .pricing-grid,
    .creation-steps,
    .faq-layout,
    .scope-note,
    .site-creation-page .creation-contact-form .form-intro {
        grid-template-columns: 1fr;
    }

    .proof-grid > div {
        min-height: 88px;
        padding: 1rem 0.2rem;
    }

    .proof-grid > div + div {
        border-top: 1px solid var(--creation-line);
        border-left: 0;
    }

    .section-heading-split {
        gap: 1.2rem;
        align-items: start;
    }

    .section-heading h2 {
        font-size: clamp(2rem, 10vw, 3.15rem);
    }

    .project-check-section,
    .desire-section,
    .creation-showcase,
    .creation-pricing,
    .creation-process,
    .creation-faq,
    .creation-contact {
        padding: 4.2rem 0;
    }

    .project-check {
        padding: 1rem;
    }

    .check-step legend {
        align-items: flex-start;
        font-size: 1.13rem;
    }

    .choice-card > span {
        min-height: 82px;
        grid-template-columns: 2.35rem minmax(0, 1fr);
        gap: 0.62rem;
        padding: 0.95rem 0.7rem 0.95rem 2.85rem;
    }

    .choice-icon {
        width: 2.15rem;
        height: 2.15rem;
    }

    .choice-card input {
        top: 1.2rem;
        left: 0.9rem;
    }

    .check-controls .button {
        min-width: 0;
        flex: 1;
    }

    .showcase-main {
        min-height: 470px;
        grid-row: auto;
    }

    .showcase-main::after {
        width: 78%;
    }

    .showcase-card {
        min-height: 260px;
    }

    .palette-tabs {
        grid-template-columns: 1fr 1fr;
    }

    .palette-tabs button {
        min-height: 54px;
    }

    .palette-panel {
        grid-template-columns: 1fr;
    }

    .palette-frame {
        min-height: 390px;
        order: -1;
    }

    .palette-site {
        min-height: 352px;
    }

    .palette-site-nav {
        min-height: 50px;
        padding-inline: 4%;
    }

    .palette-site-hero {
        min-height: 238px;
        padding: 4%;
    }

    .palette-handwerk-art,
    .palette-praxis-art,
    .palette-genuss-art,
    .palette-technik-art {
        height: 190px;
    }

    .palette-site-strip {
        min-height: 64px;
    }

    .palette-panel-copy {
        padding: 0.6rem 0.25rem 0.25rem;
    }

    .palette-actions {
        margin-top: 0;
    }

    .palette-summary {
        grid-template-columns: 1fr;
    }

    .palette-summary .button {
        width: 100%;
    }

    .product-proof {
        grid-template-columns: 1fr;
    }

    .product-proof > div {
        grid-column: auto;
    }

    .pricing-card:last-child {
        grid-column: auto;
    }

    .pricing-fit {
        min-height: 0;
    }

    .scope-note {
        gap: 0.55rem;
    }

    .pricing-handoff {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .pricing-handoff .button {
        width: 100%;
        min-width: 0;
    }

    .creation-steps {
        gap: 1px;
    }

    .creation-steps li {
        min-height: auto;
    }

    .creation-steps > li > .step-mark {
        margin-bottom: 1.2rem;
    }

    .faq-layout {
        gap: 2.4rem;
    }

    .site-creation-page .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .site-creation-page .form-button {
        width: 100%;
    }

    .site-creation-page .form-fallback {
        text-align: center;
    }

    .creation-footer .creation-shell {
        display: grid;
        justify-content: start;
    }
}

@media (max-width: 390px) {
    .creation-shell {
        width: min(100% - 22px, 1180px);
    }

    .creation-header .button-small {
        padding-inline: 0.68rem;
        font-size: 0.8rem;
    }

    .creation-hero h1 {
        font-size: 2.28rem;
    }

    .eyebrow {
        font-size: 0.68rem;
    }

    .site-preview[data-preview="mobile"] .demo-browser {
        width: 58%;
    }

    .palette-tabs {
        padding: 0.35rem;
    }

    .palette-tabs button {
        gap: 0.4rem;
        padding: 0.55rem 0.4rem;
        font-size: 0.7rem;
        line-height: 1.2;
    }

    .palette-tabs button span {
        width: 26px;
        height: 26px;
    }

    .palette-panels {
        padding: 0.55rem;
    }

    .palette-frame {
        min-height: 338px;
        border-radius: 16px;
    }

    .palette-browser-bar {
        height: 32px;
    }

    .palette-site {
        min-height: 305px;
    }

    .palette-site-nav {
        min-height: 46px;
    }

    .palette-site-nav > span {
        display: none;
    }

    .palette-site-hero {
        min-height: 205px;
        grid-template-columns: minmax(0, 1.18fr) minmax(92px, 0.82fr);
        gap: 3%;
    }

    .palette-site-hero small {
        font-size: 0.43rem;
    }

    .palette-site-hero b {
        font-size: 1.03rem;
    }

    .palette-site-hero p {
        margin: 0.55rem 0 0.7rem;
        font-size: 0.56rem;
    }

    .palette-site-hero em {
        padding: 0.45rem 0.55rem;
        font-size: 0.52rem;
    }

    .palette-handwerk-art,
    .palette-praxis-art,
    .palette-genuss-art,
    .palette-technik-art {
        height: 150px;
    }

    .palette-site-strip {
        min-height: 54px;
    }

    .palette-site-strip span {
        font-size: 0.5rem;
        text-align: center;
    }

    .palette-site-strip i {
        display: none;
    }

    .palette-choice-row {
        grid-template-columns: 1fr;
    }

    .palette-summary {
        margin: 0 0.55rem 0.55rem;
    }

    .mobile-handoff:not([hidden]) {
        right: 7px;
        bottom: 7px;
        left: 7px;
        right: max(7px, env(safe-area-inset-right));
        bottom: max(7px, env(safe-area-inset-bottom));
        left: max(7px, env(safe-area-inset-left));
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .mobile-handoff strong {
        font-size: 0.75rem;
    }

    .mobile-handoff small {
        font-size: 0.58rem;
    }

    .mobile-handoff .button {
        min-height: 44px;
        padding-inline: 0.65rem;
        font-size: 0.7rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .site-creation-page {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-creation-page *,
    .site-creation-page *::before,
    .site-creation-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}