/* Sunclax pages — page-scoped palette and blocks on top of the Hub theme,
   Tempo's structure with Sunclax's own values (sunclax-brief.org, task 2).
   Everything is scoped under body.sunclax-page so nothing leaks into the
   homepage, the Triada landing or the Tempo pages. One accent: the icon's
   amber — a deep one for text on paper, the bright one only on the dark
   ground. The hero sits on the icon's warm graphite. Restraint: no
   parallax, no stock photos. */

body.sunclax-page {
    --sx-amber: #B8641A;
    --sx-amber-deep: #8A4A12;
    --sx-amber-bright: #FFA928;
    --sx-ink: #2A2523;
    --sx-ink-soft: #3A3330;
    --sx-cream: #F7F2EA;
    --sx-sand: #EFE6D8;
    --sx-clay: #9C5A21;
    --sx-paper: #FCFAF6;
    --sx-text: #1E1A17;
    --sx-text-soft: #625A52;
    --sx-line: rgba(30, 26, 23, .12);
    /* Same type as the rest of the site (the theme's body font). */
    --sx-font: var(--lqd-body-font-family);

    /* Theme tokens the Hub CSS reads. */
    --lqd-color-primary: var(--sx-amber);
    --lqd-color-gradient-start: var(--sx-amber);
    --lqd-color-gradient-stop: var(--sx-amber-deep);
    --lqd-heading-color: var(--sx-text);
    --lqd-body-color: var(--sx-text);

    background: var(--sx-paper);
    color: var(--sx-text);
}

/* ---- header: the site's own, on the same frosted white bar as Triada --- */
body.sunclax-page #site-header {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
body.sunclax-page #site-header.is-stuck {
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}
body.sunclax-page #site-header .lqd-head-sec-wrap .main-nav > li > a,
body.sunclax-page #site-header .lqd-head-sec-wrap .navbar-brand,
body.sunclax-page #site-header .lqd-head-sec-wrap .nav-trigger,
body.sunclax-page #site-header .lqd-head-sec-wrap .nav-trigger .txt,
body.sunclax-page #site-header .lqd-head-sec-wrap .module-button a { color: #1a1a1a !important; }
body.sunclax-page #site-header .lqd-head-sec-wrap .link-sup { color: #888 !important; }
/* Custom JS-driven toggle (Bootstrap's collapse fights the Liquid theme bg);
   .sx-menu-open is set in base.html. */
body.sunclax-page #main-header-collapse { display: none; }
body.sunclax-page #main-header-collapse.sx-menu-open {
    display: flex !important; flex-direction: row !important; align-items: center;
    height: auto !important; overflow: visible !important;
}
body.sunclax-page #main-header-collapse .main-nav { flex-direction: row !important; align-items: center; gap: 4px; }
body.sunclax-page #main-header-collapse .main-nav > li { padding: 0 14px; }
body.sunclax-page #main-header-collapse .main-nav > li > a { white-space: nowrap; }
body.sunclax-page #site-header .lqd-mobile-sec .navbar-brand { color: #1a1a1a !important; background: transparent !important; }
body.sunclax-page #site-header .lqd-mobile-sec .bar { color: #1a1a1a !important; background: #1a1a1a; }
@media (max-width: 991px) {
    body.sunclax-page #site-header .lqd-mobile-sec,
    body.sunclax-page #site-header .lqd-mobile-sec-inner,
    body.sunclax-page #site-header > .container,
    body.sunclax-page #site-header > .container > .row {
        background: transparent !important; max-width: 100% !important;
        margin-left: 0 !important; margin-right: 0 !important;
    }
    body.sunclax-page .lqd-mobile-sec .lqd-mobile-sec-inner { justify-content: flex-start !important; }
    body.sunclax-page .lqd-mobile-sec .navbar-brand,
    body.sunclax-page .lqd-mobile-sec .navbar-toggle {
        width: auto !important; max-width: none !important; flex: 0 0 auto !important; background: transparent !important;
    }
    body.sunclax-page .lqd-mobile-sec .navbar-brand {
        display: inline-flex !important; justify-content: flex-start !important;
        margin-inline-start: 0 !important; margin-inline-end: 0 !important; order: 0 !important;
    }
    body.sunclax-page .lqd-mobile-sec .navbar-toggle { margin-inline-start: auto !important; margin-inline-end: 0 !important; order: 99 !important; }
    body.sunclax-page .lqd-mobile-sec .navbar-brand > div { flex-wrap: nowrap !important; white-space: nowrap; background: transparent !important; }
}

/* ---- sections -------------------------------------------------------- */
/* The site footer is sticky (fixed behind the page), so the content must be
   opaque all the way down: main and every section paint a background. */
body.sunclax-page #lqd-site-content { background: var(--sx-paper); position: relative; z-index: 2; }
body.sunclax-page .sx-section { padding: 120px 0; background: var(--sx-paper); }
body.sunclax-page .sx-doc-body { background: var(--sx-paper); }
body.sunclax-page .sx-bg-cream { background: var(--sx-cream); }
body.sunclax-page .sx-bg-sand { background: var(--sx-sand); }
body.sunclax-page .sx-bg-ink { background: var(--sx-ink); color: #F3EDE3; }
body.sunclax-page .sx-bg-clay { background: var(--sx-clay); color: #FFF7EF; }

body.sunclax-page .sx-hero { padding: 200px 0 120px; }
body.sunclax-page .sx-kicker {
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--sx-amber); margin: 0 0 22px; font-weight: 600;
}
body.sunclax-page .sx-kicker--light { color: var(--sx-amber-bright); }
body.sunclax-page .sx-h1 {
    font-family: var(--sx-font); font-weight: 800; letter-spacing: -.02em;
    font-size: clamp(40px, 5.2vw, 68px); line-height: 1.05; margin: 0 0 24px;
}
body.sunclax-page .sx-h1--hero { color: #FBF6EE; font-size: clamp(46px, 6.2vw, 84px); margin-bottom: 10px; }
body.sunclax-page .sx-hero__line { font-family: var(--sx-font); font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; color: var(--sx-amber-bright); margin: 0 0 22px; letter-spacing: -.01em; }
body.sunclax-page .sx-h2 {
    font-family: var(--sx-font); font-weight: 800; letter-spacing: -.015em;
    font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; margin: 0 0 20px;
}
body.sunclax-page .sx-h2--light { color: #FBF6EE; }
body.sunclax-page .sx-lead {
    font-size: 19px; line-height: 1.55; max-width: 34em; margin: 0 0 18px;
    color: var(--sx-text-soft);
}
body.sunclax-page .sx-lead--light { color: rgba(251, 246, 238, .78); }
body.sunclax-page .sx-muted { color: var(--sx-text-soft); font-size: 15px; }

body.sunclax-page .sx-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 30px 0 14px; }
body.sunclax-page .sx-actions__note { font-size: 14px; color: rgba(251, 246, 238, .65); }
body.sunclax-page .sx-hero__promise { font-size: 14px; color: rgba(251, 246, 238, .55); margin: 0; }

body.sunclax-page .sx-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sx-amber); color: #fff !important; text-decoration: none !important;
    font-weight: 600; font-size: 15px; letter-spacing: .01em;
    padding: 15px 28px; border-radius: 8px;
    transition: background .15s ease, transform .15s ease;
}
body.sunclax-page .sx-btn:hover { background: var(--sx-amber-deep); transform: translateY(-1px); }
/* On the dark ground the bright amber carries the button. */
body.sunclax-page .sx-bg-ink .sx-btn:not(.sx-btn--ghost) { background: var(--sx-amber-bright); color: var(--sx-ink) !important; }
body.sunclax-page .sx-bg-ink .sx-btn:not(.sx-btn--ghost):hover { background: #FFB84D; }
body.sunclax-page .sx-btn--ghost { background: transparent; color: var(--sx-text) !important; box-shadow: inset 0 0 0 2px var(--sx-amber); }
body.sunclax-page .sx-btn--ghost:hover { background: var(--sx-amber); color: #fff !important; }
body.sunclax-page .sx-btn--ghost-light { color: #FBF6EE !important; box-shadow: inset 0 0 0 2px rgba(251,246,238,.5); }
body.sunclax-page .sx-btn--ghost-light:hover { background: #FBF6EE; color: var(--sx-ink) !important; }

/* The screenshot slot: window proportions 1280×800; grey until the PNG is there. */
body.sunclax-page .sx-shot {
    width: 100%; aspect-ratio: 16 / 10; border-radius: 12px;
    background: #DAD5CD;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
body.sunclax-page .sx-shot--sm { box-shadow: 0 18px 50px rgba(0, 0, 0, .14); }
body.sunclax-page .sx-shot--real { display: block; height: auto; object-fit: cover; background: #DAD5CD; }
body.sunclax-page .sx-figure { margin: 0; }
body.sunclax-page .sx-figure__cap { font-size: 13px; line-height: 1.4; color: var(--sx-text-soft); margin: 12px 0 0; }
body.sunclax-page .sx-bg-ink .sx-figure__cap, body.sunclax-page .sx-hero .sx-figure__cap { color: rgba(251,246,238,.6); }
body.sunclax-page .sx-figure--card { width: 60%; margin: -40px 0 0 auto; position: relative; }
body.sunclax-page .sx-figure--card .sx-shot--card { width: 100%; margin: 0; }
body.sunclax-page .sx-figure--card .sx-figure__cap { text-align: right; }
body.sunclax-page .sx-figure--xs .sx-figure__cap { display: none; }
body.sunclax-page .sx-shot--card { width: 60%; margin: -40px 0 0 auto; position: relative; aspect-ratio: 16 / 9; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
body.sunclax-page .sx-shot--xs { aspect-ratio: 16 / 10; border-radius: 8px; box-shadow: 0 10px 26px rgba(0,0,0,.12); }

/* ---- the release mail block --------------------------------------------- */
body.sunclax-page .sx-eyebrow {
    display: inline-block; font-size: 13px; letter-spacing: .18em; font-weight: 700;
    text-transform: uppercase; background: #FBF6EE; color: var(--sx-ink);
    padding: 6px 12px; border-radius: 4px; margin: 0 0 22px;
}
body.sunclax-page .sx-sub-form { width: 100%; margin-top: 1.2em; display: flex; flex-direction: column; gap: 14px; }
body.sunclax-page .sx-sub-form__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
body.sunclax-page .sx-sub-form input[type="email"],
body.sunclax-page .sx-sub-form input[type="text"] {
    flex: 1 1 240px; min-width: 0; padding: 16px 18px; border-radius: 6px; border: none;
    font-size: 16px; background: #fff; color: #1a1a1a; font-family: inherit;
}
body.sunclax-page .sx-sub-form input::placeholder { color: #999; font-weight: 400; }
body.sunclax-page .sx-sub-form input[type="email"]:focus,
body.sunclax-page .sx-sub-form input[type="text"]:focus { outline: 2px solid #FBF6EE; outline-offset: 0; }
body.sunclax-page .sx-sub-form input.is-invalid { background: #fdeaea !important; outline: 2px solid #d23a3a !important; }
body.sunclax-page .sx-sub-form input.is-valid { outline: 2px solid #2da44e !important; }
body.sunclax-page .sx-sub-form .cf-err { display: none !important; }
body.sunclax-page .sx-sub-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
body.sunclax-page .sx-sub-form button {
    flex: 0 0 auto; background: #FBF6EE; color: var(--sx-ink); font-weight: 900;
    padding: 16px 26px; border-radius: 6px; border: none; cursor: pointer;
    font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
    transition: background .15s ease, color .15s ease;
}
body.sunclax-page .sx-sub-form button:hover { background: #fff; color: var(--sx-amber-deep); }
body.sunclax-page .sx-sub-form__captcha { display: flex; align-items: center; min-height: 65px; }
body.sunclax-page .sx-sub-form__captcha .cf-turnstile { display: inline-block; }
body.sunclax-page .sx-sub-form__lang { font-size: 13px; color: rgba(255, 247, 239, .8); margin-top: 1em; }
body.sunclax-page .sx-sub-form__lang strong { color: #FBF6EE; }
body.sunclax-page .sx-thanks { padding: 190px 0 80px; }
@media (max-width: 767px) {
    body.sunclax-page .sx-sub-form__captcha { justify-content: center; }
    body.sunclax-page .sx-sub-form__captcha .cf-turnstile { margin: 0 auto; }
}

/* ---- documents ------------------------------------------------------- */
body.sunclax-page .sx-doc-head { padding: 190px 0 60px; }
body.sunclax-page .sx-doc-body { padding: 60px 0 120px; }
body.sunclax-page .sx-doc-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 26px; }
body.sunclax-page .sx-doc-nav a {
    display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.2;
    color: var(--sx-text); text-decoration: none; border: 1px solid var(--sx-line); background: transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.sunclax-page .sx-doc-nav a:hover { border-color: var(--sx-amber); color: var(--sx-amber); }
body.sunclax-page .sx-doc-nav a.is-current { background: var(--sx-amber); border-color: var(--sx-amber); color: #fff; }
body.sunclax-page .sx-legal-nav { font-size: 16px; line-height: 1.5; color: var(--sx-text); margin: 18px 0 0; }
body.sunclax-page .sx-legal-nav a { color: var(--sx-amber); font-weight: 600; text-decoration: none; }
body.sunclax-page .sx-legal-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.sunclax-page .sx-prose .sx-legal-nav { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid rgba(0,0,0,.08); }
body.sunclax-page .sx-prose { font-size: 17px; line-height: 1.65; color: var(--sx-text); }
body.sunclax-page .sx-prose h2 {
    font-family: var(--sx-font); font-weight: 700; font-size: 28px;
    margin: 44px 0 14px; letter-spacing: -.01em;
}
body.sunclax-page .sx-prose h3 { font-family: var(--sx-font); font-weight: 700; font-size: 20px; margin: 28px 0 10px; }
body.sunclax-page .sx-prose h2:first-child { margin-top: 0; }
body.sunclax-page .sx-prose p, body.sunclax-page .sx-prose li { max-width: 40em; }
body.sunclax-page .sx-prose ul, body.sunclax-page .sx-prose ol { padding-left: 1.3em; margin: 0 0 18px; }
body.sunclax-page .sx-prose li { margin: 0 0 8px; }
body.sunclax-page .sx-prose a { color: var(--sx-amber); text-decoration: underline; text-underline-offset: 3px; }
body.sunclax-page .sx-prose code { font-size: .92em; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.05); overflow-wrap: anywhere; }

/* ---- faq ------------------------------------------------------------- */
body.sunclax-page .sx-faq__item { border-top: 1px solid var(--sx-line); padding: 18px 0; }
body.sunclax-page .sx-faq__item:last-child { border-bottom: 1px solid var(--sx-line); }
body.sunclax-page .sx-faq__q {
    cursor: pointer; font-family: var(--sx-font); font-size: 21px; font-weight: 700;
    list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
body.sunclax-page .sx-faq__q::-webkit-details-marker { display: none; }
body.sunclax-page .sx-faq__q::after { content: "+"; color: var(--sx-amber); font-family: var(--sx-font); }
body.sunclax-page .sx-faq__item[open] .sx-faq__q::after { content: "–"; }
body.sunclax-page .sx-faq__a { padding: 12px 0 4px; color: var(--sx-text-soft); font-size: 16px; line-height: 1.6; max-width: 40em; }

/* Hero mark: the app icon + name, since the header is the site's. */
body.sunclax-page .sx-hero__mark { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; flex-wrap: wrap; }
body.sunclax-page .sx-hero__mark img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }

/* ---- the site footer keeps its own light ground in both schemes -------- */
body.sunclax-page .main-footer, body.sunclax-page .main-footer .ld-fh-element,
body.sunclax-page .main-footer h4, body.sunclax-page .main-footer p { color: #1a1a1a; }

/* ---- landing blocks --------------------------------------------------- */
body.sunclax-page .sx-h3 { font-family: var(--sx-font); font-weight: 700; font-size: 22px; line-height: 1.25; margin: 14px 0 8px; }
body.sunclax-page .sx-copy { font-size: 16px; line-height: 1.6; color: var(--sx-text-soft); margin: 0 0 12px; max-width: 34em; }
body.sunclax-page .sx-list { list-style: none; padding: 0; margin: 18px 0 0; max-width: 34em; }
body.sunclax-page .sx-list li { position: relative; padding: 7px 0 7px 22px; font-size: 16px; line-height: 1.5; color: var(--sx-text-soft); border-top: 1px solid var(--sx-line); }
body.sunclax-page .sx-list li:first-child { border-top: 0; }
body.sunclax-page .sx-list li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--sx-amber); }
body.sunclax-page .sx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
body.sunclax-page .sx-step__n { font-size: 12px; letter-spacing: .14em; color: var(--sx-amber); font-weight: 700; margin: 18px 0 0; }
body.sunclax-page .sx-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 40px; }
body.sunclax-page .sx-pair--three { grid-template-columns: repeat(3, 1fr); gap: 32px; }
/* Inside — Max's pills on the theme's own throwable scene, once there are any. */
/* Inside, built like the home page's skills block: a coloured section, a big
   heading, and the throwable pills in an absolute layer at the section's
   own foot — no padding under them, so no empty band before the next block. */
body.sunclax-page .sx-inside { position: relative; min-height: 78vh; padding: 120px 0 0; background: var(--sx-clay); color: #FFF7EF; overflow: hidden; }
body.sunclax-page .sx-inside .container { position: relative; z-index: 1; padding-bottom: 260px; pointer-events: none; }
body.sunclax-page .sx-inside__title { font-family: var(--sx-font); font-weight: 800; letter-spacing: -.03em; font-size: clamp(44px, 6.2vw, 80px); line-height: .98; color: #FFF7EF; margin: 0 0 26px; }
body.sunclax-page .sx-inside__scene { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
body.sunclax-page .sx-inside__scene .lqd-throwable-scene { height: 78vh; }
@media (max-width: 767px) {
    body.sunclax-page .sx-inside { min-height: 92vh; padding-top: 80px; }
    body.sunclax-page .sx-inside .container { padding-bottom: 320px; }
    body.sunclax-page .sx-inside__scene .lqd-throwable-scene { height: 92vh; }
}
body.sunclax-page .sx-inside__pill span {
    padding: .3em 1.1em; border-radius: 100px; font-size: 17px; line-height: 1.6em;
    color: #1E1A17; /* fixed ink: pale pills in both schemes */ background: var(--sx-sand);
    box-shadow: 0 6px 18px rgba(30, 26, 23, .10);
}
body.sunclax-page .sx-inside__pill:nth-child(6n+1) span { background: #F6E3C4; }
body.sunclax-page .sx-inside__pill:nth-child(6n+2) span { background: #EAE6DE; }
body.sunclax-page .sx-inside__pill:nth-child(6n+3) span { background: #F3E7DA; }
body.sunclax-page .sx-inside__pill:nth-child(6n+4) span { background: #E4E4E4; }
body.sunclax-page .sx-inside__pill:nth-child(6n+5) span { background: #F1E9DA; }
body.sunclax-page .sx-inside__pill:nth-child(6n) span   { background: #E9DFD2; }
@media (max-width: 767px) {
    body.sunclax-page .sx-inside__pill span { font-size: 14px; }
}
/* Official store badge on a light plate so it reads on dark and light sections. */
body.sunclax-page .sx-store-badges { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; margin: 4px 0 10px; padding: 12px 16px 14px; border-radius: 16px; background: #f2f2f2; width: fit-content; max-width: 100%; overflow: visible; }
body.sunclax-page .sx-store-badge { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; flex: 0 0 auto; height: auto; overflow: visible; line-height: normal; }
body.sunclax-page .sx-store-badge img { height: 40px; width: auto; max-width: none; display: block; position: static; }
body.sunclax-page .sx-store-badge__soon { display: block; position: static; font-size: 12px; line-height: 1.2; letter-spacing: .04em; color: #3f3f46; font-weight: 600; text-align: center; }
/* plans: the one card */
body.sunclax-page .sx-plans { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 760px; margin: 44px auto 0; }
body.sunclax-page .sx-plan { position: relative; background: var(--sx-cream); border-radius: 14px; padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 4px; }
body.sunclax-page .sx-plan--hi { background: var(--sx-ink); color: #FBF6EE; transform: translateY(-10px); box-shadow: 0 24px 60px rgba(0,0,0,.25); }
body.sunclax-page .sx-plan--hi .sx-btn { background: var(--sx-amber-bright); color: var(--sx-ink) !important; }
body.sunclax-page .sx-plan--hi .sx-btn:hover { background: #FFB84D; }
body.sunclax-page .sx-plan__price { font-family: var(--sx-font); font-size: 44px; font-weight: 800; line-height: 1; margin: 6px 0 0; letter-spacing: -.02em; }
body.sunclax-page .sx-plan__was { font-size: 18px; font-weight: 600; color: var(--sx-text-soft); text-decoration: line-through; margin-left: 10px; letter-spacing: 0; }
body.sunclax-page .sx-plan--hi .sx-plan__was { color: rgba(251,246,238,.6); }
body.sunclax-page .sx-plan__period { font-size: 14px; color: var(--sx-text-soft); margin: 0 0 10px; }
body.sunclax-page .sx-plan--hi .sx-plan__period { color: rgba(251,246,238,.7); }
body.sunclax-page .sx-plan__note { font-size: 15px; line-height: 1.5; color: var(--sx-text-soft); margin: 0 0 22px; flex: 1 1 auto; }
body.sunclax-page .sx-plan--hi .sx-plan__note { color: rgba(251,246,238,.8); }
body.sunclax-page .sx-plan .sx-btn { justify-content: center; }
body.sunclax-page .sx-plan--one { display: grid; grid-template-columns: 1fr 220px; column-gap: 32px; align-items: center; }
body.sunclax-page .sx-plan--one .sx-plan__price { font-size: 34px; margin: 0; }
body.sunclax-page .sx-plan--one .sx-plan__period { margin: 8px 0 0; }
body.sunclax-page .sx-plan--one .sx-plan__note { margin: 12px 0 0; }
body.sunclax-page .sx-plans__foot { margin-top: 28px; }
/* the refund box under the price — the Triada page's guarantee, in this palette */
body.sunclax-page .sx-guarantee { display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 22px auto 0; padding: 14px 20px; border: 1px solid var(--sx-amber); border-radius: 12px; background: color-mix(in srgb, var(--sx-amber) 8%, transparent); }
body.sunclax-page .sx-guarantee__icon { flex: 0 0 auto; width: 32px; height: 32px; color: var(--sx-amber); }
body.sunclax-page .sx-guarantee__copy { font-size: 15px; line-height: 1.45; color: var(--sx-text-soft); }
body.sunclax-page .sx-guarantee__copy strong { color: var(--sx-amber); font-weight: 800; margin-right: 4px; }
body.sunclax-page .sx-plans__foot { max-width: 760px; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) {
    body.sunclax-page .sx-guarantee { padding: 12px 16px; gap: 10px; }
    body.sunclax-page .sx-guarantee__icon { width: 26px; height: 26px; }
    body.sunclax-page .sx-guarantee__copy { font-size: 14px; }
}
@media (max-width: 991px) {
    body.sunclax-page .sx-steps, body.sunclax-page .sx-plans, body.sunclax-page .sx-pair { grid-template-columns: 1fr; }
    body.sunclax-page .sx-plan--hi { transform: none; }
    body.sunclax-page .sx-plan--one { display: flex; }
    body.sunclax-page .sx-plan--one .sx-plan__note { margin-bottom: 18px; }
    body.sunclax-page .sx-figure--card { width: 80%; margin-top: -20px; }
}

/* Light and dark: one frame, the dark window clipped from the handle */
body.sunclax-page .sx-compare { --pos: 50%; position: relative; max-width: 880px; margin: 48px auto 0; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #F4EDE2; box-shadow: 0 30px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06); cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
body.sunclax-page .sx-compare__pane { position: absolute; inset: 0; }
body.sunclax-page .sx-compare__pane img, body.sunclax-page .sx-compare__blank { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; pointer-events: none; }
body.sunclax-page .sx-compare__pane--light .sx-compare__blank { background: linear-gradient(180deg, #FBF6EE 0 12%, #F4EDE2 12% 100%); }
body.sunclax-page .sx-compare__pane--dark { clip-path: inset(0 0 0 var(--pos)); }
body.sunclax-page .sx-compare__pane--dark .sx-compare__blank { background: linear-gradient(180deg, #221F1B 0 12%, #2A2622 12% 100%); }
body.sunclax-page .sx-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #FBF6EE; pointer-events: none; }
body.sunclax-page .sx-compare__handle > span { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; background: #FBF6EE; color: #1B1916; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; letter-spacing: 2px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
body.sunclax-page .sx-compare__label { position: absolute; bottom: 16px; padding: 7px 14px; border-radius: 999px; background: rgba(27,25,22,.72); color: #FBF6EE; font-size: 14px; font-weight: 700; line-height: 1; pointer-events: none; }
body.sunclax-page .sx-compare__label--light { left: 16px; }
body.sunclax-page .sx-compare__label--dark { right: 16px; }
body.sunclax-page .sx-compare__range { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; overflow: hidden; }
body.sunclax-page .sx-compare__range:focus-visible ~ .sx-compare__handle > span { outline: 3px solid var(--sx-amber); outline-offset: 3px; }
@media (max-width: 767px) {
    body.sunclax-page .sx-compare { margin-top: 32px; border-radius: 12px; }
    body.sunclax-page .sx-compare__handle > span { width: 38px; height: 38px; font-size: 15px; }
    body.sunclax-page .sx-compare__label { bottom: 10px; padding: 5px 10px; font-size: 12px; }
    body.sunclax-page .sx-compare__label--light { left: 10px; }
    body.sunclax-page .sx-compare__label--dark { right: 10px; }
}

/* /sunclax/activate with ?key=: the key, Copy, and one large Open in Sunclax */
body.sunclax-page .sx-activate { border: 1px solid var(--sx-line); border-radius: 16px; padding: 24px; margin: 0 0 40px; }
body.sunclax-page .sx-activate__label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin: 0 0 8px; }
body.sunclax-page .sx-activate__key { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 20px; }
body.sunclax-page .sx-activate__code { flex: 1 1 280px; font-size: 18px; line-height: 1.4; padding: 10px 14px; border-radius: 10px; background: rgba(0,0,0,.05); word-break: break-all; }
body.sunclax-page .sx-activate__open { display: block; text-align: center; font-size: 20px; padding: 18px 24px; }

/* The Apple mark on the requirement line; the download arrow on the Download buttons */
body.sunclax-page .sx-apple { display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; vertical-align: -0.12em; }
body.sunclax-page .sx-btn--mac { display: inline-flex; align-items: center; gap: 10px; }
body.sunclax-page .sx-dl { display: inline-block; flex: 0 0 auto; width: 1.2em; height: 1.2em; margin-top: -0.1em; }

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 991px) {
    body.sunclax-page .sx-section { padding: 80px 0; }
    body.sunclax-page .sx-hero { padding: 150px 0 80px; }
    body.sunclax-page .sx-shot { margin-top: 40px; }
    body.sunclax-page .sx-doc-head { padding-top: 140px; }
}

/* Dark mode follows the system for the light blocks; the ink blocks are
   already dark. */
@media (prefers-color-scheme: dark) {
    /* the dark price card on a dark page: give it an edge */
    body.sunclax-page .sx-plan--hi { box-shadow: 0 0 0 1px rgba(237,230,219,.18), 0 24px 60px rgba(0,0,0,.4); }
    body.sunclax-page {
        --sx-paper: #1A1614; --sx-cream: #201B18; --sx-sand: #28221D;
        --sx-text: #EDE6DB; --sx-text-soft: #B3A99C; --sx-line: rgba(237, 230, 219, .14);
        --sx-amber: #E0913A;
    }
    body.sunclax-page .sx-shot { background: #3A342E; }
    body.sunclax-page .lqd-stickybar .text-black,
    body.sunclax-page .lqd-stickybar .lqd-scrl-indc,
    body.sunclax-page .lqd-stickybar a { color: #EDE6DB !important; }
    body.sunclax-page .lqd-stickybar .lqd-scrl-indc-el,
    body.sunclax-page .lqd-stickybar .lqd-scrl-indc-line { background-color: #EDE6DB; }
    body.sunclax-page .lqd-stickybar img[alt="Medium"] { filter: invert(1) brightness(1.4); }
}

/* ---- the drawn windows that stand in for screenshots (_mock.html) ------ */
body.sunclax-page .sx-shot--mock { background: transparent; aspect-ratio: auto; }
body.sunclax-page .sx-mock {
    --mk-bg: #FBF6EE; --mk-bar: #F1EADF; --mk-ink: #1E1A17; --mk-soft: #6B6259; --mk-line: rgba(30,26,23,.1); --mk-pane: #F4EDE2;
    --mk-amber: #B8641A; --mk-amber-soft: rgba(184,100,26,.28); --mk-amber-faint: rgba(184,100,26,.10);
    aspect-ratio: 16 / 10; width: 100%; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
    background: var(--mk-bg); color: var(--mk-ink); line-height: 1.45; text-align: left; font-family: var(--sx-font);
}
body.sunclax-page .sx-figure, body.sunclax-page .sx-compare__blank { container-type: inline-size; }
body.sunclax-page .sx-mock--dark { --mk-bg: #1E1B18; --mk-bar: #26221E; --mk-ink: #EDE6DB; --mk-soft: #A69C90; --mk-line: rgba(237,230,219,.12); --mk-pane: #2A2622; --mk-amber: #FFA928; --mk-amber-soft: rgba(255,169,40,.35); --mk-amber-faint: rgba(255,169,40,.12); }
body.sunclax-page .sx-mock { font-size: clamp(8px, 2.15cqw, 13px); }
@supports not (font-size: 1cqw) { body.sunclax-page .sx-mock { font-size: clamp(8px, 1.05vw, 12px); } }
body.sunclax-page .sx-mock__bar { flex: 0 0 auto; display: flex; align-items: center; gap: .55em; padding: 0 1.1em; height: 2.7em; background: var(--mk-bar); border-bottom: 1px solid var(--mk-line); }
body.sunclax-page .sx-mock__dot { width: .85em; height: .85em; border-radius: 50%; }
body.sunclax-page .sx-mock__dot--r { background: #FF5F57; } body.sunclax-page .sx-mock__dot--y { background: #FEBC2E; } body.sunclax-page .sx-mock__dot--g { background: #28C840; }
body.sunclax-page .sx-mock__title { margin-left: .7em; font-weight: 600; color: var(--mk-soft); font-size: .95em; }
body.sunclax-page .sx-mock__body { flex: 1 1 auto; min-height: 0; padding: 1.5em 2em; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .6em; }
body.sunclax-page .sx-mock p { margin: 0; }
body.sunclax-page .sx-mock__k { font-size: .78em; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--mk-amber); }
body.sunclax-page .sx-mock__line { font-size: .98em; color: var(--mk-ink); }
body.sunclax-page .sx-mock__accent { color: var(--mk-amber); font-weight: 700; font-size: 1.2em; }
body.sunclax-page .sx-mock__foot { font-size: .82em; color: var(--mk-soft); margin-top: auto !important; font-variant-numeric: tabular-nums; }
body.sunclax-page .sx-mock__cursor::after { content: ""; display: inline-block; width: 2px; height: 1.1em; background: var(--mk-amber); vertical-align: -0.2em; animation: sx-blink 1.1s steps(2) infinite; }
@keyframes sx-blink { to { opacity: 0; } }
/* the panel: tabs, the two numbers, the highlights, the hours */
body.sunclax-page .sx-mock__tabs { display: flex; gap: .4em; }
body.sunclax-page .sx-mock__tabs span { padding: .25em .8em; border-radius: 999px; border: 1px solid var(--mk-line); font-size: .85em; color: var(--mk-soft); }
body.sunclax-page .sx-mock__tabs span.is-on { background: var(--mk-amber); border-color: var(--mk-amber); color: #fff; font-weight: 600; }
body.sunclax-page .sx-mock__nums { display: flex; gap: 2.4em; }
body.sunclax-page .sx-mock__nums b { display: block; font-size: 2.6em; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
body.sunclax-page .sx-mock__nums small { display: block; font-size: .85em; color: var(--mk-soft); }
body.sunclax-page .sx-mock__hl { display: flex; flex-wrap: wrap; gap: .5em; }
body.sunclax-page .sx-mock__hl span { padding: .2em .7em; border-radius: .4em; background: var(--mk-amber-faint); color: var(--mk-amber); font-size: .82em; font-weight: 600; }
body.sunclax-page .sx-mock__hours { display: flex; align-items: flex-end; gap: .25em; height: 5.5em; flex: 1 1 auto; min-height: 3em; }
body.sunclax-page .sx-mock__hours i { flex: 1 1 0; border-radius: .2em .2em 0 0; background: var(--mk-amber-soft); }
body.sunclax-page .sx-mock__hours i:nth-child(n+9):nth-child(-n+13) { background: var(--mk-amber); }
body.sunclax-page .sx-mock__hours--tall { height: 9em; }
body.sunclax-page .sx-mock__hours--w { height: 3em; flex: 0 0 auto; }
body.sunclax-page .sx-mock__hours i.is-today { background: var(--mk-amber); }
/* the dial: a ring of hours, noon on top */
body.sunclax-page .sx-mock__dialwrap { display: grid; grid-template-columns: auto 1fr; gap: 2em; align-items: center; height: 100%; }
body.sunclax-page .sx-mock__dial { width: 12em; height: 12em; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center;
    background: conic-gradient(from 180deg, var(--mk-amber-faint) 0 15%, var(--mk-amber-soft) 15% 30%, var(--mk-amber) 30% 48%, var(--mk-amber-soft) 48% 62%, var(--mk-amber) 62% 78%, var(--mk-amber-soft) 78% 90%, var(--mk-amber-faint) 90% 100%); }
body.sunclax-page .sx-mock__dial::before { content: ""; position: absolute; inset: 1.6em; border-radius: 50%; background: var(--mk-bg); }
body.sunclax-page .sx-mock__dial::after { content: ""; position: absolute; inset: .8em; border-radius: 50%; border: 1px dashed var(--mk-line); }
body.sunclax-page .sx-mock__dial-core { position: relative; text-align: center; }
body.sunclax-page .sx-mock__dial-core b { display: block; font-size: 1.7em; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.sunclax-page .sx-mock__dial-core small { font-size: .8em; color: var(--mk-soft); }
/* the chart: bars and the usual day over them */
body.sunclax-page .sx-mock__chart { position: relative; flex: 1 1 auto; display: flex; }
body.sunclax-page .sx-mock__avg { position: absolute; left: 0; right: 0; top: 38%; border-top: 2px dashed var(--mk-ink); opacity: .45; }
body.sunclax-page .sx-mock__axis { display: flex; justify-content: space-between; font-size: .75em; color: var(--mk-soft); }
/* the hands: two groups of five rays */
body.sunclax-page .sx-mock__handswrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; flex: 1 1 auto; }
body.sunclax-page .sx-mock__hand { display: flex; flex-direction: column; gap: .4em; }
body.sunclax-page .sx-mock__handname { font-size: .85em; color: var(--mk-soft); }
body.sunclax-page .sx-mock__fingers { display: flex; align-items: flex-end; gap: .5em; flex: 1 1 auto; min-height: 5em; }
body.sunclax-page .sx-mock__fingers i { flex: 1 1 0; border-radius: .4em .4em 0 0; background: var(--mk-amber-soft); }
body.sunclax-page .sx-mock__fingers i.is-top { background: var(--mk-amber); }
/* the board: keycaps in one amber */
body.sunclax-page .sx-mock__board { display: flex; flex-direction: column; gap: .35em; align-items: center; flex: 1 1 auto; justify-content: center; }
body.sunclax-page .sx-mock__row { display: flex; gap: .35em; }
body.sunclax-page .sx-mock__row span { width: 2em; height: 2em; border-radius: .35em; display: flex; align-items: center; justify-content: center; font-size: .9em; font-weight: 600; background: var(--mk-pane); border: 1px solid var(--mk-line); color: var(--mk-ink); }
body.sunclax-page .sx-mock__row span.is-h0 { color: var(--mk-soft); }
body.sunclax-page .sx-mock__row span.is-h1 { background: var(--mk-amber-faint); }
body.sunclax-page .sx-mock__row span.is-h2 { background: var(--mk-amber-soft); }
body.sunclax-page .sx-mock__row span.is-h3 { background: var(--mk-amber); color: #fff; border-color: var(--mk-amber); }
body.sunclax-page .sx-mock__gap { width: 1.4em !important; background: transparent !important; border: none !important; }
body.sunclax-page .sx-mock__row--thumbs { margin-top: .4em; }
body.sunclax-page .sx-mock__row--mini span { width: 1.5em; height: 1.5em; font-size: .75em; }
body.sunclax-page .sx-mock__row--zones span { border-bottom-width: .25em; }
body.sunclax-page .sx-mock__row--zones .z1, body.sunclax-page .sx-mock__row--zones .z8 { border-bottom-color: #C97B84; }
body.sunclax-page .sx-mock__row--zones .z2, body.sunclax-page .sx-mock__row--zones .z7 { border-bottom-color: #B8A15A; }
body.sunclax-page .sx-mock__row--zones .z3, body.sunclax-page .sx-mock__row--zones .z6 { border-bottom-color: #6FA07A; }
body.sunclax-page .sx-mock__row--zones .z4, body.sunclax-page .sx-mock__row--zones .z5 { border-bottom-color: #6C8FB8; }
body.sunclax-page .sx-mock__row span.is-next { background: var(--mk-amber); color: #fff; animation: sx-breathe 1.6s ease-in-out infinite; }
@keyframes sx-breathe { 50% { transform: scale(1.12); box-shadow: 0 0 0 .4em var(--mk-amber-faint); } }
/* shortcuts: tiles coloured by use */
body.sunclax-page .sx-mock__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em; flex: 1 1 auto; align-content: center; }
body.sunclax-page .sx-mock__tiles span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em; padding: .8em .4em; border-radius: .6em; background: var(--mk-pane); border: 1px solid var(--mk-line); font-size: .85em; font-variant-numeric: tabular-nums; color: var(--mk-soft); }
body.sunclax-page .sx-mock__tiles b { font-size: 1.3em; color: var(--mk-ink); }
body.sunclax-page .sx-mock__tiles span.is-h1 { background: var(--mk-amber-faint); }
body.sunclax-page .sx-mock__tiles span.is-h2 { background: var(--mk-amber-soft); }
body.sunclax-page .sx-mock__tiles span.is-h3 { background: var(--mk-amber); color: rgba(255,255,255,.8); border-color: var(--mk-amber); }
body.sunclax-page .sx-mock__tiles span.is-h3 b { color: #fff; }
/* practice: the words, the next key breathing */
body.sunclax-page .sx-mock--practice .sx-mock__body { align-items: center; justify-content: center; text-align: center; }
body.sunclax-page .sx-mock__words { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.5em; letter-spacing: .04em; margin: .6em 0 !important; }
body.sunclax-page .sx-mock__words .is-done { color: var(--mk-soft); }
body.sunclax-page .sx-mock__words .is-now { background: var(--mk-amber); color: #fff; border-radius: .2em; padding: 0 .1em; }
body.sunclax-page .sx-mock__words .is-dim { color: var(--mk-soft); opacity: .5; }
/* Ask AI: the question, the answer, the files it opened */
body.sunclax-page .sx-mock__chat { display: flex; flex-direction: column; gap: .5em; height: 100%; }
body.sunclax-page .sx-mock__ask { align-self: flex-end; max-width: 80%; padding: .5em .9em; border-radius: .8em .8em .2em .8em; background: var(--mk-amber); color: #fff; font-size: .95em; font-weight: 600; }
body.sunclax-page .sx-mock__answer { max-width: 90%; padding: .6em .9em; border-radius: .8em .8em .8em .2em; background: var(--mk-pane); font-size: .95em; }
body.sunclax-page .sx-mock__read { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; font-size: .8em; color: var(--mk-soft); }
body.sunclax-page .sx-mock__read span { padding: .15em .55em; border-radius: .4em; border: 1px solid var(--mk-line); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
body.sunclax-page .sx-mock__askline { margin-top: auto !important; padding: .5em .9em; border-radius: .6em; border: 1px solid var(--mk-line); color: var(--mk-soft); font-size: .95em; }
/* files: the tree and a day file */
body.sunclax-page .sx-mock__cols { display: grid; grid-template-columns: 9em 1fr; gap: 0; margin: -1.5em -2em; height: calc(100% + 3em); }
body.sunclax-page .sx-mock__tree { list-style: none; margin: 0; padding: 1.1em 0; background: var(--mk-pane); border-right: 1px solid var(--mk-line); font-size: .92em; }
body.sunclax-page .sx-mock__tree li { padding: .28em 1.1em; color: var(--mk-soft); white-space: nowrap; }
body.sunclax-page .sx-mock__tree li.is-dir { color: var(--mk-ink); font-weight: 600; margin-top: .3em; }
body.sunclax-page .sx-mock__tree li.is-dir::before { content: "▾ "; color: var(--mk-soft); }
body.sunclax-page .sx-mock__tree li.is-file { padding-left: 2.2em; }
body.sunclax-page .sx-mock__tree li.is-open { background: var(--mk-amber); color: #fff; }
body.sunclax-page .sx-mock__md { margin: 0; padding: 1.1em 1.4em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; line-height: 1.5; color: var(--mk-ink); white-space: pre; overflow: hidden; background: var(--mk-bg); }
/* the desktop: the widgets on the wallpaper */
body.sunclax-page .sx-mock--widgets .sx-mock__body { background:
    radial-gradient(circle at 20% 15%, var(--mk-amber-faint), transparent 55%),
    linear-gradient(160deg, var(--mk-pane), var(--mk-bg)); }
body.sunclax-page .sx-mock__desk { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8em; height: 100%; align-content: center; }
body.sunclax-page .sx-mock__widget { background: var(--mk-bg); border: 1px solid var(--mk-line); border-radius: .9em; padding: .7em .8em; box-shadow: 0 .4em 1.2em rgba(0,0,0,.10); display: flex; flex-direction: column; gap: .3em; }
body.sunclax-page .sx-mock__wk { font-size: .78em; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--mk-amber); }
body.sunclax-page .sx-mock__wt { font-size: 1.9em; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.sunclax-page .sx-mock__wsub { font-size: .85em; color: var(--mk-soft); }
/* the split frame: a drawn dial in each half until the theme shots exist */
body.sunclax-page .sx-compare__blank .sx-mock { border-radius: 0; aspect-ratio: auto; height: 100%; }
body.sunclax-page .sx-compare__blank { pointer-events: none; }
/* in a dark section the frame sits on the graphite: a lighter halo */
body.sunclax-page .sx-hero .sx-shot--mock { box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); border-radius: 12px; }
@media (max-width: 767px) {
    body.sunclax-page .sx-mock__cols { grid-template-columns: 1fr; }
    body.sunclax-page .sx-mock__cols .sx-mock__tree { display: none; }
    body.sunclax-page .sx-mock__dialwrap { grid-template-columns: 1fr; }
    body.sunclax-page .sx-mock__tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ======================================================================
   Liquid Glass (Max, 2026-10-02): the page in the same material as the
   Tempo page and the Mac apps — translucent panels with a light edge and soft depth,
   capsule controls, a lit ground for the glass to sit on. One layer over
   everything above it: tokens first, then the ground, then each surface.
   Dark mode swaps the tokens for smoked glass. Browsers without
   backdrop-filter get the same panels, just without the blur.
   ====================================================================== */
body.sunclax-page {
    --sx-glass: rgba(255, 255, 255, .58);
    --sx-glass-strong: rgba(255, 255, 255, .74);
    --sx-glass-edge: rgba(255, 255, 255, .78);
    --sx-glass-line: rgba(27, 23, 19, .07);
    --sx-glass-blur: blur(26px) saturate(180%);
    --sx-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 0 0 1px var(--sx-glass-line), 0 18px 48px rgba(27, 23, 19, .10);
    --sx-glass-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .85), 0 0 0 1px var(--sx-glass-line), 0 6px 18px rgba(27, 23, 19, .08);
    --sx-radius-lg: 28px;
    --sx-radius: 20px;
}
@media (prefers-color-scheme: dark) {
    body.sunclax-page {
        --sx-glass: rgba(44, 38, 34, .55);
        --sx-glass-strong: rgba(52, 45, 40, .72);
        --sx-glass-edge: rgba(255, 255, 255, .14);
        --sx-glass-line: rgba(255, 255, 255, .08);
        --sx-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 0 1px var(--sx-glass-line), 0 18px 48px rgba(0, 0, 0, .45);
        --sx-glass-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 0 1px var(--sx-glass-line), 0 6px 18px rgba(0, 0, 0, .35);
    }
}

/* the ground: one lit surface under the light sections, so the glass has
   something to show through it; still opaque, the sticky footer stays hidden */
body.sunclax-page #lqd-site-content {
    background:
        radial-gradient(60vw 40vw at 85% 8%, rgba(184, 100, 26, .13), transparent 60%),
        radial-gradient(50vw 36vw at 8% 42%, rgba(231, 206, 170, .45), transparent 65%),
        radial-gradient(55vw 40vw at 92% 78%, rgba(168, 84, 47, .10), transparent 60%),
        var(--sx-paper);
    background-attachment: fixed;
}
body.sunclax-page .sx-section, body.sunclax-page .sx-doc-body,
body.sunclax-page .sx-bg-cream, body.sunclax-page .sx-bg-sand { background: transparent; }
@media (prefers-color-scheme: dark) {
    body.sunclax-page #lqd-site-content {
        background:
            radial-gradient(60vw 40vw at 85% 8%, rgba(184, 100, 26, .16), transparent 60%),
            radial-gradient(55vw 40vw at 10% 70%, rgba(168, 84, 47, .10), transparent 60%),
            var(--sx-paper);
        background-attachment: fixed;
    }
}

/* the header: a floating glass bar */
body.sunclax-page #site-header, body.sunclax-page #site-header.is-stuck {
    background: var(--sx-glass) !important;
    backdrop-filter: var(--sx-glass-blur); -webkit-backdrop-filter: var(--sx-glass-blur);
    border-bottom: 1px solid var(--sx-glass-line);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5);
}

/* buttons: capsules; the filled one carries a sheen, the ghost one is glass */
body.sunclax-page .sx-btn {
    border-radius: 999px; padding: 14px 28px;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 22px rgba(138, 74, 18, .28);
}
body.sunclax-page .sx-btn--ghost {
    background: var(--sx-glass); background-image: none;
    backdrop-filter: var(--sx-glass-blur); -webkit-backdrop-filter: var(--sx-glass-blur);
    box-shadow: var(--sx-glass-shadow-sm), inset 0 0 0 1.5px var(--sx-amber);
}
body.sunclax-page .sx-btn--ghost-light {
    background: rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1.5px rgba(251, 246, 238, .45);
}
body.sunclax-page .sx-eyebrow { border-radius: 999px; padding: 7px 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }

/* the price card and the refund box */
body.sunclax-page .sx-plan {
    border-radius: var(--sx-radius-lg); background: var(--sx-glass-strong);
    backdrop-filter: var(--sx-glass-blur); -webkit-backdrop-filter: var(--sx-glass-blur);
    box-shadow: var(--sx-glass-shadow);
}
body.sunclax-page .sx-plan--hi {
    background: rgba(21, 18, 16, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(255, 255, 255, .06), 0 26px 64px rgba(0, 0, 0, .28);
}
body.sunclax-page .sx-guarantee {
    border-radius: var(--sx-radius); border-color: color-mix(in srgb, var(--sx-amber) 45%, transparent);
    background: var(--sx-glass); backdrop-filter: var(--sx-glass-blur); -webkit-backdrop-filter: var(--sx-glass-blur);
    box-shadow: var(--sx-glass-shadow-sm);
}

/* the three steps sit on glass cards */
body.sunclax-page .sx-steps .sx-step {
    padding: 22px 22px 18px; border-radius: var(--sx-radius-lg); background: var(--sx-glass);
    backdrop-filter: var(--sx-glass-blur); -webkit-backdrop-filter: var(--sx-glass-blur);
    box-shadow: var(--sx-glass-shadow-sm);
}
body.sunclax-page .sx-steps .sx-step .sx-figure { margin: -6px -6px 0; }

/* the drawn windows: rounder, with the app's glass title bar */
body.sunclax-page .sx-mock { border-radius: 18px; }
body.sunclax-page .sx-mock__bar {
    background: color-mix(in srgb, var(--mk-bar) 70%, transparent);
    backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
}
body.sunclax-page .sx-shot, body.sunclax-page .sx-shot--real, body.sunclax-page .sx-shot--mock { border-radius: 18px; }
body.sunclax-page .sx-shot--mock { box-shadow: 0 0 0 1px var(--sx-glass-line), 0 24px 60px rgba(27, 23, 19, .16); }
body.sunclax-page .sx-compare { border-radius: var(--sx-radius-lg); box-shadow: var(--sx-glass-shadow); }
body.sunclax-page .sx-compare__label { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.sunclax-page .sx-compare__handle > span { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 20px rgba(0, 0, 0, .22); }

/* documents: the page pills are glass capsules, the prose sits on a glass sheet */
body.sunclax-page .sx-doc-nav a {
    background: var(--sx-glass); backdrop-filter: var(--sx-glass-blur); -webkit-backdrop-filter: var(--sx-glass-blur);
    border-color: transparent; box-shadow: var(--sx-glass-shadow-sm);
}
body.sunclax-page .sx-doc-nav a.is-current { background: var(--sx-amber); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 16px rgba(138, 74, 18, .25); }
body.sunclax-page .sx-doc-body .sx-prose {
    padding: 44px 48px; border-radius: var(--sx-radius-lg); background: var(--sx-glass);
    backdrop-filter: var(--sx-glass-blur); -webkit-backdrop-filter: var(--sx-glass-blur);
    box-shadow: var(--sx-glass-shadow);
}
body.sunclax-page .sx-activate {
    border: 0; border-radius: var(--sx-radius); background: var(--sx-glass-strong);
    box-shadow: var(--sx-glass-shadow-sm);
}
body.sunclax-page .sx-activate__code { border-radius: 14px; }
body.sunclax-page .sx-faq__item {
    border: 0; margin: 0 0 12px; padding: 18px 22px; border-radius: var(--sx-radius);
    background: var(--sx-glass); backdrop-filter: var(--sx-glass-blur); -webkit-backdrop-filter: var(--sx-glass-blur);
    box-shadow: var(--sx-glass-shadow-sm);
}
body.sunclax-page .sx-faq__item:last-child { border: 0; }

/* the release-notes form on the clay: inputs and button as soft capsules */
body.sunclax-page .sx-sub-form input[type="email"],
body.sunclax-page .sx-sub-form input[type="text"] {
    border-radius: 16px; background: rgba(255, 255, 255, .88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 14px rgba(0, 0, 0, .10);
}
body.sunclax-page .sx-sub-form button { border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 16px rgba(0, 0, 0, .15); }

/* the pills in Inside: a glass sheen on each */
body.sunclax-page .sx-inside__pill span {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 22px rgba(27, 23, 19, .16);
}

@media (max-width: 767px) {
    body.sunclax-page .sx-doc-body .sx-prose { padding: 26px 20px; border-radius: var(--sx-radius); }
    body.sunclax-page .sx-steps .sx-step { padding: 16px 16px 12px; }
}

/* the dark grounds keep their colour under the glass layer */
body.sunclax-page .sx-section.sx-bg-clay { background: var(--sx-clay); }
body.sunclax-page .sx-section.sx-bg-ink { background: var(--sx-ink); }

/* the heads-up line under the hero, as on the Triada page (Max, 2026-10-02) */
body.sunclax-page .sx-hero__news { margin: 1.4em 0 0; font-size: 14px; color: rgba(251, 246, 238, .8); }
body.sunclax-page .sx-hero__news a { color: #FFD96B; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
body.sunclax-page .sx-hero__news-soft { opacity: .7; }

/* the offer's code as a chip that copies on a tap (Max, 2026-10-02) */
body.sunclax-page .sx-plan__offer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.sunclax-page .sx-code {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 999px; cursor: pointer;
    border: 1.5px dashed #F5B26B; background: rgba(245, 178, 107, .12); color: #FFD9A8;
    font: 700 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em;
}
body.sunclax-page .sx-code:hover { background: rgba(245, 178, 107, .22); }
body.sunclax-page .sx-code__pct { padding: 4px 8px; border-radius: 999px; background: #F5B26B; color: #2B211A; letter-spacing: 0; }
body.sunclax-page .sx-code.is-copied { border-style: solid; }
body.sunclax-page .sx-plan:not(.sx-plan--hi) .sx-code { color: #B4520C; background: rgba(180, 82, 12, .06); border-color: #B4520C; }

/* the card (Max, 2026-10-02): the name on the left; the price, "once" and Buy
   together on the right — no sentence; the agree line centred under it */
body.sunclax-page .sx-plan--one { grid-template-columns: 1fr 260px; align-items: end; }
body.sunclax-page .sx-plan__name { font-family: var(--sx-font); font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; margin: 0; }
body.sunclax-page .sx-plan__side { display: flex; flex-direction: column; align-items: stretch; text-align: right; }
body.sunclax-page .sx-plan__amount { margin: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; }
body.sunclax-page .sx-plan__now { font-family: var(--sx-font); font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
body.sunclax-page .sx-plan__side .sx-plan__was { margin-left: 0; }
body.sunclax-page .sx-plan__once { margin: 4px 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sx-text-soft); }
body.sunclax-page .sx-plan--hi .sx-plan__once { color: rgba(251, 246, 238, .6); }
body.sunclax-page .sx-plans__foot { text-align: center; }
@media (max-width: 767px) {
    body.sunclax-page .sx-plan__side { text-align: left; margin-top: 18px; }
    body.sunclax-page .sx-plan__amount { justify-content: flex-start; }
}

/* compact (Max, 2026-10-02): the price under the name, never off to the side;
   less air between sections; the screens no bigger than they need to be */
body.sunclax-page .sx-section { padding: 76px 0; }
body.sunclax-page .sx-plans { margin-top: 18px; }
body.sunclax-page .sx-plan--one { grid-template-columns: 1fr 200px; align-items: center; padding: 26px 28px; }
body.sunclax-page .sx-plan__amount { justify-content: flex-start; margin: 8px 0 0; flex-wrap: wrap; }
body.sunclax-page .sx-plan__now { font-size: 36px; }
body.sunclax-page .sx-plan__once { margin: 0; font-size: 12px; align-self: center; }
body.sunclax-page .sx-plan__side { text-align: center; }
body.sunclax-page .sx-plan--one .sx-plan__note { margin-top: 10px; }
@media (max-width: 991px) {
    body.sunclax-page .sx-section { padding: 56px 0; }
    body.sunclax-page .sx-plan--one { display: flex; flex-direction: column; align-items: stretch; }
    body.sunclax-page .sx-plan__side { margin-top: 18px; }
}

/* the requirement line beside the buttons, one row (Max, 2026-10-02) */
body.sunclax-page .sx-hero .sx-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
body.sunclax-page .sx-hero .sx-actions .sx-hero__promise { margin: 0; }

/* the requirement as a small second line inside Download (Max, 2026-10-02) */
body.sunclax-page .sx-btn--with-sub { padding-top: 12px; padding-bottom: 12px; }
body.sunclax-page .sx-dl-stack { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
body.sunclax-page .sx-btn--with-sub .sx-hero__promise { display: inline-flex; align-items: center; gap: 5px; margin: 3px 0 0; font-size: 12px; font-weight: 500; letter-spacing: 0; opacity: .82; color: inherit; }
body.sunclax-page .sx-btn--with-sub .sx-hero__promise svg { width: 11px; height: 11px; }

/* real screenshots (Max, 2026-10-02): each at its own shape, whole — the
   panel is tall, the shortcuts wide — never cropped into a 16:10 box */
body.sunclax-page .sx-shot--real {
    aspect-ratio: auto; width: auto; max-width: 100%; height: auto; max-height: 620px;
    object-fit: contain; margin-left: auto; margin-right: auto; background: transparent;
}
body.sunclax-page .sx-shot--real.sx-shot--sm { max-height: 460px; }
body.sunclax-page .sx-figure:has(.sx-shot--real) { text-align: center; }

/* the pack of screens in the hero (Max, 2026-10-02): white cards fanned
   behind each other, the front one whole; a tap sends it to the back */
body.sunclax-page .sx-stack { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin: 0 auto; cursor: pointer; }
body.sunclax-page .sx-stack__card {
    position: absolute; inset: 6% 6% 10%; margin: 0; padding: 14px; border-radius: 20px;
    background: #FBF8F3; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 24px 60px rgba(0, 0, 0, .35);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .45s ease;
    opacity: 0; transform: translateY(18px) scale(.9); z-index: 0;
}
body.sunclax-page .sx-stack__card img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; display: block; }
body.sunclax-page .sx-stack__card[data-pos="0"] { opacity: 1; transform: none; z-index: 4; }
body.sunclax-page .sx-stack__card[data-pos="1"] { opacity: 1; transform: translate(5%, -3%) rotate(4deg) scale(.96); z-index: 3; }
body.sunclax-page .sx-stack__card[data-pos="2"] { opacity: 1; transform: translate(-5%, -5%) rotate(-5deg) scale(.92); z-index: 2; }
body.sunclax-page .sx-stack__card:not([data-pos]) { opacity: 1; }
body.sunclax-page .sx-stack__next {
    position: absolute; right: 2%; bottom: 3%; z-index: 5; width: 44px; height: 44px; border-radius: 999px; border: 0;
    background: rgba(251, 248, 243, .92); color: #1B1713; font-size: 24px; line-height: 1; cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
@media (max-width: 991px) { body.sunclax-page .sx-stack { margin-top: 36px; max-width: 460px; } }

/* every board, one line under Download (Max, 2026-10-02) */
body.sunclax-page .sx-hero__boards { margin: 14px 0 0; font-size: 15px; color: rgba(251, 246, 238, .72); max-width: 34em; }

/* the pack turns by itself; with reduced motion the cards swap without sliding */
/* the pack moves even under "reduce motion": the motion is the point (Max, 2026-10-03) */

/* pricing reads from one left edge, as the heading above it (Max, 2026-10-02) */
body.sunclax-page .sx-plans, body.sunclax-page .sx-guarantee, body.sunclax-page .sx-plans__foot { margin-left: 0; margin-right: auto; }
body.sunclax-page .sx-plans__foot { text-align: left; }

/* the boards line as two short lines (Max, 2026-10-02) */
body.sunclax-page .sx-hero__boards { line-height: 1.45; }
body.sunclax-page .sx-hero__boards span { display: block; }

/* pricing, all centred (Max, 2026-10-02): the heading, the card, the guarantee, the line under it */
body.sunclax-page #sunclax-pricing .row { justify-content: center; }
body.sunclax-page .sx-center { text-align: center; }
body.sunclax-page .sx-center .sx-lead { margin-left: auto; margin-right: auto; }
body.sunclax-page .sx-plans, body.sunclax-page .sx-guarantee, body.sunclax-page .sx-plans__foot { margin-left: auto; margin-right: auto; }
body.sunclax-page .sx-plans__foot { text-align: center; }

/* the hero: the sun picked out; the price one tap away; two short lines each */
body.sunclax-page .sx-hero__sun { font-style: normal; color: #FFD27A; text-shadow: 0 0 28px rgba(255, 196, 92, .45); }
body.sunclax-page .sx-hero__files span { display: block; }
body.sunclax-page .sx-hero__price { margin: 14px 0 0; font-size: 15px; }
body.sunclax-page .sx-hero__price a { color: #FFD96B; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* the news card beside "How it works" (Max, 2026-10-02): the clay of the old
   section in a compact card, the fields one under another */
body.sunclax-page .sx-news-card { background: var(--sx-clay); color: #FBF6EE; border-radius: 22px; padding: 26px 26px 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); }
body.sunclax-page .sx-news-card .sx-eyebrow { margin-bottom: 10px; }
body.sunclax-page .sx-news-card .sx-h3 { color: #FBF6EE; margin: 6px 0 6px; }
body.sunclax-page .sx-news-card .sx-copy { color: rgba(251, 246, 238, .82); font-size: 15px; margin: 0 0 14px; }
body.sunclax-page .sx-news-card .sx-sub-form__row { flex-direction: column; align-items: stretch; gap: 10px; }
body.sunclax-page .sx-news-card .sx-sub-form__row input { width: 100%; max-width: none; flex: none; }
body.sunclax-page .sx-news-card .sx-sub-form__lang { font-size: 13px; color: rgba(251, 246, 238, .75); }
@media (max-width: 991px) { body.sunclax-page .sx-news-card { margin-top: 28px; } }
body.sunclax-page .sx-hero__price { display: flex; gap: 22px; flex-wrap: wrap; }

/* the pack's countdown (Max, 2026-10-02): a dot per screen, the current one a
   bar that fills until the next; paused while the pointer is on the pack */
body.sunclax-page .sx-stack__dots { display: flex; justify-content: center; gap: 8px; margin: 14px auto 0; max-width: 560px; }
body.sunclax-page .sx-stack__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(251, 246, 238, .28); cursor: pointer; overflow: hidden; transition: width .35s ease; }
body.sunclax-page .sx-stack__dot span { display: block; height: 100%; width: 0; background: #FFD27A; border-radius: inherit; }
body.sunclax-page .sx-stack__dot.is-on { width: 36px; }
body.sunclax-page .sx-stack__dot.is-on span { animation: sx-stack-fill var(--sx-step, 3500ms) linear forwards; }
body.sunclax-page .sx-stack__dots.is-paused .sx-stack__dot.is-on span { animation-play-state: paused; }
@keyframes sx-stack-fill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { body.sunclax-page .sx-stack__dot.is-on span { animation: none; width: 100%; } }

/* "How it works" in one row: the steps stacked under the lead on the left,
   the news card on the right, compact (Max, 2026-10-02) */
body.sunclax-page .sx-steps--stacked { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
body.sunclax-page .sx-steps--stacked .sx-step { padding: 16px 20px 14px; }
body.sunclax-page .sx-steps--stacked .sx-step__n { margin: 0; }
body.sunclax-page .sx-steps--stacked .sx-h3 { margin: 4px 0 4px; font-size: 19px; }
body.sunclax-page .sx-steps--stacked .sx-copy { margin: 0; font-size: 15px; }
body.sunclax-page .sx-news-card { padding: 22px 22px 16px; }
body.sunclax-page .sx-news-card .sx-eyebrow { margin-bottom: 6px; }
body.sunclax-page .sx-news-card .sx-h3 { font-size: 21px; }
body.sunclax-page .sx-news-card .sx-copy { font-size: 14px; margin-bottom: 12px; }
body.sunclax-page .sx-news-card .sx-sub-form__row { gap: 8px; }
body.sunclax-page .sx-news-card .sx-sub-form__row input,
body.sunclax-page .sx-news-card .sx-sub-form__row button { height: 46px; min-height: 0; padding-top: 0; padding-bottom: 0; font-size: 15px; }
body.sunclax-page .sx-news-card .sx-sub-form__lang { font-size: 12px; margin-top: 8px; }

/* The news card centred against the text and steps beside it (Max, 2026-10-03). */
@media (min-width: 992px) { body.sunclax-page .sx-how__row { align-items: center; } }

/* The captcha centred in the news card, as on Triada (Max, 2026-10-03). */
body.sunclax-page .sx-news-card .sx-sub-form__captcha { justify-content: center; }

/* The right bar (scroll, version, Blog) reads light while it sits over the
   dark hero; the light page under it takes the theme's dark ink again
   (Max, 2026-10-03). The class comes from the script in _header.html. */
body.sunclax-page .lqd-stickybar-right.sx-bar-on-dark .text-black,
body.sunclax-page .lqd-stickybar-right.sx-bar-on-dark .lqd-scrl-indc,
body.sunclax-page .lqd-stickybar-right.sx-bar-on-dark a { color: #EDE6DB !important; }
body.sunclax-page .lqd-stickybar-right.sx-bar-on-dark .lqd-scrl-indc-el,
body.sunclax-page .lqd-stickybar-right.sx-bar-on-dark .lqd-scrl-indc-line { background-color: #EDE6DB; }
body.sunclax-page .lqd-stickybar-right.sx-bar-on-dark img[alt="Medium"] { filter: invert(1) brightness(1.4); }

/* The layouts by name under the boards line (Max, 2026-10-03). */
body.sunclax-page .sx-hero__layouts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-width: 34em; }
body.sunclax-page .sx-hero__layouts li { font-size: 13px; line-height: 1; padding: 6px 10px; border-radius: 999px;
    border: 1px solid rgba(251, 246, 238, .22); color: rgba(251, 246, 238, .85); letter-spacing: .02em; }
body.sunclax-page .sx-hero__layouts .sx-hero__layouts-own { border-style: dashed; color: rgba(251, 246, 238, .65); }

/* The money-back line, icon and words, centred in its box; the language
   note centred under the news form (Max, 2026-10-03). */
body.sunclax-page .sx-guarantee { justify-content: center; text-align: center; }
body.sunclax-page .sx-news-card .sx-sub-form__lang { text-align: center; }

/* Homebrew under Download, quiet (Max, 2026-10-03): a small label over a
   small command that copies — two short lines, not one long one. */
body.sunclax-page .sx-brew { margin: 12px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
body.sunclax-page .sx-brew__or { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(251, 246, 238, .55); }
body.sunclax-page .sx-brew__cmd { -webkit-appearance: none; appearance: none; font: inherit; display: inline-flex; align-items: center; gap: 8px;
    margin: 0; padding: 5px 9px; border-radius: 7px; cursor: pointer; line-height: 1.2; box-shadow: none;
    background: rgba(251, 246, 238, .07) !important; border: 1px solid rgba(251, 246, 238, .16); color: rgba(251, 246, 238, .88) !important;
    transition: border-color .15s ease, color .15s ease; }
body.sunclax-page .sx-brew__cmd code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: none; color: inherit; padding: 0; white-space: nowrap; }
body.sunclax-page .sx-brew__icon { opacity: .7; flex: 0 0 auto; }
body.sunclax-page .sx-brew__cmd:hover, body.sunclax-page .sx-brew__cmd.is-copied { border-color: rgba(240, 163, 90, .7); color: #F0A35A !important; }
@media (max-width: 400px) { body.sunclax-page .sx-brew__cmd code { font-size: 11px; } }

/* The price card, clear (Max, 2026-10-03): name and note on the left; on the
   right the old price over the new, Buy under it, the code under Buy. */
body.sunclax-page .sx-plan--clear { display: grid; grid-template-columns: 1fr 280px; column-gap: 40px; align-items: center; padding: 32px 36px; }
body.sunclax-page .sx-plan--clear .sx-plan__text { align-self: center; }
body.sunclax-page .sx-plan--clear .sx-plan__note { margin: 10px 0 0; }
body.sunclax-page .sx-plan--clear .sx-plan__side { display: flex; flex-direction: column; align-items: stretch; text-align: center; gap: 0; }
body.sunclax-page .sx-plan--clear .sx-plan__amount { display: grid; grid-template-columns: 1fr; justify-items: center; margin: 0 0 14px; gap: 2px; }
body.sunclax-page .sx-plan--clear .sx-plan__was { margin: 0; font-size: 17px; }
body.sunclax-page .sx-plan--clear .sx-plan__now { font-size: 48px; }
body.sunclax-page .sx-plan--clear .sx-plan__once { margin: 4px 0 0; }
body.sunclax-page .sx-plan--clear .sx-plan__period { margin: 0 0 12px; }
body.sunclax-page .sx-plan--clear .sx-btn { width: 100%; }
body.sunclax-page .sx-plan--clear .sx-plan__offer { justify-content: center; margin: 12px 0 0; }
@media (max-width: 767px) {
    body.sunclax-page .sx-plan--clear { display: flex; flex-direction: column; padding: 26px 22px; gap: 20px; }
    body.sunclax-page .sx-plan--clear .sx-plan__text { text-align: center; }
}

/* A card dealt off the pack (Max, 2026-10-03): out to the side over the
   others, then down behind them; the next card rises meanwhile. */
body.sunclax-page .sx-stack__card.is-leaving { z-index: 6 !important; animation: sx-card-out .7s cubic-bezier(.45, 0, .25, 1) forwards; }
@keyframes sx-card-out {
    0%   { transform: none; opacity: 1; }
    45%  { transform: translate(55%, 4%) rotate(12deg) scale(.96); opacity: 1; }
    100% { transform: translate(5%, 2%) rotate(6deg) scale(.86); opacity: 0; }
}
body.sunclax-page #sunclax-hero { overflow-x: clip; }

/* The card, compact (Max, 2026-10-03): the price on one line — the old one
   struck, the new one, "once" beside it; the name and note at the top. */
body.sunclax-page .sx-plans .sx-plan--clear { align-items: start; padding: 28px 32px; }
body.sunclax-page .sx-plans .sx-plan--clear .sx-plan__text { align-self: start; }
body.sunclax-page .sx-plans .sx-plan--clear .sx-plan__amount { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: center; gap: 8px; margin: 0 0 12px; }
body.sunclax-page .sx-plans .sx-plan--clear .sx-plan__was { font-size: 16px; margin: 0; }
body.sunclax-page .sx-plans .sx-plan--clear .sx-plan__now { font-size: 40px; }
body.sunclax-page .sx-plans .sx-plan--clear .sx-plan__once { margin: 0; font-size: 11px; letter-spacing: .12em; }
body.sunclax-page .sx-plans .sx-plan--clear .sx-plan__offer { margin: 10px 0 0; }
body.sunclax-page .sx-plans .sx-plan--clear .sx-code { font-size: 12px; padding: 4px 6px 4px 10px; }
@media (max-width: 767px) {
    body.sunclax-page .sx-plans .sx-plan--clear .sx-plan__text { text-align: left; }
}

/* Terms and privacy: the intro close to the first card (Max, 2026-10-03). */
body.sunclax-page .sx-doc-head { padding-bottom: 8px; }
body.sunclax-page .sx-doc-head .sx-lead { margin-bottom: 0; }
body.sunclax-page .sx-doc-body { padding-top: 20px; }