:root {
    --sage: #8da98c;
    --deep: #b5426f;
    --cream: #fffaf0;
    --pink: #f6dce5;
    --lav: #e8e1f5;
    --ink: #5a2a40;
    --muted: #687c6b;
    --line: #eed9de
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: linear-gradient(140deg,#e2eedf,#fff7f5 50%,#efe9fb);
    color: var(--ink);
    font-family: 'DM Sans',sans-serif
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    background: #fffc;
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 14px max(18px,calc((100vw - 1250px)/2));
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line)
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--deep)
}

.brand small {
    display: block;
    color: var(--muted);
    font-size: 11px
}

nav {
    display: flex;
    gap: 7px;
    flex-wrap: wrap
}

button {
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 10px 14px;
    color: var(--ink);
    font: inherit;
    font-weight: 700
}

button:hover {
    border-color: var(--deep)
}

button.primary {
    background: var(--deep);
    color: white;
    border: 0
}

button:disabled {
    opacity: .5;
    cursor: not-allowed
}

main {
    max-width: 1250px;
    margin: auto;
    padding: 20px 16px
}

.hero {
    text-align: center;
    padding: 35px 15px
}

.hero span {
    color: var(--deep);
    font-size: 12px;
    letter-spacing: 2px
}

h1,h2,h3 {
    font-family: 'Playfair Display',serif
}

h1 {
    font-size: clamp(30px,5vw,52px);
    margin: 12px auto;
    max-width: 730px
}

.hero p,.muted {
    color: var(--muted);
    font-size: 13px
}

.layout {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 20px
}

.panel {
    background: #fffd;
    border: 1px solid white;
    border-radius: 24px;
    box-shadow: 0 12px 28px #75666418;
    padding: 23px;
    margin-bottom: 18px;
    min-width: 0
}

.panel h2 {
    margin-top: 0;
    color: var(--deep)
}

.tab {
    display: none
}

.tab.visible {
    display: block
}

input,select,textarea {
    font: inherit;
    width: 100%;
    border: 1px solid #dccbd1;
    border-radius: 12px;
    padding: 12px;
    background: #fffdfd;
    color: #3e3134
}

label {
    display: block;
    font-weight: 700;
    font-size: 13px;
    margin: 15px 0
}

label input,label select,label textarea {
    margin-top: 7px;
    font-weight: 400
}

.chips {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: thin
}

.chips button {
    white-space: nowrap;
    font-size: 12px
}

.chips button.active {
    background: var(--deep);
    color: white
}

.services {
    max-height: 700px;
    overflow: auto
}

.service {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    margin: 9px 0;
    padding: 13px;
    border-radius: 14px;
    background: #fff8fa
}

.service b {
    display: block
}

.service small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 6px
}

.price {
    white-space: nowrap;
    color: var(--deep);
    font-weight: 700
}

.total {
    background: var(--pink);
    padding: 16px;
    border-radius: 13px;
    display: flex;
    justify-content: space-between
}

.total strong {
    font-size: 23px
}

#orderForm>.primary {
    width: 100%;
    margin-top: 18px
}

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.account {
    max-width: 550px;
    margin: auto
}

#alert {
    position: sticky;
    top: 80px;
    z-index: 4
}

#alert:not(:empty) {
    background: #fff0f0;
    color: #7e2d40;
    border: 1px solid #dbaebc;
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 15px
}

.record {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    margin: 12px 0;
    background: #fffbfc;
    overflow-wrap: anywhere
}

.record .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap
}

.record small {
    color: var(--muted)
}

.record .actions {
    margin-top: 12px
}

.record select {
    width: auto;
    max-width: 100%
}

.stats {
    display: flex;
    gap: 15px;
    flex-wrap: wrap
}

.stat {
    background: var(--pink);
    padding: 16px;
    border-radius: 15px;
    min-width: 150px
}

.stat strong {
    display: block;
    font-size: 25px
}

dialog {
    max-width: 680px;
    width: calc(100% - 24px);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 90px #0004
}

dialog::backdrop {
    background: #21172290
}

.close {
    float: right
}

.invoice {
    border: 2px solid var(--pink);
    padding: 20px;
    margin-top: 20px
}

.invoice h2 {
    text-align: center
}

.invoice .total {
    margin-top: 16px
}

.serviceEditor {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px 16px
}

.serviceEditor label {
    margin: 3px 0
}

.serviceEditor input[type=checkbox] {
    width: auto
}

.serviceEditor button {
    align-self: end
}

footer {
    text-align: center;
    padding: 30px;
    font-size: 12px;
    color: var(--muted)
}

@media(max-width: 760px) {
    .layout {
        grid-template-columns:1fr
    }

    .serviceEditor {
        grid-template-columns: 1fr
    }

    header {
        justify-content: center
    }

    .panel {
        padding: 16px
    }
}

@media print {
    header,.hero,footer,.tab,#alert,.close,.noPrint {
        display: none!important
    }

    body {
        background: white
    }

    dialog {
        position: static!important;
        box-shadow: none;
        border: 0;
        max-width: 100%;
        width: 100%;
        padding: 0
    }

    dialog::backdrop {
        display: none
    }

    .invoice {
        border: 0
    }
}

/* Welcome / authentication landing */
[hidden] {
    display: none!important
}

.landing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at 15% 22%,#ffdde8 0,transparent 37%),radial-gradient(circle at 80% 70%,#e4dcf8 0,transparent 40%),#fffbf8;
    color: #ce2e839c
}

.landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    max-width: 1320px;
    width: 100%;
    margin: auto;
    padding: 27px 34px;
    border: 0;
    background: transparent;
    position: relative;
    backdrop-filter: none
}

.landing-brand {
    color: #a73465;
    text-decoration: none;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.8px
}

.landing-brand span {
    font-size: 13px;
    letter-spacing: 1px;
    color: #ce2e839c
}

.nav-caption {
    color: #98778a;
    font-size: 13px
}

.nav-login {
    padding: 11px 19px;
    border: 1px solid #dfb7c9;
    border-radius: 999px;
    text-decoration: none;
    color: #8d2e57;
    font-size: 13px;
    font-weight: 700;
    background: #fff9
}

.landing-main {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0,1.06fr) minmax(360px,.85fr);
    align-items: center;
    gap: clamp(32px,6vw,90px);
    padding: 60px 24px 90px;
    flex: 1
}

.eyebrow {
    color: #b04a73;
    letter-spacing: 2.3px;
    font-weight: 800;
    font-size: 11px
}

.landing-copy h1 {
    font-size: clamp(54px,6.4vw,93px);
    line-height: 1.06;
    letter-spacing: -3px;
    max-width: 600px;
    margin: 24px 0
}

.landing-copy h1 em {
    font-weight: 500;
    color: #c34878
}

.landing-lead {
    font-size: 17px;
    line-height: 1.85;
    color: #785e71;
    max-width: 510px
}

.landing-steps {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    margin-top: 43px
}

.landing-steps div {
    border-top: 1px solid #d5b9c7;
    padding-top: 16px
}

.landing-steps span {
    display: block;
    color: #bf6b8e;
    font-size: 12px;
    margin-bottom: 10px
}

.landing-steps strong {
    display: block;
    font-size: 13px
}

.landing-steps small {
    display: block;
    color: #947787;
    line-height: 1.6;
    margin-top: 7px;
    font-size: 12px
}

.landing-note {
    margin-top: 36px;
    color: #a15a7b;
    font-size: 13px
}

.auth-shell {
    background: #fefefe7a;
    border: 1px solid #f5e2e9;
    border-radius: 28px;
    box-shadow: 0 30px 85px #7a486325;
    padding: clamp(24px,4vw,43px);
    width: 100%;
    max-width: 470px;
    margin: auto
}

.auth-top {
    text-align: center
}

.auth-symbol {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 17px;
    margin: 0 auto 17px;
    background: #f9e4ec;
    color: #b5426f;
    font-size: 29px
}

.auth-kicker {
    letter-spacing: 2px;
    color: #ba6b8b;
    font-size: 10px;
    font-weight: 800
}

.auth-top h2 {
    font-size: 33px;
    margin: 11px 0 4px
}

.auth-top p {
    font-size: 13px;
    color: #987c8b;
    margin: 0 0 25px
}

.auth-switch {
    display: flex;
    gap: 5px;
    padding: 5px;
    background: #f9edf2;
    border-radius: 13px
}

.auth-switch button {
    flex: 1;
    border: 0;
    background: transparent;
    color: #a98095;
    padding: 11px;
    font-size: 13px
}

.auth-switch button.active {
    background: white;
    box-shadow: 0 3px 12px #66334c16;
    color: #8f2f59
}

.auth-shell form label {
    margin: 19px 0 0;
    font-size: 12px;
    color: #654357
}

.auth-shell input {
    margin-top: 8px;
    padding: 14px 15px;
    background: #ffffffb5;
    border-color: #ead5dd
}

.auth-shell input:focus {
    outline: 2px solid #c86695;
    outline-offset: 1px
}

.auth-submit {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px!important;
    border-radius: 13px!important
}

.auth-submit span {
    font-size: 19px
}

.auth-foot {
    text-align: center;
    color: #8a7482;
    font-size: 13px;
    margin-top: 22px
}

.auth-foot button {
    background: none;
    border: 0;
    padding: 2px;
    color: #ab356c;
    font-weight: 800;
    font-size: 13px
}

.privacy-note {
    font-size: 11px;
    text-align: center;
    color: #a68a98;
    margin-top: 24px;
    border-top: 1px solid #f3e8ec;
    padding-top: 19px
}

.form-message {
    color: #a12f52;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 12px
}

.form-message:empty {
    display: none
}

.landing-footer {
    padding: 23px;
    text-align: center;
    color: #ab8a9a;
    font-size: 11px
}

@media(max-width: 850px) {
    .landing-main {
        grid-template-columns:1fr;
        padding: 34px 24px 75px;
        gap: 44px
    }

    .landing-copy {
        text-align: center
    }

    .landing-copy h1,.landing-lead {
        margin-left: auto;
        margin-right: auto
    }

    .landing-steps {
        text-align: left
    }

    .auth-shell {
        max-width: 520px
    }

    .nav-caption {
        display: none
    }
}

@media(max-width: 460px) {
    .landing-nav {
        padding:19px 18px
    }

    .landing-brand {
        font-size: 18px
    }

    .landing-brand span {
        font-size: 10px
    }

    .nav-login {
        padding: 9px 12px
    }

    .landing-copy h1 {
        font-size: 52px;
        letter-spacing: -2px
    }

    .landing-steps {
        gap: 8px
    }

    .landing-steps strong {
        font-size: 11px
    }

    .landing-steps small {
        font-size: 10px
    }

    .auth-shell {
        padding: 25px 20px
    }
}

/* Coquette refresh — pink pearl surfaces, restrained ribbons, readable controls */
:root {
    --sage: #f8d6e5;
    --deep: #e51778c9;
    --cream: #fff9fc;
    --pink: #fbe3ee;
    --lav: #f5e9f5;
    --ink: #583649;
    --muted: #967788;
    --line: #f1dce6
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 105px
}

body {
    background: radial-gradient(circle at 12% 8%,#f9dbe8 0,transparent 30%),radial-gradient(circle at 92% 45%,#fff0f4 0,transparent 40%),linear-gradient(140deg,#fff9fc,#fdf0f6 60%,#fff9fb);
    min-height: 100vh;
    line-height: 1.6
}

.site-header {
    background: #fffafaed;
    box-shadow: 0 8px 30px #b8799210;
    border-bottom: 1px solid #efd8e3;
    padding-top: 12px;
    padding-bottom: 12px
}

.brand-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 23px;
    line-height: 1.2;
    color: #a44776
}

.brand-link strong {
    font-size: 15px;
    letter-spacing: .6px;
    display: block
}

.brand-link small {
    margin-top: 4px;
    letter-spacing: 1px;
    color: #b18099
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 7px
}

.site-nav a,.site-nav button {
    font-size: 13px;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 11px 15px;
    color: #77445e;
    text-decoration: none;
    background: transparent;
    white-space: nowrap;
    transition: .2s
}

.site-nav :is(a,button):hover,.site-nav :is(a,button).active {
    background: #fbe3ef;
    border-color: #f3cfdf;
    color: #a33f73
}

.site-nav :is(a,button):focus-visible,.admin-sidebar a:focus-visible,.menu-toggle:focus-visible {
    outline: 3px solid #d87baa;
    outline-offset: 2px
}

.menu-toggle {
    display: none;
    border-radius: 999px;
    background: #fff5fa;
    border-color: #eebdd2
}

.hero {
    padding: 52px 22px 32px
}

.hero h1 {
    letter-spacing: -1px;
    color: #803c63
}

.hero p {
    font-size: 14px
}

.hero span,.eyebrow {
    color: #d52b84c4
}

.panel {
    background: #ffffffed;
    border: 1px solid #f7e1eb;
    box-shadow: 0 15px 45px #ad6a8e12;
    border-radius: 23px;
    padding: 27px
}

.panel h2 {
    font-size: 27px;
    color: #d52b84c4
}

.panel h3 {
    color: #864566
}

button {
    transition: background .18s,transform .18s,border-color .18s
}

button:not(:disabled):active {
    transform: scale(.985)
}

button.primary {
    background: linear-gradient(125deg, #bd2068, #ff269dbf);
    box-shadow: 0 8px 20px #a9427228
}

input,select,textarea {
    background: #fffcfe;
    border: 1px solid #eccddd;
    min-height: 45px
}

input:focus,select:focus,textarea:focus {
    outline: 3px solid #f3c6db;
    outline-offset: 1px;
    border-color: #b95986
}

.record,.service {
    border: 1px solid #f3dce7;
    background: #fff9fc
}

.stat {
    background: linear-gradient(140deg,#fff4f9,#fbe0ed);
    border: 1px solid #f4d4e3;
    flex: 1;
    min-width: 170px
}

.stat strong {
    color: #923e6d
}

.total {
    background: #fae4ee
}

dialog {
    background: #fffcfe
}

.admin-layout {
    display: grid;
    grid-template-columns: 235px minmax(0,1fr);
    max-width: 1500px;
    margin: 0 auto;
    min-height: calc(100vh - 72px)
}

.admin-sidebar {
    position: sticky;
    top: 75px;
    align-self: start;
    height: calc(100vh - 75px);
    padding: 32px 14px 24px 20px;
    border-right: 1px solid #f0dbe5;
    background: #fffafd9c;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.sidebar-title {
    padding: 4px 12px 18px;
    color: #b35c88;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px
}

.admin-sidebar a {
    display: block;
    text-decoration: none;
    color: #774960;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700
}

.admin-sidebar a:hover,.admin-sidebar a.active {
    background: #fbe2ee;
    color: #a54276
}

.sidebar-bottom {
    margin-top: auto;
    font-size: 11px;
    color: #bc8da5;
    padding: 15px
}

.admin-main {
    min-width: 0;
    width: 100%;
    max-width: 1200px;
    padding: 12px clamp(15px,3vw,45px) 35px
}

.admin-hero {
    text-align: left;
    padding-left: 2px
}

.admin-hero h1 {
    margin-left: 0
}

.admin-main .panel {
    scroll-margin-top: 98px
}

.admin-main .stats {
    margin-top: 15px
}

#financeHistory {
    max-width: 100%;
    overflow-x: auto
}

.admin-login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 26px;
    background: radial-gradient(circle at 0 5%,#f9d9e8,transparent 45%),#fff6fa;
    color: var(--ink)
}

.admin-login-card {
    width: min(450px,100%);
    background: #fffdfef5;
    border: 1px solid #f2dce7;
    border-radius: 28px;
    padding: clamp(23px,4vw,42px);
    box-shadow: 0 24px 66px #985c7b24;
    text-align: left
}

.admin-login-logo {
    width: 60px;
    height: 60px;
    background: #fbe4ee;
    color: #b34e7b;
    display: grid;
    place-items: center;
    font-size: 35px;
    border-radius: 18px;
    margin-bottom: 20px
}

.admin-login-card h1 {
    font-size: 35px;
    margin: 12px 0
}

.admin-login-card p {
    color: var(--muted)
}

.admin-login-card label {
    display: block;
    font-weight: 700
}

.admin-login-card input {
    width: 100%
}

.admin-login-card button[type=submit] {
    width: 100%;
    color: #fff;
    background: #a84878;
    margin-top: 12px
}

.admin-login-error {
    color: #ad2c5a;
    min-height: 1.4em
}

@media(max-width: 1000px) {
    .site-header {
        padding:12px 18px
    }

    .admin-layout {
        grid-template-columns: 190px minmax(0,1fr)
    }

    .site-nav a,.site-nav button {
        font-size: 12px;
        padding: 9px 10px
    }
}

@media(max-width: 760px) {
    .site-header {
        justify-content:space-between
    }

    .menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 7px
    }

    .site-nav:not(.payment-nav) {
        display: none;
        width: 100%;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        background: #fff6fa;
        border: 1px solid #f0d6e2;
        border-radius: 18px
    }

    .site-nav.open:not(.payment-nav) {
        display: flex
    }

    .site-nav:not(.payment-nav) :is(a,button) {
        width: 100%;
        text-align: left;
        padding: 13px 16px
    }

    .payment-nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap
    }

    .admin-layout {
        display: block
    }

    .admin-sidebar {
        position: static;
        height: auto;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        padding: 10px 16px;
        gap: 3px;
        border-right: 0;
        border-bottom: 1px solid #f0dbe5;
        scrollbar-width: thin
    }

    .admin-sidebar a {
        white-space: nowrap;
        padding: 10px 12px
    }

    .sidebar-title,.sidebar-bottom {
        display: none
    }

    .admin-main {
        padding: 10px 16px 30px
    }

    .admin-hero {
        padding: 25px 5px
    }

    .panel {
        padding: 19px
    }

    .brand-link strong {
        font-size: 13px
    }
}

@media(max-width: 420px) {
    .brand-link strong {
        font-size:11px
    }

    .brand-link small {
        font-size: 9px
    }

    .admin-login-card h1 {
        font-size: 29px
    }

    .stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px
    }

    .stat {
        min-width: 0;
        padding: 11px
    }

    .stat strong {
        font-size: 20px
    }
}

@media print {
    .admin-sidebar,.menu-toggle {
        display: none!important
    }
}

/* Manual payment guide / QR cards shared with customer dashboard */
.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(250px,100%),1fr));
    gap: 15px;
    margin: 18px 0 25px
}

.pay-method {
    border: 1px solid #f0d0df;
    background: #fff9fd;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 8px 30px #b55b8210;
    overflow-wrap: anywhere
}

.pay-method h3 {
    font-size: 20px;
    margin: 0 0 12px;
    color: #a34772
}

.payment-qr {
    width: 210px;
    max-width: 100%;
    display: block;
    aspect-ratio: 1;
    object-fit: contain;
    margin: 14px auto;
    border-radius: 14px;
    border: 1px solid #efcedf;
    background: #fff
}

.copy-line {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #f0d4e2;
    border-radius: 12px;
    padding: 8px 10px
}

.copy-line code {
    font-size: 14px;
    word-break: break-all
}

.copy-line button {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f9e2ed;
    color: #793858
}

.pay-method .instructions {
    white-space: pre-wrap;
    line-height: 1.6;
    font-size: 13px;
    color: #76546a
}

@media(max-width: 760px) {
    .site-header:has(#paymentNavMenu.open) .site-nav {
        display:flex
    }

    .payment-method-grid {
        grid-template-columns: 1fr
    }
}

/* Public order-tracker link in the landing navbar */
.landing-nav-actions {
    display: flex;
    gap: 12px;
    align-items: center
}

.nav-global-orders {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #9b4974;
    font-size: 13px;
    font-weight: 800;
    padding: 11px 16px;
    border: 1px solid #ead2de;
    border-radius: 999px;
    background: #fff9fc
}

.nav-global-orders:hover {
    background: #fce5f0
}

.nav-global-orders:focus-visible {
    outline: 3px solid #c57da3;
    outline-offset: 2px
}

@media(max-width: 460px) {
    .landing-nav-actions {
        gap:7px
    }

    .nav-global-orders {
        font-size: 11px;
        padding: 9px 10px
    }

    .nav-login {
        font-size: 11px
    }

    .landing-brand span {
        display: none
    }
}

/* Login / sign-up landing: full-screen photo, readable pink glass overlay. */
body.landing-page {
    background-color: #f9e8f0;
    background-image: linear-gradient(110deg, rgba(255, 250, 253, .78) 0%, rgba(255, 250, 253, .68) 52%, rgba(255, 247, 251, .70) 100%), url("https://i.pinimg.com/736x/86/d5/1a/86d51a860833432e2c479c81f3f1d4a0.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.landing-page .landing {
    min-height: 100vh;
    min-height: 100dvh;
    background: transparent;
}

/* Retain strong contrast for login and registration inputs. */
body.landing-page .auth-shell {
    background: rgb(254 254 254 / 31%);
    border-color: rgba(255, 255, 255, .85);
    box-shadow: 0 25px 68px rgba(105, 51, 79, .20);
}

@media (max-width: 760px) {
    body.landing-page {
        background-attachment: scroll;
        background-position: center top;
    }
}

@media print {
    body.landing-page {
        background: #fff;
    }
}