@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@600;700&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap");

/* Skyline: deep navy and sky blue. Inside: a navy menu down the side, a white top bar with the account and a blue
   balance badge, big rounded titles, a navy stats band, white cards with soft corners and square platform buttons.
   Outside: a white menu, a rounded navy welcome with the sign-in beside it, pale-blue sections and a navy footer.
   The colours below are this theme's own: change them here, the rest follows. Selectors start with html so they
   outrank the colour preset's inline CSS, which loads after this file. */
:root {
    --navy: var(--sidebar-bg);
    --navy-2: #0c3d6e;
    --sky: var(--brand);
    --pale: #e8f1ff;
    --ice: #eef8ff;
    --line: #e0e7f1;
    --page: #fbfcff;
    --heading-font: "Montserrat Alternates", var(--font), system-ui, sans-serif;
    --body-font: "Satoshi", var(--font), system-ui, sans-serif;
}

html body { background: var(--page) !important; font-family: var(--body-font); color: #0f172a; }
html h1, html h2, html h3, html .page-title { font-family: var(--heading-font); letter-spacing: -.01em; }
html h1, html h2 { font-weight: 700 !important; }

/* ---- Signed in: the navy menu down the side. */
html .sky-side { background: var(--navy) !important; border: 0 !important; color: #fff; }
html .sky-logo { display: flex; align-items: center; gap: .6rem; padding: 1.25rem 1.25rem 1rem; }
html .sky-mark { display: inline-flex; height: 2.25rem; width: 2.25rem; align-items: center; justify-content: center; border-radius: 10px; background: var(--sky); color: #fff; font-weight: 700; }
html .sky-prefs { padding: .25rem 1.25rem .75rem; border-bottom: 1px solid rgb(255 255 255 / .1); }
html .sky-prefs, html .sky-prefs :is(span, label) { color: #fff !important; }
html .sky-nav { display: flex; flex-direction: column; gap: 2px; padding: .5rem .5rem 1.5rem; }
html .sky-link { display: flex; align-items: center; gap: .65rem; border-radius: 6px; padding: .55rem 1rem; color: #fff !important; font-size: .97rem; font-weight: 400; text-align: start; background: transparent !important; transition: background .15s; }
html .sky-link svg { opacity: .9; }
html .sky-link:hover { background: rgb(255 255 255 / .08) !important; }
html .sky-link.is-active { background: rgb(255 255 255 / .12) !important; font-weight: 500; box-shadow: inset 3px 0 0 var(--sky); }
html .sky-admin { color: #fcd34d !important; }

/* ---- Signed in: the white top bar. */
html .sky-top { background: #fff !important; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .06); }
html .sky-avatar { display: inline-flex; height: 2.5rem; width: 2.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: var(--navy); color: #fff; font-size: .8rem; font-weight: 700; }
html .sky-wallet { border-radius: 4px; background: #3b82f6; padding: .2rem .5rem; color: #fff; font-size: .72rem; font-weight: 500; }
html .sky-quick a { color: #374151; font-size: 1rem; }
html .sky-quick a:hover, html .sky-quick a.is-active { color: #3b82f6; }

/* ---- Page titles and the New order stats band. */
html .page-title { font-size: 1.65rem !important; font-weight: 700 !important; color: var(--navy) !important; }
html .sky-head { margin-bottom: 1rem; }
html .sky-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; border-radius: 20px; padding: 1.25rem 1.25rem; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); box-shadow: 0 4px 20px rgb(1 17 43 / .15); }
@media (min-width: 1024px) { html .sky-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 1.5rem 2rem; } }
html .sky-stat { display: flex; min-width: 0; align-items: center; gap: .8rem; }
html .sky-stat-icon { display: inline-flex; height: 46px; width: 46px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: color-mix(in srgb, var(--sky) 12%, transparent); border: 2px solid color-mix(in srgb, var(--sky) 45%, transparent); color: #5cb8ff; }
html .sky-stat-icon svg { height: 20px; width: 20px; }
html .sky-stat strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 1.1rem; font-weight: 700; }
html .sky-stat small { display: block; color: rgb(255 255 255 / .6); font-size: .75rem; font-weight: 500; }

/* ---- Cards, the order form, fields and buttons. */
html .card, html .table-wrap { border-radius: 20px !important; border: 1px solid var(--line) !important; background-color: #fff !important; box-shadow: 0 1px 4px rgb(0 0 0 / .04) !important; }
html .card { padding: 1.5rem; }
html .card .card { border-radius: 14px !important; }
html .card :is(h2, h3) { color: var(--navy); }
html .sky-neworder > form.card { background-color: var(--ice) !important; }
html .sky-neworder [role="group"] { display: flex; flex-wrap: wrap; gap: .5rem; border-radius: 14px; border: 1px solid var(--line); background: #f5f8fe; padding: .85rem; }
html .platform-btn { height: 44px; min-width: 44px; justify-content: center; gap: .4rem; border-radius: 12px !important; border: 2px solid transparent !important; background: #fff !important; padding: 0 .75rem; color: var(--navy) !important; box-shadow: 0 1px 3px rgb(0 0 0 / .06); font-size: .8rem; }
html .platform-btn.is-on { background: #e8f4ff !important; border-color: var(--sky) !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--sky) 20%, transparent); color: var(--navy) !important; }
html .label { color: var(--navy) !important; font-size: .875rem; font-weight: 600; }
html .input, html select.input, html textarea.input { border-radius: 10px !important; border: 2px solid var(--line) !important; background-color: #fff !important; padding: .7rem 1rem; font-size: .9rem; }
html .input:focus { border-color: var(--sky) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 15%, transparent) !important; outline: none; }
html .input.ps-9 { padding-inline-start: 2.5rem; }
html .btn { border-radius: 8px !important; background: var(--sky) !important; color: #fff !important; font-weight: 600; padding: .65rem 1.25rem; }
html .btn:hover { background: color-mix(in srgb, var(--sky) 85%, #000) !important; }
html .btn.w-full { border-radius: 12px !important; padding-block: .9rem; font-weight: 700; box-shadow: 0 4px 14px color-mix(in srgb, var(--sky) 30%, transparent); }
html .btn-light { border-radius: 8px !important; border: 1px solid var(--line) !important; }
html .table-brand thead th, html .table thead th { background: var(--pale) !important; color: var(--navy) !important; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

/* ---- Visitors: the white menu, the sign-in link and the sign-up button. */
html .sky-gnav { background: #fff !important; border: 0 !important; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .06); }
@media (min-width: 1024px) { html .sky-gnav { position: sticky; top: 0; } }
html .sky-mark { flex-shrink: 0; }
html .sky-gnav-link { color: var(--navy); font-size: 1rem; }
html .sky-gnav-link:hover, html .sky-gnav-link.is-active { color: var(--sky); }
html .sky-signin { color: var(--sky); font-weight: 500; }
html .sky-signup { border-radius: 4px; background: var(--sky); padding: .5rem 1.6rem; color: #fff; font-weight: 500; white-space: nowrap; }
@media (max-width: 639px) { html .sky-signup { padding: .45rem .9rem; font-size: .9rem; } }
html .sky-signup:hover { background: color-mix(in srgb, var(--sky) 85%, #000); }

/* ---- Home page: the navy welcome, its headline in white, the sign-in card beside it. */
html .home-hero { background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 55%), var(--navy); border-radius: 24px; padding: 3rem 1.5rem; color: #fff; }
@media (min-width: 640px) { html .home-hero { padding: 4rem 3rem; } }
html .home-hero h1 { color: #fff !important; line-height: 1.15; }
html .home-hero h1 + p, html .home-hero ul, html .home-hero ul li, html .home-hero > div > div > .text-sm { color: rgb(255 255 255 / .82) !important; }
html .home-hero ul li span:first-child { color: var(--accent) !important; }
html .home-hero .btn:not(.w-full) { background: var(--sky) !important; color: #fff !important; padding: .8rem 2.25rem; border-radius: 4px !important; }
html .home-hero form.card { background: rgb(255 255 255 / .06) !important; border: 1px solid rgb(255 255 255 / .14) !important; box-shadow: none !important; backdrop-filter: blur(6px); }
html .home-hero form.card :is(h2, .label, label, p) { color: #fff !important; }
html .home-hero form.card :is(.text-slate-500, .text-slate-600) { color: rgb(255 255 255 / .75) !important; }
html .home-hero form.card .input { border-color: transparent !important; color: #111827 !important; }
html .home-hero form.card .text-\[var\(--brand\)\] { color: #7cc4ff !important; }
html .home-hero form.card .btn-light { background: #fff !important; color: #111827 !important; }

/* Stats: one blue strip, the numbers in white. */
html .block-stats > .grid { background: var(--sky); border-radius: 16px; padding: 1.25rem; gap: .5rem; box-shadow: 0 20px 40px -24px var(--sky); }
html .block-stats .card { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html .block-stats .card div { color: #fff !important; }
html .block-stats .card .text-sm { color: rgb(255 255 255 / .85) !important; }

/* Sections: pale blue panels with big rounded corners, headings in navy capitals. */
html .home-soft { background: var(--pale) !important; }
html .blk-panel { border-radius: 24px; }
html [class*="block-"] > h2 { color: var(--navy) !important; text-transform: uppercase; font-size: 1.75rem; }
html .block-steps .card, html .block-features .card { border-radius: 16px !important; }

/* Call to action: a navy band, white text, a blue button. */
html .block-cta { background: var(--navy) !important; border: 0 !important; border-radius: 16px !important; padding: 3rem 1.5rem; text-align: center; }
html .block-cta :is(h2, p) { color: #fff !important; }
html .block-cta h2 { text-transform: none; }
html .block-cta .btn { background: var(--sky) !important; color: #fff !important; }
html .home-brand { background: var(--sky) !important; }

/* Visitors' footer: navy, columns, light links. */
html .sky-footer { margin-top: 3rem; background: var(--navy); color: rgb(255 255 255 / .7); }
html .sky-footer h3 { font-family: var(--body-font); color: #fff; font-size: .875rem; font-weight: 700; }
html .sky-footer a { color: rgb(255 255 255 / .75); }
html .sky-footer a:hover { color: #fff; }
html .sky-footer-bottom { border-top: 1px solid rgb(255 255 255 / .1); }

/* Language and currency menus and the light/dark switch keep readable colours on the navy menu. */
html :is(.sky-side, .panel-sidebar) :is(.pref-btn, .pref-btn *, .pref-menu, .pref-menu *) { color: var(--text) !important; }
html :is(.sky-side, .panel-sidebar) .pref-btn svg:first-child { color: var(--brand) !important; }
html .sky-side .theme-toggle { background: transparent !important; border-color: rgb(255 255 255 / .35) !important; }
html .sky-side select { background: transparent !important; color: #fff !important; border-color: rgb(255 255 255 / .3) !important; }
html .sky-side option { background: var(--navy); color: #fff; }

/* Dark mode: white bars and cards turn dark navy. */
html[data-theme="dark"] body { background: var(--bg) !important; color: var(--text); }
html[data-theme="dark"] :is(.sky-top, .sky-gnav, .card, .table-wrap) { background-color: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .sky-neworder > form.card { background-color: var(--surface) !important; }
html[data-theme="dark"] :is(.page-title, .label, .sky-gnav-link, [class*="block-"] > h2, .card h2, .card h3) { color: var(--text) !important; }
html[data-theme="dark"] .sky-quick a { color: var(--text-soft); }
html[data-theme="dark"] .home-soft { background: color-mix(in srgb, var(--brand) 10%, var(--surface)) !important; }

/* ---- Home page (Skyline's own signin.twig). The welcome: big white title, its last words in blue, a phone beside it
   and the highlights in a blue strip hanging off its bottom edge. */
html .sky-hero { position: relative; margin-bottom: 3.5rem; padding-bottom: 5rem; }
@media (min-width: 640px) { html .sky-hero { padding: 4rem 2.5rem 5.5rem; } }
html .sky-hero-title { color: #fff !important; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.2; }
html .sky-hero-title span { color: #3b82f6; text-transform: uppercase; }
html .sky-hero-text { margin-top: 1rem; color: #fbfcff !important; font-size: 1.1rem; font-weight: 500; line-height: 1.6; }
html .sky-hero-btn { display: inline-block; margin-top: 1.75rem; border-radius: 4px !important; padding: .75rem 2.25rem !important; font-weight: 500 !important; }
html .sky-hero-img { max-height: 30rem; border-radius: 18px; object-fit: contain; }
html .sky-hero-strip { position: absolute; bottom: -1.75rem; left: 1rem; right: 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.75rem; margin: 0 auto; max-width: 40rem; border-radius: 16px; background: var(--sky); padding: 1rem 1.5rem; color: #fff; font-size: .85rem; font-weight: 500; box-shadow: 0 18px 36px -18px var(--sky); }
@media (min-width: 1024px) { html .sky-hero-strip { left: 2.5rem; right: auto; margin: 0; } }
/* Narrower screens: the strip sits inside the welcome, under the button, instead of hanging off its edge. */
@media (max-width: 1023px) { html .sky-hero { padding-bottom: 2rem; margin-bottom: 1rem; } html .sky-hero-strip { position: static; margin-top: 2rem; justify-content: flex-start; } }
html .sky-hero-strip li { display: flex; align-items: center; gap: .4rem; color: #fff !important; }
html .sky-hero-strip svg { height: 1.1rem; width: 1.1rem; flex-shrink: 0; }

/* The phone: an order form drawn in CSS (decoration only). */
html .sky-phone { position: relative; width: 17rem; height: 31rem; border: 10px solid #0b0f19; border-radius: 2.6rem; background: linear-gradient(180deg, #f1f5ff, #fff 45%); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6); overflow: hidden; }
html .sky-phone-notch { margin: .5rem auto 0; height: 1.3rem; width: 6rem; border-radius: 9999px; background: #0b0f19; }
html .sky-phone-top { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; font-family: var(--heading-font); font-weight: 700; color: var(--navy); }
html .sky-phone-menu { height: 2px; width: 1.1rem; background: var(--navy); box-shadow: 0 -6px 0 var(--navy), 0 6px 0 var(--navy); }
html .sky-phone-card { margin: 3.5rem .9rem 0; border-radius: 14px; background: #fff; padding: .9rem; box-shadow: 0 14px 30px -12px rgb(1 17 43 / .35); }
html .sky-phone-select { display: flex; justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; color: var(--navy); font-size: .78rem; font-weight: 600; }
html .sky-phone-row { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; border: 1px solid var(--line); border-radius: 6px; padding: .4rem .6rem; color: #334155; font-size: .72rem; }
html .sky-phone-row span { height: .7rem; width: .7rem; border-radius: 3px; }
html .sky-phone-btn { margin: .8rem auto 0; width: fit-content; border-radius: 6px; background: var(--sky); padding: .4rem 1rem; color: #fff; font-size: .72rem; font-weight: 600; }

/* "Log in": a centred title, then a navy card with the two fields side by side, then an "or" line. */
html .sky-signin { margin-top: 1rem; text-align: center; }
html .sky-signin-title { color: var(--navy) !important; font-size: 1.9rem; text-transform: uppercase; }
html .sky-signin-card { margin: 1.5rem auto 0; max-width: 56rem; border-radius: 24px; background: var(--navy); padding: 2rem; color: #fff; text-align: start; box-shadow: 0 10px 25px -10px rgb(1 17 43 / .4); }
html .sky-signin-card label, html .sky-signin-card p, html .sky-signin-card a { color: #fff; }
html .sky-signin-label { display: block; margin-bottom: .5rem; font-weight: 500; }
html .sky-signin-input { width: 100%; border-radius: 4px; border: 0; background: #fff; padding: .75rem; color: #111827; }
html .sky-signin-input:focus { outline: 2px solid var(--sky); outline-offset: 1px; }
html .sky-signin-btn { padding: .6rem 2.25rem !important; border-radius: 4px !important; }
html .sky-signin-link { color: var(--sky) !important; font-weight: 500; }
html .sky-or { display: flex; align-items: center; gap: 1rem; margin: 1.75rem auto 0; max-width: 40rem; color: #6b7280; font-size: .85rem; text-transform: uppercase; }
html .sky-or::before, html .sky-or::after { content: ""; height: 1px; flex: 1; background: #d1d5db; }

/* Section titles: big, centred capitals. */
html [class*="block-"] > h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }

/* Steps: a blue line down the middle, each step on alternate sides, a big light number before its blue title. */
html .block-steps > h2 { text-align: center; }
html .block-steps li.card { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html .block-steps li.card > span:first-child { display: inline-flex; height: auto; width: auto; margin-inline-end: .75rem; background: transparent !important; color: #3b82f6 !important; font-family: var(--heading-font); font-size: 2.25rem; font-weight: 300; vertical-align: middle; }
html .block-steps li.card h3 { display: inline; color: #3b82f6 !important; font-weight: 600; text-transform: uppercase; vertical-align: middle; }
html .block-steps li.card p { margin-top: .5rem; color: #4b5563 !important; font-size: .95rem; }
@media (min-width: 768px) {
    html .block-steps ol { position: relative; display: block !important; margin-inline: auto; max-width: 52rem; }
    html .block-steps ol::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #3b82f6; transform: translateX(-50%); }
    html .block-steps li.card { position: relative; width: 50%; padding: 1.25rem 3rem !important; }
    html .block-steps li.card:nth-child(odd) { margin-left: 50%; text-align: left; }
    html .block-steps li.card:nth-child(even) { text-align: right; }
    html .block-steps li.card::before { content: ""; position: absolute; top: 2rem; height: 1.1rem; width: 1.1rem; border-radius: 9999px; background: #fff; border: 4px solid #3b82f6; }
    html .block-steps li.card:nth-child(odd)::before { left: calc(-.55rem - 1px); }
    html .block-steps li.card:nth-child(even)::before { right: calc(-.55rem - 1px); }
}

/* Features: the pale "what's trending" panel with white cards and big titles. */
html .block-features { border-radius: 24px; background: var(--pale); padding: 3rem 1.5rem; text-align: center; }
@media (min-width: 768px) { html .block-features { padding: 4rem 3rem; } }
html .block-features .card { border-radius: 12px !important; border: 0 !important; padding: 1.5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1) !important; text-align: start; }
html .block-features .card h3 { font-family: var(--heading-font); color: var(--navy) !important; font-size: 1.3rem; font-weight: 700; text-transform: uppercase; }

/* Footer column titles in small bold capitals. */
html .sky-footer h3 { text-transform: uppercase; letter-spacing: .03em; }

/* ---- Dark mode, everything else (last in the file so it wins over the light rules above): Skyline's own pale and
   white colours turn dark, navy text turns light, fields get the dark field colour so typed text stays readable. */
html[data-theme="dark"] {
    --pale: color-mix(in srgb, var(--brand) 12%, var(--surface));
    --ice: var(--surface);
    --line: var(--border);
    --page: var(--bg);
}
html[data-theme="dark"] :is(.text-\[var\(--navy\)\], .sky-signin-title, .card h2, .card h3, .block-features .card h3, .table thead th, .table-brand thead th) { color: var(--text) !important; }
html[data-theme="dark"] :is(.input, select.input, textarea.input) { background-color: var(--input-bg) !important; color: var(--text) !important; }
html[data-theme="dark"] .sky-neworder [role="group"] { background: var(--surface-2); }
html[data-theme="dark"] .platform-btn { background: var(--surface-2) !important; color: var(--text) !important; }
html[data-theme="dark"] .platform-btn.is-on { background: color-mix(in srgb, var(--brand) 22%, var(--surface)) !important; color: var(--text) !important; }
html[data-theme="dark"] .block-steps li.card p { color: var(--text-soft) !important; }
html[data-theme="dark"] .block-steps li.card::before { background: var(--surface); }
html[data-theme="dark"] .sky-or { color: var(--muted); }
html[data-theme="dark"] .sky-or::before, html[data-theme="dark"] .sky-or::after { background: var(--border); }
html[data-theme="dark"] .sky-quick a:hover, html[data-theme="dark"] .sky-quick a.is-active { color: var(--brand); }