/*
 * stonedesk.eu – the StoneDesk product page, styled 1:1 like https://stonestudio.io/sk/stonedesk/
 * (the stonestudio.io CSS files: tokens, base, layout, header, footer, sections, hero, page-nav, pricing, faq,
 * product cards and pages/stonedesk; fonts self-hosted). StoneDesk's own additions are in site-extra.css.
 * Fluid: html font-size grows over 1920 px, sizes use clamp() with --ss-fluid-vw – the same as stonestudio.io.
 */

/* ==== tokens.css ==== */
/* Values measured on the legacy staging; no WordPress/Avada runtime is required. */
:root {
    /* Public WEB only. At the default 16px root: 100% through 1920 CSS px,
       then linear growth to 160% at 3840px. Browser font preferences and zoom
       remain effective. Layout/media use rem; em follows its own typography.
       The design viewport also stops growing, so existing clamps stay in sync. */
    --ss-fluid-root-growth: clamp(0px, calc(.5vw - 9.6px), 9.6px);
    --ss-fluid-vw: min(1vw, 1.2rem);
    --ss-fluid-media-limit: 3840px;
    --ss-white: #fff;
    --ss-silver: #c4c4c4;
    --ss-surface: #f5f5f5;
    --ss-surface-tinted: #f0eef5;
    --ss-border-tinted: #d8d4e3;
    --ss-purple: #7826e7;
    --ss-purple-dark: #481196;
    --ss-black: #000;
    --ss-text: #333;
    --ss-gray: #707070;
    --ss-error: #96332c;
    --ss-worktop: #d97f34;
    --ss-qr-brand: #7560a3;
    --ss-portal-brand: #4524a7;
    --ss-price-saving: #07883f;
    /* Public StoneDesk identity from Ivan's export; never shared with Portal tokens. */
    --ss-stonedesk: #3d7cf2;
    --ss-stonedesk-dark: #2f6fe0;
    --ss-stonedesk-sky: #7ba8fb;
    --ss-stonedesk-soft: #eceef6;
    --ss-stonedesk-navy: #2a2646;
    --ss-stonedesk-ink: #1c1b2e;
    --ss-stonedesk-gradient-mid: #3d5aa8;
    --ss-stonedesk-muted: #d9d8ea;
    --ss-stonedesk-line: #e3e4ee;
    --ss-stonedesk-metal: #c9cbe0;
    --ss-header-background: var(--ss-black);
    --ss-footer-background: var(--ss-black);
    --ss-accent: var(--ss-purple);
    --ss-font: Montserrat, Arial, Helvetica, sans-serif;
    --ss-content-width: 81.25rem;
    --ss-row-width: 82.875rem;
    --ss-brand-logo-size: clamp(2.75rem, calc(2.375rem + var(--ss-fluid-vw)), 3.125rem);
    --ss-section-logo-size: clamp(2.875rem, calc(2.5rem + var(--ss-fluid-vw)), 3.25rem);
    --ss-page-gutter: 2%;
    --ss-button-gradient: linear-gradient(110deg, transparent, rgb(0 0 0 / 25%));
    --tr-dur1: .2s;
    --fnt-size1: 0.9375rem;
    --fnt-size1-fluid: clamp(0.875rem, calc(0.875rem + .1 * var(--ss-fluid-vw)), 0.9375rem);
    --fnt-size2: 1.0625rem;
    --fnt-size2-fluid: clamp(0.9375rem, calc(0.9375rem + .2 * var(--ss-fluid-vw)), 1.0625rem);
    --fnt-size3: 1.25rem;
    --fnt-size3-fluid: clamp(1.125rem, calc(1.125rem + .2 * var(--ss-fluid-vw)), 1.25rem);
    --fnt-size4: 1.5rem;
    --fnt-size4-fluid: clamp(1.25rem, calc(1.25rem + .4 * var(--ss-fluid-vw)), 1.5rem);
    --fnt-size5: 1.875rem;
    --fnt-size5-fluid: clamp(1.5rem, calc(1.5rem + .6 * var(--ss-fluid-vw)), 1.875rem);
    --fnt-size6: 2rem;
    --fnt-size6-fluid: clamp(1.625rem, calc(1.625rem + .6 * var(--ss-fluid-vw)), 2rem);
    --fnt-size7: 2.5rem;
    --fnt-size7-fluid: clamp(1.75rem, calc(1.75rem + 1.2 * var(--ss-fluid-vw)), 2.5rem);
}
body[data-page="worktop"] { --ss-accent: var(--ss-worktop); }

body[data-page="stonedesk"] {
    --ss-accent: var(--ss-stonedesk);
    --ss-header-background: var(--ss-stonedesk-ink);
    --ss-footer-background: var(--ss-stonedesk-navy);
}
body[data-page="qr-memorial"] { --ss-accent: var(--ss-qr-brand); }

/* ==== fonts.css ==== */
/* Montserrat as on stonestudio.io (self-hosted variable font, latin + latin-ext) */
@font-face { font-family: Montserrat; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/web/fonts/montserrat-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/web/fonts/montserrat-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==== base.css ==== */
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-size: calc(100% + var(--ss-fluid-root-growth));
}
*, *::before, *::after { box-sizing: inherit; }
body {
    margin: 0;
    min-width: 320px;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    color: var(--ss-text);
    background: var(--ss-white);
    font-family: var(--ss-font);
    font-size: var(--fnt-size1);
    font-weight: 400;
    line-height: 1.4;
}
button, input, select, textarea { font: inherit; }
img, svg { vertical-align: middle; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }
[hidden] { display: none !important; }
:focus-visible { outline: 0.125rem solid var(--ss-accent); outline-offset: 0.25rem; }
.ss-skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 10001;
    padding: 0.75rem 1rem;
    color: var(--ss-black);
    background: var(--ss-white);
    transform: translateY(-150%);
}
.ss-skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ==== layout.css ==== */
/* These wrappers replace the measured Avada container/column geometry. */
.ss-site-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
.ss-header-shell, .ss-header-placeholder, .ss-footer-shell { flex-shrink: 0; }
.ss-content-shell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 auto;
    min-width: 0;
}
.ss-content-shell > main { flex: none; }
.ss-header-shell {
    position: relative;
    z-index: 1000;
    display: flex;
    align-items: center;
    min-height: 5.25rem;
    padding: 0.125rem var(--ss-page-gutter) 0;
    border-bottom: 0.3125rem solid var(--ss-accent);
    background: var(--ss-header-background);
}
.ss-header-row {
    width: 100%;
    max-width: var(--ss-content-width);
    margin-inline: auto;
}
.ss-footer-shell {
    padding-inline: var(--ss-page-gutter);
    border-top: 0.3125rem solid var(--ss-accent);
    background: var(--ss-footer-background);
}
.ss-footer-row { width: 100%; margin-inline: auto; }
.ss-main { min-width: 0; }
/* Phase 1's neutral route marker remains until each page's implementation phase. */
.ss-foundation {
    max-width: var(--ss-content-width);
    min-height: 42vh;
    margin-inline: auto;
    padding: 3rem 2%;
}
.ss-foundation h1 {
    margin: 0;
    font-size: var(--fnt-size5-fluid);
    font-weight: 400;
    line-height: 1.3;
}

/* ==== components/header.css ==== */
/* StoneStudio navigation: preserved legacy component, with local tokens and shell wrappers. */
.ss-site-header {
    --ss-header-accent: var(--ss-accent);
    --ss-header-line: var(--ss-text);
    --ss-header-duration: var(--tr-dur1, .2s);
    --ss-header-parent-bg: var(--ss-header-background);
    --ss-header-sub-bg: color-mix(in srgb, var(--ss-header-background) 85%, #fff);
    position: relative;
    width: 100%;
    color: #fff;
    background: var(--ss-header-background);
    font-family: var(--ss-font, Montserrat, Arial, sans-serif);
    font-size: var(--fnt-size1, 0.9375rem);
    line-height: 1.4;
    text-align: left;
}
.ss-site-header, .ss-site-header * { box-sizing: border-box; }
.ss-site-header [hidden] { display: none !important; }
.ss-site-header button, .ss-site-header a {
    -webkit-tap-highlight-color: transparent;
    font: inherit;
    color: #fff !important;
    text-decoration: none !important;
}
.ss-site-header button { appearance: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.ss-site-header button:focus-visible, .ss-site-header a:focus-visible {
    outline: 0.125rem solid var(--ss-header-accent);
    outline-offset: -0.1875rem;
}
.ss-site-header ul { list-style: none; padding: 0; margin: 0; }
.ss-header__bar { display: flex; align-items: center; gap: 1.5rem; min-height: 4.375rem; padding: 0.625rem 1rem; }
.ss-site-header .ss-header-brand { display: flex; align-items: center; gap: 1.75rem; flex: 0 0 auto; }
.ss-site-header .ss-header-brand__home { display: block; line-height: 0; flex: 0 0 var(--ss-brand-logo-size); }
.ss-site-header .ss-header-brand__logo { display: block; width: var(--ss-brand-logo-size); max-width: var(--ss-brand-logo-size); height: auto; }
.ss-site-header .ss-header-brand__name { display: block; white-space: nowrap; font-size: 0.9375rem; font-weight: 400; }
.ss-site-header .ss-header-brand__name strong { font-weight: 700; }
.ss-site-header .ss-header-brand__name[aria-current="page"] { color: var(--ss-header-accent) !important; }
.ss-site-header .ss-header-brand__logo { color: var(--ss-header-accent); }
.ss-header__panel { flex: 1 1 auto; min-width: 0; }
.ss-header__list { display: flex; align-items: center; gap: clamp(.5rem, calc(5 * var(--ss-fluid-vw) - 3rem), 1.5rem); width: 100%; }
.ss-header__item { position: relative; margin: 0; }
.ss-header__item--services { margin-right: auto; }
.ss-header__item--login { display: flex; align-items: center; gap: 0.75rem; }
.ss-header__trigger, .ss-header__link, .ss-header__login {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; white-space: nowrap;
}
.ss-header__trigger, .ss-header__link { min-height: 2.5rem; padding: 0.375rem 0; background: transparent; }
.ss-header__trigger { cursor: default; }
.ss-header__trigger:disabled { color: #fff; opacity: 1; }
.ss-header__link, .ss-header__sub-link, .ss-header__login { cursor: pointer; }
.ss-header__icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
/* Final legacy ss_custom.css override for the two circular navigation icons. */
.ss-header__link[data-ss-route="contact"] .ss-header__icon,
.ss-header__login .ss-header__icon { width: 1.125rem; height: 1.125rem; flex: 0 0 1.125rem; }
.ss-header__login {
    padding: .6em 1.7em; border-radius: .5em; background-color: var(--ss-header-accent);
    background-image: var(--ss-button-gradient, linear-gradient(110deg, transparent, rgb(0 0 0 / 25%)));
    transition: background-color var(--ss-header-duration) ease;
}
.ss-header__login:hover { background-color: color-mix(in srgb, var(--ss-header-accent) 90%, #000); }
.ss-header__login--outline,
.ss-header__login--outline:hover {
    background-image: none;
    box-shadow: inset 0 0 0 0.0625rem currentColor;
}
.ss-header__login--outline { background-color: transparent; }
.ss-header__chevron { display: none; flex: 0 0 0.75rem; transition: transform var(--ss-header-duration) ease; }
.ss-header__language { gap: 0.4375rem; }
.ss-header__flag { display: block; flex: 0 0 1.3125rem; width: 1.3125rem; height: 0.875rem; box-shadow: 0 0 0 0.0625rem rgb(255 255 255 / 15%); }
.ss-header__submenu {
    display: grid; grid-template-rows: 1fr; position: absolute; top: 100%; left: 50%; min-width: max-content;
    z-index: 2; opacity: 0; visibility: hidden; transform: translate(-50%, -0.4375rem); pointer-events: none;
    transition: opacity var(--ss-header-duration) ease, transform var(--ss-header-duration) ease,
        visibility 0s linear var(--ss-header-duration);
}
/* The trigger's full height meets the submenu edge, so there is no hover gap. */
.ss-header__sub-list { min-height: 0; border: 0.0625rem solid var(--ss-header-line); background: var(--ss-header-background); }
.ss-header__sub-list > li + li { border-top: 0.0625rem solid var(--ss-header-line); }
.ss-header__sub-link { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.1875rem 0.75rem; font-size: 0.875rem !important; text-align: center; background: var(--ss-header-background); transition: background-color var(--ss-header-duration) ease; }
.ss-header__sub-link:hover { background: var(--ss-header-line); }
.ss-header__item.is-open > .ss-header__submenu,
.ss-site-header:not([data-ss-header-ready]) .ss-header__item--parent:hover > .ss-header__submenu,
.ss-site-header:not([data-ss-header-ready]) .ss-header__item--parent:focus-within > .ss-header__submenu {
    opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; transition-delay: 0s;
}
.ss-header__language-link { min-width: 4.625rem; padding: 0.375rem 0.75rem; }
.ss-header__toggle { display: none; }

/* Fixed positioning applies only after JS has inserted a measured placeholder. */
.ss-header-shell.ss-header-managed {
    position: fixed !important; top: var(--ss-admin-offset, 0px) !important; right: 0 !important; left: 0 !important;
    width: 100% !important; z-index: 10000 !important; overflow: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important; transition: transform .2s ease !important;
}
.ss-header-shell.ss-header-managed.ss-header-is-hidden { transform: translateY(calc(-100% - var(--ss-admin-offset, 0px))) !important; }
/* Keep the reading position accessible without leaving a focus box on the heading. */
[data-ss-anchor-focus]:focus { outline: none !important; box-shadow: none !important; }
.ss-header-placeholder { width: 100%; pointer-events: none; }
@media (max-width: 1200px) {
    .ss-header__bar {
        gap: 1rem; min-height: 4.875rem; padding: 0.875rem 0.75rem;
        /* Keep the brand's left inset, but always extend the row to the viewport's right edge. */
        width: calc(var(--ss-menu-width, 100%) + var(--ss-menu-left, 0px));
        max-width: none;
    }
    .ss-header__toggle {
        display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2.5rem;
        width: 2.5rem; height: 2.5rem; padding: 0.5rem; margin-left: auto !important; background: transparent; cursor: pointer;
    }
    .ss-header__hamburger { display: block; position: relative; width: 1.25rem; height: 1.125rem; }
    .ss-header__hamburger > span { position: absolute; display: block; height: 0.125rem; width: 1.25rem; left: 0; background: currentColor; border-radius: 0.0625rem; transition: transform var(--ss-header-duration) ease, opacity var(--ss-header-duration) ease; }
    .ss-header__hamburger > span:nth-child(1) { top: 0.0625rem; }
    .ss-header__hamburger > span:nth-child(2) { top: 0.5rem; }
    .ss-header__hamburger > span:nth-child(3) { top: 0.9375rem; }
    .ss-header__toggle[aria-expanded="true"] .ss-header__hamburger > span:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
    .ss-header__toggle[aria-expanded="true"] .ss-header__hamburger > span:nth-child(2) { opacity: 0; }
    .ss-header__toggle[aria-expanded="true"] .ss-header__hamburger > span:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }
    .ss-header__panel {
        /* JS measures the viewport and the outer Container, including its bottom border. */
        position: absolute; top: var(--ss-menu-top, calc(100% + 0.3125rem));
        left: var(--ss-menu-left, 0px); right: auto; margin: 0;
        width: var(--ss-menu-width, 100%); max-width: none;
        border: 0.0625rem solid var(--ss-header-line); background: var(--ss-header-background);
        max-height: calc(100vh - var(--ss-header-height, 4.875rem) - var(--ss-admin-offset, 0px));
        max-height: calc(100dvh - var(--ss-header-height, 4.875rem) - var(--ss-admin-offset, 0px));
        overflow-y: auto; overscroll-behavior: contain;
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity var(--ss-header-duration) ease,
            visibility 0s linear var(--ss-header-duration);
    }
    .ss-site-header.is-menu-open .ss-header__panel { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
    /* Slide inside the panel so the animation never covers the header's border. */
    .ss-header__list { display: block; transform: translateY(-0.4375rem); transition: transform var(--ss-header-duration) ease; }
    .ss-site-header.is-menu-open .ss-header__list { transform: translateY(0); }
    .ss-header__list > .ss-header__item + .ss-header__item { border-top: 0.0625rem solid var(--ss-header-line); }
    .ss-header__trigger, .ss-header__link { display: flex; width: 100%; min-height: 4.0625rem; padding: 1.125rem 2.75rem; text-align: center; background: var(--ss-header-background); transition: background-color var(--ss-header-duration) ease; }
    .ss-header__trigger { position: relative; background: var(--ss-header-parent-bg); cursor: pointer; }
    .ss-header__trigger:disabled { cursor: default; }
    .ss-header__trigger:hover { background: color-mix(in srgb, var(--ss-header-parent-bg) 94%, #fff); }
    .ss-header__trigger:disabled:hover { background: var(--ss-header-parent-bg); }
    .ss-header__link:hover { background: #101010; }
    .ss-header__chevron { display: block; position: absolute; right: 1.375rem; top: calc(50% - 0.25rem); }
    .ss-header__trigger:disabled .ss-header__chevron { display: none; }
    .ss-header__trigger[aria-expanded="true"] .ss-header__chevron { transform: rotate(180deg); }
    .ss-header__panel .ss-header__submenu {
        position: static; min-width: 0; grid-template-rows: 0fr; transform: translateY(-0.375rem);
        transition: grid-template-rows var(--ss-header-duration) ease, opacity var(--ss-header-duration) ease,
            transform var(--ss-header-duration) ease, visibility 0s linear var(--ss-header-duration);
    }
    .ss-header__panel .ss-header__sub-list { overflow: hidden; border: 0; background: var(--ss-header-sub-bg); }
    .ss-header__panel .ss-header__sub-list > li { border-top: 0.0625rem solid var(--ss-header-line); }
    .ss-header__panel .ss-header__sub-link { min-height: 4.0625rem; padding: 1.125rem 1.5rem; background: var(--ss-header-sub-bg); }
    .ss-header__panel .ss-header__sub-link:hover { background: color-mix(in srgb, var(--ss-header-sub-bg) 94%, #fff); }
    .ss-header__panel .ss-header__item.is-open > .ss-header__submenu { grid-template-rows: 1fr; transform: translateY(0); }
    .ss-header__item--login { flex-wrap: wrap; justify-content: center; padding: 0.8125rem 1.25rem; min-height: 4.0625rem; }
    .ss-header__login:hover { background-color: color-mix(in srgb, var(--ss-header-accent) 94%, #fff); }
}
/* Keep the homepage link centered within the dropdown trigger's hit area. */
.ss-site-header .ss-header-brand .ss-header__trigger {
    display: flex; gap: 0;
    min-height: 2.5rem; padding: 0.375rem 0; width: auto; background: transparent; cursor: pointer;
}
.ss-header__login--outline:hover { background-color: var(--ss-header-sub-bg); }
@media (max-width: 1200px) {
    .ss-header__item--services { margin-right: 0; }
    .ss-site-header .ss-header__item--product .ss-header-brand__name { display: flex; align-items: center; justify-content: center; min-height: 4.0625rem; padding: 1.125rem 1.5rem; }
}
@media (max-width: 640px) {
    .ss-site-header .ss-header-brand { gap: .875rem; }
    .ss-header__bar { gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ss-site-header *, .ss-header-shell.ss-header-managed { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* ==== components/footer.css ==== */
/* Footer geometry and styles from the original Avada Custom CSS, with local tokens. */
.ss-footer {
    /* Approved desktop gap: twice the previous .525rem. */
    --ss-footer-divider-gap: 1.05rem;
    width: 100%;
    max-width: var(--ss-content-width);
    margin-inline: auto;
    padding: 2rem 0 0.75rem;
    background: var(--ss-footer-background);
    font-family: var(--ss-font, Montserrat, Arial, sans-serif);
    font-size: var(--fnt-size1, 0.9375rem);
    line-height: 1.4;
    text-align: left;
}
.ss-footer, .ss-footer *, .ss-footer *::before, .ss-footer *::after {
    box-sizing: border-box;
}
.ss-footer,
.ss-footer *,
.ss-footer *::before,
.ss-footer *::after {
    color: var(--ss-white) !important;
}

.ss-footer__grid {
    display: grid;
    grid-template-columns:
        15rem
        minmax(2.5rem, 8.75rem)
        minmax(8.75rem, 1fr)
        2.5rem
        minmax(8.75rem, 1fr)
        2.5rem
        minmax(17.5rem, 1.4fr);
    grid-template-areas:
        "brand brand product . resources . legal"
        "brand brand . . . . social";
    column-gap: 0;
    row-gap: 1.25rem;
    align-items: start;
}

.ss-footer__brand {
    grid-area: brand;
}

.ss-footer__column--product {
    grid-area: product;
}

.ss-footer__column--resources {
    grid-area: resources;
}

.ss-footer__column--legal {
    grid-area: legal;
    min-width: 0;
}

.ss-footer__brand {
    width: 20.625rem;
    max-width: calc(100% - 2.5rem);
    display: flex;
    flex-direction: column;
    /* Transfer space from below the grid to above signup, keeping total height. */
    min-height: calc(15.3125rem + 1.25rem - var(--ss-footer-divider-gap));
}

/* Share the tall brand area on desktop, then occupy the bottom grid row. */
.ss-footer__grid > .ss-newsletter-signup--footer {
    grid-area: brand;
    align-self: end;
    max-width: calc(100% - 2.5rem);
    padding-top: 1.5rem;
}

.ss-footer__logo {
    display: block;
    width: 15rem;
    max-width: 100%;
}

.ss-footer__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.ss-footer__tagline {
    width: 100%;
    margin-top: 0.875rem;
    font-size: 0.70625rem;
    line-height: 1.3;
    white-space: nowrap;
}

.ss-footer__heading {
    margin: 0 0 1.25rem;
    font-size: var(--fnt-size3-fluid) !important;
    text-transform: uppercase;
    font-family: inherit;
    font-weight: 400;
    line-height: 1.4;
}

.ss-footer__nav {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ss-footer__nav a {
    display: block;
    text-decoration: none;
}

/* Reuse the Portal vector; em sizing follows the surrounding footer type. */
.ss-footer__nav .ss-footer__portal {
    display: flex;
    align-items: center;
    min-height: 1.4em;
}
.ss-footer__portal .portal-brand__logo {
    display: block;
    height: 1.1em;
    width: auto;
    max-width: 100%;
}
.ss-footer__portal .portal-brand__logo circle {
    fill: var(--ss-portal-brand);
}

.ss-footer__column--legal {
    min-width: 0;
}

.ss-footer__socials {
    grid-area: social;
    align-self: end;
    display: flex;
    justify-content: flex-end;
    gap: 1.25rem;
    margin-bottom: 0;
}

.ss-footer__social {
    cursor: default;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.ss-footer__social::before {
    font-family: 'icomoon';
    cursor: default;
    speak: never;
    font-size: 1.25rem;
    font-weight: normal;
    line-height: 1;
}

.ss-footer__social--facebook::before {
    content: "\e905";
}

.ss-footer__social--x::before {
    content: "\e906";
}

.ss-footer__social--instagram::before {
    content: "\e907";
}

@media (max-width: 1024px) {

    .ss-footer { --ss-footer-divider-gap: 1.25rem; }

    .ss-footer__grid {
        grid-template-columns:
            minmax(8.75rem, 1fr)
            minmax(8.75rem, 1fr)
            minmax(17.5rem, 1.4fr);
        grid-template-areas:
            "brand brand brand"
            "product resources legal"
            "signup signup social";
        column-gap: 2.5rem;
        row-gap: 3.125rem;
    }

    .ss-footer__brand { max-width: 100%; min-height: 0; }
    .ss-footer__grid > .ss-newsletter-signup--footer { grid-area: signup; max-width: 100%; padding-top: 0; }

}

@media (max-width: 800px) {

    .ss-footer__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "brand brand"
            "product resources"
            "legal legal"
            "signup social";
        column-gap: 2.5rem;
        row-gap: 3.125rem;
    }

}

@media (max-width: 640px) {

    .ss-footer__grid {
        position: relative;
        grid-template-columns: 1fr max-content 1fr;
        grid-template-areas:
            "brand brand brand"
            ". product ."
            ". resources ."
            ". legal ."
            "signup signup signup"
            "social social social";
        column-gap: 0;
        row-gap: 2.5rem;
    }

    .ss-footer__brand {
        justify-self: start;
    }

    /* Only the last mobile row gap: 2.5rem -> 1.5rem (40% less). */
    .ss-footer__socials { margin-top: -1rem; margin-bottom: 0; }

    .ss-footer__heading {
        margin-bottom: 0.875rem;
    }

    .ss-footer__nav {
        gap: 0.3125rem;
    }

}

/* Lower row and separator share exactly the same 1300px content width. */
.ss-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: var(--ss-footer-divider-gap);
    border-top: 0.125rem solid var(--ss-white);
    padding-top: 0.625rem;
}
.ss-footer__copyright {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem .3em;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}
.ss-footer__copyright strong { font-weight: 700; }
.ss-footer__mark {
    display: block;
    flex: 0 0 var(--ss-brand-logo-size);
    width: var(--ss-brand-logo-size);
    max-width: var(--ss-brand-logo-size);
    height: auto;
    cursor: default;
}
body[data-page="worktop"] .ss-footer__mark {
    filter: brightness(0) invert(45.418254%) sepia(100%) saturate(326.262857%) hue-rotate(-14.684448deg) !important;
}
.ss-footer__nav a:focus-visible {
    outline: 0.125rem solid currentColor;
    outline-offset: 0.25rem;
}
@media (max-width: 800px) {
    .ss-footer__bottom { align-items: flex-start; }
    .ss-footer__copyright { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .ss-footer__separator { display: none; }
}
@media (max-width: 640px) {
    .ss-footer__bottom { gap: 1rem; margin-top: 1.5rem; padding-top: 1rem; }
    .ss-footer__copyright { font-size: 0.8125rem; }
}

/* ==== components/brand.css ==== */
/* One indivisible, non-translated wordmark in public pages and the CMS. */
.ss-brand {
    display: inline-block;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    -webkit-hyphens: none;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400 !important;
}

.ss-brand > strong { font-weight: 700 !important; }

/* ==== components/sections.css ==== */
/* StoneStudio shared content components, extracted from the original custom CSS. */
/* Shared page layout — full-width sections with one content width. */
.ss-page {
    width: 100%;
}

/* Measured heading tracking formerly supplied by the theme typography. */
.ss-page :is(h1, h2, h3, h4) { letter-spacing: -.015em; }

.ss-page > section {
    box-sizing: border-box;
    width: 100%;
    padding-inline: max(
        2%,
        calc((100% - var(--ss-content-width)) / 2)
    );
}

/* Universal section heading */
.ss-section-intro,
.ss-modeling-intro { padding-top: clamp(3.75rem, calc(7 * var(--ss-fluid-vw)), 5.625rem); }

.ss-section-heading {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: var(--ss-font);
}

.ss-section-heading--center {
    align-items: center;
    text-align: center;
}

/* Shared section heading — left alignment. */
.ss-section-heading--left {
    align-items: flex-start;
    text-align: left;
}

.ss-section-heading--left .ss-section-heading__title {
    margin-inline: 0 !important;
}

/* Text follows the same alignment as its section heading. */
.ss-section-heading--left .ss-section-text {
    margin-inline: 0 !important;
    text-align: left;
}

/* Optional short line before the eyebrow text. */
.ss-section-heading__eyebrow--line {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, calc(1.5 * var(--ss-fluid-vw)), 1.125rem);
}

.ss-section-heading__eyebrow--line::before {
    content: "";
    flex: 0 0 clamp(2.5rem, calc(6 * var(--ss-fluid-vw)), 4.375rem);
    height: 0.125rem;
    background-color: currentColor;
}

/* Eyebrow + title spacing */
.ss-section-heading--eyebrow {
    gap: clamp(1.5rem, calc(3 * var(--ss-fluid-vw)), 2.625rem);
}

/* Title + description spacing */
.ss-section-heading--title-text {
    gap: clamp(1.75rem, calc(4 * var(--ss-fluid-vw)), 2.5rem);
}

/* Spacing after section heading */
.ss-section-heading--space-after {
    margin-bottom: clamp(3rem, calc(6 * var(--ss-fluid-vw)), 3.75rem);
}

/* Spacing between page sections */
.ss-section-block {
    margin-bottom: clamp(3.75rem, calc(7 * var(--ss-fluid-vw)), 5.625rem);
}

.ss-section-heading__eyebrow {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: auto;
    margin: 0 !important;
    color: var(--ss-purple) !important;
    font-family: var(--ss-font);
    font-size: var(--fnt-size4-fluid) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}

.ss-section-heading__title {
    max-width: min(50rem, 100%);
    overflow-wrap: anywhere;
    hyphens: auto;
    margin: 0 auto !important;
    color: var(--ss-black) !important;
    font-family: var(--ss-font);
    font-size: var(--fnt-size7-fluid) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}

/* Section heading medium weight */
.ss-section-heading--medium .ss-section-heading__title {
    font-weight: 500 !important;
}

.ss-section-heading--medium .ss-section-heading__title strong {
    font-weight: 700 !important;
}

/* Universal section text */
.ss-section-text {
    max-width: 50rem;
    margin: 0 auto !important;
    color: var(--ss-black);
    font-family: var(--ss-font);
    font-size: var(--fnt-size3-fluid) !important;
    line-height: 1.3;
    text-align: center;
}

/* Introductory text — set maximum width */
.ss-section-text--wide {
    width: 100%;
    max-width: 60rem;
}

/* Universal icon box */
.ss-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.125rem;
    height: 5.125rem;
    flex: 0 0 5.125rem;
    border-radius: 1.25rem;
    background-color: #f0f0fb;
}

.ss-icon-box__icon {
    display: block;
    width: 3.125rem;
    height: auto;
    object-fit: contain;
}

/* Universal lift-up effect */
/* Static cards keep the arrow over their text; links and controls retain their own cursors. */
.ss-page :where(.ss-lift-up, .ss-mobile-app-card, .ss-metric-card, .ss-pricing-card,
    .ss-cutout-card, .ss-slab-card, .ss-info-card):not(:where(a, button, [role="button"], [role="link"])) {
    cursor: default;
}

.ss-lift-up {
    transition:
        transform var(--tr-dur1) ease,
        box-shadow var(--tr-dur1) ease;
}

.ss-lift-up:hover {
    transform: translate(0.0875rem, -0.175rem);
    box-shadow: -0.3125rem 0.4375rem 1rem rgba(0, 0, 0, 0.15);
}


.ss-section-heading, .ss-section-heading__title { scroll-margin-top: 1.875rem; }

/* Static text and illustrated lists; preserve the original component cascade. */
.ss-text-title {
    margin: 0 !important;
    padding: 0;
    color: var(--ss-black) !important;
    font-family: var(--ss-font);
    font-size: var(--fnt-size3-fluid) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-align: left;
}

.ss-text-description {
    margin: clamp(0.4375rem, var(--ss-fluid-vw), 0.625rem) 0 0 !important;
    color: var(--ss-black);
    font-family: var(--ss-font);
    font-size: var(--fnt-size1-fluid) !important;
    line-height: 1.4;
    text-align: left;
}

.ss-section-heading__separator {
    display: block;
    width: var(--ss-section-logo-size);
    height: auto;
    margin: clamp(1.75rem, calc(4 * var(--ss-fluid-vw)), 2.5rem) auto 0;
}

.ss-section-image {
    display: block;
    width: 100%;
    max-width: 75rem;
    height: auto;
    margin-inline: auto;
}

.ss-text-list {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, calc(1.8 * var(--ss-fluid-vw)), 1.375rem);
    width: 100%;
    max-width: 50rem;
    margin-inline: auto;
    font-family: var(--ss-font);
    text-align: left;
}

.ss-text-list__item { min-width: 0; }

.ss-section-label {
    display: table;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 clamp(1.875rem, calc(4 * var(--ss-fluid-vw)), 3rem) !important;
    padding: 0.3em 1em;
    border-radius: 0.55em 0 0.55em 0;
    background-color: var(--ss-purple);
    color: var(--ss-white) !important;
    font-family: var(--ss-font);
    font-size: var(--fnt-size4-fluid) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: left;
    overflow-wrap: anywhere;
    scroll-margin-top: 1.875rem;
}

.ss-text-list--illustrated {
    max-width: none;
    gap: clamp(1.75rem, calc(3.8 * var(--ss-fluid-vw)), 3.25rem);
}

.ss-text-list--illustrated .ss-text-title {
    font-size: var(--fnt-size4-fluid) !important;
}

.ss-text-list--illustrated .ss-text-description {
    font-size: var(--fnt-size3-fluid) !important;
    overflow-wrap: break-word;
}

.ss-text-list--illustrated > .ss-text-list__item > .ss-section-image {
    max-width: 76.25rem;
    margin: clamp(1rem, calc(2 * var(--ss-fluid-vw)), 1.5rem) 0 0;
    /* The purple border is part of the original artwork. */
    border-radius: 2.4% / 19.3%;
    cursor: default;
}

/* Original heading scale. Benefits H3 keep the illustrated-list fluid size;
   only Benefits H1/H2 receive the extra theme scale measured on staging. */
@media (max-width: 1000px) {
    .ss-home.ss-responsive-headings :is(h1, h2, h3, h4),
    .ss-benefits.ss-responsive-headings :is(h1, h2),
    .ss-modeling-page.ss-responsive-headings :is(h1, h2, h3):not(.ss-section-copy h3),
    .ss-step-grid.ss-responsive-headings .ss-step-card__title,
    .ss-section-heading.ss-responsive-headings .ss-section-heading__title {
        font-size: calc(var(--ss-heading-base) * 1px - .58 * (var(--ss-heading-base) - 15) * (1000px - 100vw) / 640) !important;
    }
}
@media (max-width: 800px) {
    .ss-home.ss-responsive-headings :is(h1, h2, h3, h4),
    .ss-benefits.ss-responsive-headings :is(h1, h2),
    .ss-modeling-page.ss-responsive-headings :is(h1, h2, h3):not(.ss-section-copy h3),
    .ss-step-grid.ss-responsive-headings .ss-step-card__title,
    .ss-section-heading.ss-responsive-headings .ss-section-heading__title {
        font-size: calc(var(--ss-heading-base) * 1px - .58 * (var(--ss-heading-base) - 15) * (800px - 100vw) / 440) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ss-lift-up { transition: none; }
    .ss-lift-up:hover { transform: none; }
}

/* ==== components/hero.css ==== */
/* Shared hero — existing homepage selectors remain supported. */

/* Section shell: spacing and background previously supplied by Avada. */
.ss-hero-section {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 3.75rem;
    padding-block: 3.125rem;
    background: linear-gradient(
        154deg,
        var(--ss-silver) 19%,
        var(--ss-black) 78%
    );
}

.ss-hero,
.ss-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(2.5rem, calc(6 * var(--ss-fluid-vw)), 6.25rem);
    width: 100%;
    font-family: var(--ss-font);
}

.ss-hero__content,
.ss-home-hero__content {
    min-width: 0;
}

.ss-hero__title,
.ss-home-hero__title {
    margin: 0;
    color: var(--ss-hero-title-color, var(--ss-white)) !important;
    font-family: var(--ss-font);
    font-size: clamp(1.625rem, calc(2.2 * var(--ss-fluid-vw)), 2rem) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.ss-hero__title-accent,
.ss-home-hero__title-accent {
    color: var(--ss-hero-accent, var(--ss-purple));
}

.ss-hero__text,
.ss-home-hero__text {
    max-width: 42.5rem;
    margin: clamp(1.625rem, calc(3 * var(--ss-fluid-vw)), 2.625rem) 0 0 !important;
    color: var(--ss-white);
    font-family: var(--ss-font);
    font-size: clamp(1.125rem, calc(1.5 * var(--ss-fluid-vw)), 1.25rem);
    line-height: 1.45;
}

.ss-hero__actions,
.ss-home-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: clamp(2.125rem, calc(4 * var(--ss-fluid-vw)), 3.625rem);
}

.ss-hero__button,
.ss-hero__link,
.ss-home-hero__button,
.ss-home-hero__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 3.5rem;
    padding: 0.625rem 1.5rem;
    border-radius: 0.625rem;
    font-family: var(--ss-font);
    font-size: var(--fnt-size2);
    line-height: 1.2;
    transition: transform var(--tr-dur1) ease;
}

.ss-hero__button,
.ss-home-hero__button {
    background-color: var(--ss-hero-accent, var(--ss-purple));
    background-image: var(--ss-button-gradient);
    color: var(--ss-white);
    font-weight: 700;
    text-decoration: none;
}

.ss-hero__link,
.ss-home-hero__link {
    background-color: transparent;
    color: var(--ss-white);
    font-weight: 700 !important;
    text-decoration: underline;
    text-decoration-thickness: 0.0625rem;
    text-underline-offset: 0.3125rem;
}

.ss-hero__button:hover,
.ss-hero__link:not([aria-disabled="true"]):hover,
.ss-home-hero__button:hover,
.ss-home-hero__link:hover {
    transform: translateY(-0.125rem);
    color: var(--ss-white);
}

.ss-hero__link[aria-disabled="true"] {
    color: var(--ss-white);
    cursor: default;
}

.ss-hero__button:focus-visible {
    outline: 0.125rem solid currentColor;
    outline-offset: 0.25rem;
}

/* Shared secondary link: Home keeps its approved accent focus; Worktop uses orange. */
.ss-hero__link:focus-visible,
.ss-home-hero__link:focus-visible {
    outline: 0.125rem solid var(--ss-accent);
    outline-offset: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .ss-hero__link, .ss-home-hero__link { transition: none; }
    .ss-hero__link:hover, .ss-home-hero__link:hover { transform: none; }
}

/* Home currently has one static image. */
.ss-hero__media,
.ss-home-hero__media {
    display: grid;
    align-items: center;
    min-width: 0;
}

.ss-hero__slide,
.ss-home-hero__slide {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--tr-dur1) ease,
        visibility var(--tr-dur1) ease;
}

.ss-hero__slide.is-active,
.ss-home-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ss-hero__image,
.ss-home-hero__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Tablet and mobile. */
@media (max-width: 900px) {
    .ss-hero,
    .ss-home-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 3rem;
    }

    .ss-hero__content,
    .ss-home-hero__content {
        max-width: 45rem;
    }

    .ss-hero__media,
    .ss-home-hero__media {
        width: 100%;
        max-width: 47.5rem;
        margin-inline: auto;
    }
}

@media (max-width: 640px) {
    .ss-hero__text,
    .ss-home-hero__text {
        font-size: 1.125rem;
    }

    .ss-hero__actions,
    .ss-home-hero__actions {
        align-items: center;
        gap: 1.5rem;
    }

    .ss-hero__button,
    .ss-hero__link,
    .ss-home-hero__button,
    .ss-home-hero__link {
        min-height: 3.625rem;
        padding: 0.875rem 1.25rem;
    }
}


/* ==== components/page-nav.css ==== */
/* Shared page navigation — existing QR Memorial selectors remain supported. */
.ss-page-nav,
.ss-qr-nav {
    --ss-nav-gap-min: 1.125rem;
    --ss-nav-gap-max: 3.125rem;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    column-gap: clamp(
        var(--ss-nav-gap-min),
        calc((100% - var(--ss-nav-links-width, 0px)) / var(--ss-nav-gap-count, 1)),
        var(--ss-nav-gap-max)
    );
    row-gap: 1rem;
    width: 100%;
    margin-bottom: clamp(3.75rem, calc(7 * var(--ss-fluid-vw)), 5.625rem);
    font-family: var(--ss-font);
}

/* QR Memorial has three short labels, with more space between them. */
.ss-qr-nav {
    --ss-nav-gap-max: 6.25rem;
}

/* Keep each label at its natural width; an oversized label can wrap on its own. */
.ss-page-nav__link,
.ss-qr-nav__link {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    margin: 0;
    color: var(--ss-black) !important;
    font-family: var(--ss-font);
    font-size: var(--fnt-size2-fluid);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: right;
    cursor: pointer;
}

/* Intentionally no hover effect. */
.ss-page-nav__link:hover,
.ss-qr-nav__link:hover {
    color: var(--ss-black) !important;
    text-decoration: none;
}

.ss-page-nav__link[aria-disabled="true"],
.ss-qr-nav__link[aria-disabled="true"] {
    cursor: default;
}

.ss-page-nav__link:focus-visible,
.ss-qr-nav__link:focus-visible {
    outline: 0.125rem solid currentColor;
    outline-offset: 0.25rem;
}

/* Shared anchor spacing for individual headings, heading groups, and the Widget block. */
.ss-section-heading,
.ss-section-heading__title,
#qr-pricing,
#qr-materials,
#qr-faq {
    scroll-margin-top: 1.875rem;
}

/* Icon navigation band: shared by Home, Worktop, and QR Memorial. */
.ss-hero-section:has(+ .ss-page-nav-band) {
    margin-bottom: 0;
}

.ss-page-nav-band {
    --ss-nav-border: color-mix(in srgb, var(--ss-gray) 15%, var(--ss-surface));
    --ss-nav-icon-size: 1.875rem;
    --ss-nav-cell-gap: clamp(0.75rem, calc(1.2 * var(--ss-fluid-vw)), 1.125rem);
    --ss-nav-cell-padding: clamp(0.5625rem, var(--ss-fluid-vw), 0.875rem);
    --ss-nav-min-height: 10rem;
    display: flex;
    align-items: center;
    min-height: var(--ss-nav-min-height);
    padding-block: 1rem;
    border-bottom: 0.0625rem solid var(--ss-nav-border);
    background-color: var(--ss-nav-background, var(--ss-surface));
}

.ss-page-nav-band--tinted {
    --ss-nav-background: var(--ss-surface-tinted);
    --ss-nav-border: var(--ss-border-tinted);
}

.ss-page-nav--band {
    display: grid;
    grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    margin-bottom: 0;
    color: var(--ss-text);
}

.ss-page-nav__intro,
.ss-page-nav__content {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.ss-page-nav__intro {
    justify-content: center;
    padding-right: var(--ss-nav-cell-padding);
}

.ss-page-nav--band .ss-page-nav__link {
    display: grid;
    grid-template-columns: var(--ss-nav-icon-size) minmax(0, 1fr);
    align-content: start;
    column-gap: var(--ss-nav-cell-gap);
    row-gap: 0.625rem;
    width: auto;
    min-width: 0;
    padding: 0.5rem var(--ss-nav-cell-padding);
    border-left: 0.0625rem solid var(--ss-nav-border);
    text-align: left;
    color: var(--ss-text) !important;
}

.ss-page-nav--band .ss-page-nav__link:last-child {
    padding-right: 0;
}

.ss-page-nav__icon {
    width: var(--ss-nav-icon-size);
    height: var(--ss-nav-icon-size);
    color: currentColor;
}

.ss-page-nav__title {
    font-size: var(--fnt-size2-fluid);
    line-height: 1.3;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ss-page-nav__intro .ss-page-nav__title {
    font-size: var(--fnt-size3-fluid);
}

.ss-page-nav__description {
    color: var(--ss-gray);
    font-size: var(--fnt-size1-fluid);
    line-height: 1.35;
    font-weight: 400;
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .ss-page-nav--band {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: 1.25rem;
    }
    .ss-page-nav__intro { grid-column: 1 / -1; }
    .ss-page-nav--band .ss-page-nav__link:nth-child(2) { border-left: 0; padding-left: 0; }
}

@media (max-width: 760px) {
    .ss-page-nav--band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ss-page-nav--band .ss-page-nav__link:nth-child(4) { border-left: 0; padding-left: 0; }
    .ss-page-nav--band .ss-page-nav__link:nth-child(odd) { padding-right: 0; }
}

@media (max-width: 440px) {
    .ss-page-nav--band .ss-page-nav__link { grid-template-columns: minmax(0, 1fr); }
}


/* ==== components/pricing.css ==== */
/* Pricing billing toggle */
.ss-pricing-toggle {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    gap: 0;
    margin: 0 auto clamp(3rem, calc(6 * var(--ss-fluid-vw)), 3.75rem);
    padding: 0.25rem;
    border: 0.0625rem solid color-mix(in srgb, var(--ss-black) 18%, #fff);
    border-radius: 62.4375rem;
    background-color: #f6f5f8;
    font-family: var(--ss-font);
}

.ss-pricing-toggle__button {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.5rem 1.25rem;
    border: 0;
    border-radius: 62.4375rem;
    background-color: transparent;
    color: color-mix(in srgb, var(--ss-black) 55%, #fff);
    font-family: var(--ss-font);
    font-size: var(--fnt-size1) !important;
    line-height: 1.2;
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color var(--tr-dur1) ease,
        color var(--tr-dur1) ease,
        box-shadow var(--tr-dur1) ease;
}

.ss-pricing-toggle__button--active {
    background-color: var(--ss-pricing-toggle-active-background, #fff);
    color: var(--ss-pricing-toggle-active-text, var(--ss-purple));
    font-weight: 700;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
}

.ss-pricing-toggle__save {
    padding: 0;
    color: var(--ss-price-saving);
    font-size: var(--fnt-size1) !important;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
}

.ss-pricing-toggle--stonedesk {
    --ss-pricing-toggle-active-background: var(--ss-stonedesk-navy);
    --ss-pricing-toggle-active-text: var(--ss-white);
}

@media (prefers-reduced-motion: reduce) {
    .ss-pricing-toggle__button { transition: none; }
}

/* Shared Home / Worktop pricing card base; page grids remain page-specific. */
.ss-pricing-card {
    position: relative;
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    min-width: 0;
    min-height: 24.6875rem;
    padding: 1.25rem 0.875rem;
    border: 0.0625rem solid color-mix(in srgb, var(--ss-black) 40%, #fff);
    background-color: #fff;
}
.ss-pricing-card--featured {
    z-index: 1;
    border: 0.125rem solid var(--ss-purple);
    box-shadow: -0.375rem 0.375rem 0.875rem rgba(0, 0, 0, 0.2);
}
.ss-pricing-card__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.875rem;
    border-radius: 62.4375rem;
    background-color: var(--ss-purple);
    color: var(--ss-white);
    font-family: var(--ss-font);
    font-size: var(--fnt-size1) !important;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}
.ss-pricing-card__title {
    margin: 0.5rem 0 0 !important;
    color: var(--ss-black) !important;
    font-family: var(--ss-font);
    font-size: var(--fnt-size4-fluid) !important;
    font-weight: 700 !important;
    grid-row: 1;
}
.ss-pricing-card__description {
    margin: 1rem 0 0 !important;
    color: var(--ss-black);
    font-family: var(--ss-font);
    font-size: var(--fnt-size2) !important;
    line-height: 1.3;
    grid-row: 2;
}
.ss-pricing-card__price {
    margin-top: 0.875rem;
    grid-row: 3;
}
.ss-pricing-card__price-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.ss-pricing-card__price-value {
    color: var(--ss-black);
    font-family: var(--ss-font);
    font-size: var(--ss-price-font, var(--fnt-size4-fluid)) !important;
    font-weight: 700;
    white-space: nowrap;
}
.ss-pricing-card__price-period {
    color: var(--ss-black);
    font-size: var(--fnt-size2) !important;
}
.ss-pricing-card__billing-note {
    margin: 0.375rem 0 0 !important;
    color: color-mix(in srgb, var(--ss-black) 60%, #fff);
    font-family: var(--ss-font);
    font-size: var(--fnt-size1) !important;
    line-height: 1.3;
}
.ss-pricing-card__billing-note[hidden] {
    display: none !important;
}
.ss-pricing-card__features {
    margin-top: 1.25rem;
}
.ss-pricing-card__features-includes {
    margin-top: clamp(0.625rem, calc(1.2 * var(--ss-fluid-vw)), 0.875rem);
}
.ss-pricing-card__features-title {
    margin: 0 !important;
    color: var(--ss-black) !important;
    font-family: var(--ss-font);
    font-size: var(--fnt-size2) !important;
    font-weight: 500 !important;
    text-decoration: underline;
    text-underline-offset: 0.1875rem;
}
.ss-pricing-card__features-list {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    margin: 1.125rem 0 0 !important;
    padding: 0 !important;
    list-style: none;
    font-size: var(--fnt-size1) !important;
}
.ss-pricing-card__features-list li {
    position: relative;
    margin: 0 !important;
    padding-left: 1rem;
    color: var(--ss-black);
    line-height: 1.25;
}
.ss-pricing-card__features-list li::before {
    content: "\f00c";
    position: absolute;
    top: 0.125rem;
    left: 0;
    color: var(--ss-purple);
    font-family: "Font Awesome 5 Free";
    font-size: 0.8em;
    font-weight: 900;
    font-style: normal;
}
.ss-pricing-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    align-self: end;
    min-width: 6.25rem;
    margin-top: 1rem;
    padding: 0.5625rem 1.25rem;
    border-radius: 0.5rem 0 0.5rem 0;
    background-color: var(--ss-purple);
    color: var(--ss-white) !important;
    font-family: var(--ss-font);
    font-size: var(--fnt-size1) !important;
    font-weight: 700;
    line-height: 1.2;
    transition: transform var(--tr-dur1) ease;
    grid-row: 5;
}
.ss-pricing-card__cta:hover {
    color: var(--ss-white) !important;
    transform: translateY(-0.125rem);
}
.ss-pricing-notes {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.875rem;
    margin-top: 1rem;
    font-family: var(--ss-font);
}
.ss-pricing-notes__text {
    flex: 1 1 20rem;
    min-width: 0;
    margin: 0 !important;
    color: var(--ss-black);
    font-size: var(--fnt-size2) !important;
    line-height: 1.3;
}
.ss-pricing-notes__text--vat {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 810px) {
    .ss-pricing-notes { flex-direction: column; gap: 0.75rem; }
    .ss-pricing-notes__text { flex: none; }
    .ss-pricing-notes__text--vat { text-align: left; }
}

.ss-pricing-card__features { grid-row: 4; }
.ss-pricing-card__cta { background-image: var(--ss-button-gradient); }
.ss-pricing-card__features-title { line-height: 1.3; }

.ss-pricing-card__price-value[data-price-unavailable] { --ss-price-font: var(--fnt-size2-fluid); }

.ss-pricing-card__price-value[data-price-unavailable] { white-space: normal; overflow-wrap: anywhere; }

/* ==== components/faq.css ==== */
/* --- Shared FAQ: QR Memorial and Worktop --- */
/* Keep the existing class names so both pages use the same FAQ JavaScript. */

.ss-qr-faq {
    --ss-faq-accent: var(--ss-purple);
    --ss-faq-icon-size: clamp(1.0625rem, calc(1.36 * var(--ss-fluid-vw)), 1.16875rem);
    --ss-faq-icon-stroke: calc(var(--ss-faq-icon-size) * 3 / 11);

    width: 100%;
    padding-top: clamp(3.75rem, calc(7 * var(--ss-fluid-vw)), 5.625rem);
    font-family: var(--ss-font);
}



/* Logo separator */
.ss-qr-faq__separator {
    display: block;
    width: var(--ss-section-logo-size);
    height: auto;
    margin:
        clamp(1.75rem, calc(4 * var(--ss-fluid-vw)), 2.5rem)
        auto
        0;
}

/* Full-width FAQ content keeps the separator aligned with the page layout. */
.ss-qr-faq__content {
    width: 100%;
    margin-top: clamp(3.75rem, calc(7 * var(--ss-fluid-vw)), 5.625rem);
}

/* Center each question group within the full-width content. */
.ss-qr-faq__group {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, calc(1.8 * var(--ss-fluid-vw)), 1.375rem);
    width: 100%;
    max-width: 62.5rem;
    margin-inline: auto;
}

/* FAQ item */
.ss-qr-faq__item {
    width: 100%;
}

/* FAQ question — button layout and interaction */
.ss-qr-faq__question {
    position: relative;
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding-inline-end: calc(var(--ss-faq-icon-size) + clamp(0.75rem, calc(2 * var(--ss-fluid-vw)), 1.5rem));

    border: 0;
    background: transparent;
    cursor: pointer;
}

/* Segmented plus: three horizontal blocks and three vertical blocks. */
.ss-qr-faq__question::before,
.ss-qr-faq__question::after {
    content: "";
    position: absolute;
    inset-block-start: 0.65em;
    pointer-events: none;
    transform: translateY(-50%);
}

.ss-qr-faq__question::before {
    inset-inline-end: 0;
    width: var(--ss-faq-icon-size);
    height: var(--ss-faq-icon-stroke);
    background: repeating-linear-gradient(
        to right,
        var(--ss-faq-accent) 0 var(--ss-faq-icon-stroke),
        transparent var(--ss-faq-icon-stroke) calc(var(--ss-faq-icon-size) * 4 / 11)
    );
}

.ss-qr-faq__question::after {
    inset-inline-end: calc((var(--ss-faq-icon-size) - var(--ss-faq-icon-stroke)) / 2);
    width: var(--ss-faq-icon-stroke);
    height: var(--ss-faq-icon-size);
    background: repeating-linear-gradient(
        to bottom,
        var(--ss-faq-accent) 0 var(--ss-faq-icon-stroke),
        transparent var(--ss-faq-icon-stroke) calc(var(--ss-faq-icon-size) * 4 / 11)
    );
    transition: transform 0.3s ease, opacity var(--tr-dur1) ease;
}

/* Open state: hide the vertical blocks to leave a segmented minus. */
.ss-qr-faq__item.is-open .ss-qr-faq__question::after {
    opacity: 0;
    transform: translateY(-50%) scaleY(0);
}

/* Keyboard accessibility */
.ss-qr-faq__question:focus-visible {
    outline: 0.125rem solid var(--ss-faq-accent);
    outline-offset: 0.25rem;
}

/* Animated answer */
.ss-qr-faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;

    transition:
        grid-template-rows 0.3s ease,
        opacity var(--tr-dur1) ease,
        visibility 0s linear 0.3s;
}

/* Keep this inner wrapper: min-height and overflow allow the grid row to collapse. */
.ss-qr-faq__answer-inner {
    min-height: 0;
    overflow: hidden;
}

/* Open state */
.ss-qr-faq__item.is-open .ss-qr-faq__answer {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* Separator between QR Memorial and QR Plaque */
.ss-qr-faq__group-separator {
    width: 100%;
    height: 0.125rem;

    margin:
        clamp(2.125rem, calc(4 * var(--ss-fluid-vw)), 3rem)
        0;

    background-color: var(--ss-purple);
}

/* Mobile */
@media (max-width: 640px) {


    .ss-qr-faq__content {
        margin-top: clamp(3.25rem, calc(12 * var(--ss-fluid-vw)), 4.375rem);
    }

    .ss-qr-faq__group {
        gap: 1.25rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    .ss-qr-faq__answer,
    .ss-qr-faq__question::after {
        transition: none;
    }
}


/* ==== components/product-cards.css ==== */
/* Shared product steps and metrics; page styles own placement and color tokens. */
.ss-mobile-app-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 14.375rem;
    padding:
        clamp(1.5rem, calc(2 * var(--ss-fluid-vw)), 1.625rem) clamp(1.5rem, calc(2.2 * var(--ss-fluid-vw)), 1.75rem);
    border: 0.0625rem solid color-mix(in srgb,
            var(--ss-black) 40%,
            #fff);
    box-shadow: -0.375rem 0.375rem 0.875rem rgba(0, 0, 0, 0.2);
    border-radius: 1.5rem;
    background-color: #fff;
}
.ss-mobile-app-card__top {
    display: flex;
    align-items: center;
    gap: 1.375rem;
}
.ss-mobile-app-card__description {
    margin: 1.25rem 0 0 !important;
    color: var(--ss-gray) !important;
    font-family: var(--ss-font);
    font-size: var(--fnt-size2) !important;
    line-height: 1.3 !important;
}

@media (max-width: 640px) { .ss-mobile-app-card { min-height: 0; padding: 1.375rem; border-radius: 1.75rem; } .ss-mobile-app-card__top { gap: 1rem; } }
/* Shared three-step grid.
   Keep the preferred card width while gaps shrink from 40px to 5px.
   Once gaps reach 5px, allow the columns to shrink. */
.ss-step-grid {
    --ss-step-gap-min: 0.3125rem;
    --ss-step-gap-max: 2.5rem;
    --ss-step-card-max: calc(
        (var(--ss-content-width) - 2 * var(--ss-step-gap-max)) / 3
    );
    --ss-step-gap: clamp(
        var(--ss-step-gap-min),
        calc((100% - 3 * var(--ss-step-card-max)) / 2),
        var(--ss-step-gap-max)
    );

    display: grid;
    grid-template-columns: repeat(3, minmax(0, var(--ss-step-card-max)));
    justify-content: center;
    column-gap: var(--ss-step-gap);
    row-gap: clamp(1.25rem, calc(3 * var(--ss-fluid-vw)), 2.5rem);
    width: 100%;
    font-family: var(--ss-font);
}

/* Padding, radius and base shadow come from .ss-mobile-app-card.
   Motion and transition come from .ss-lift-up. */
.ss-mobile-app-card.ss-step-card {
    box-sizing: border-box;
    border: 0.1875rem solid var(--ss-product-card-accent, var(--ss-worktop));
    background-color: var(--ss-product-card-surface, var(--ss-surface-dark));
}

/* Keep the base shadow and add the lift-up shadow used by benefit cards. */
.ss-step-card.ss-lift-up:hover {
    box-shadow:
        -0.375rem 0.375rem 0.875rem rgba(0, 0, 0, 0.2),
        -0.3125rem 0.4375rem 1rem rgba(0, 0, 0, 0.15);
}

.ss-step-card__step {
    margin: 0 !important;
    color: var(--ss-product-card-accent, var(--ss-worktop));
    font-family: var(--ss-font);
    font-size: var(--fnt-size4-fluid) !important;
    line-height: 1.2;
    font-weight: 700;
}

.ss-step-card__title {
    margin: clamp(1.625rem, calc(3 * var(--ss-fluid-vw)), 2.25rem) 0 0 !important;
    color: var(--ss-product-card-text, var(--ss-text-on-dark)) !important;
    font-family: var(--ss-font);
    font-size: var(--fnt-size4-fluid) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

/* Description spacing and typography come from .ss-mobile-app-card__description. */
.ss-step-card .ss-step-card__description {
    color: var(--ss-product-card-muted, var(--ss-text-muted-on-dark)) !important;
}

@media (max-width: 1000px) {
    .ss-step-grid {
        --ss-step-gap: clamp(
            var(--ss-step-gap-min),
            calc(100% - 2 * var(--ss-step-card-max)),
            var(--ss-step-gap-max)
        );
        grid-template-columns: repeat(2, minmax(0, var(--ss-step-card-max)));
    }

    .ss-step-grid > .ss-step-card:last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - var(--ss-step-gap)) / 2);
    }
}

@media (max-width: 640px) {
    .ss-step-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ss-step-grid > .ss-step-card:last-child {
        grid-column: auto;
        justify-self: stretch;
        width: auto;
    }
}

/* Shared metric cards: change this one scale to resize all groups.
   At 0.8, each card starts at 153.6 px and its large value at 30.72 px.
   Gaps shrink from 38.4 px to 4 px before the cards start shrinking. */
.ss-metric-cards {
    --ss-metric-scale: 0.8;
    --ss-metric-count: 3;
    --ss-metric-card-width: calc(12rem * var(--ss-metric-scale));
    --ss-metric-gap-min: calc(0.3125rem * var(--ss-metric-scale));
    --ss-metric-gap-max: calc(3rem * var(--ss-metric-scale));

    box-sizing: border-box;
    container-type: inline-size;
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    row-gap: calc(1rem * var(--ss-metric-scale));
    column-gap: clamp(
        var(--ss-metric-gap-min),
        calc(
            (100% - var(--ss-metric-count) * var(--ss-metric-card-width))
            / (var(--ss-metric-count) - 1)
        ),
        var(--ss-metric-gap-max)
    );
    margin: clamp(2rem, calc(4.5 * var(--ss-fluid-vw)), 3.75rem) 0 0;
    padding: 0;
    font-family: var(--ss-font);
}

/* The card font controls its padding, minimum height, gap, and corner radius.
   Container units measure the group's content width, excluding its padding. */
.ss-metric-cards > .ss-metric-card {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 var(--ss-metric-card-width);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.175em;
    width: var(--ss-metric-item-width, var(--ss-metric-card-width));
    min-width: 0;
    max-width: 100%;
    min-height: 2.3em;
    padding: 0.25em 0.35em;
    border: 0.125rem solid var(--ss-product-card-accent, var(--ss-worktop));
    border-radius: 0.375em;
    background-color: var(--ss-product-card-surface, var(--ss-surface-dark));
    font-size: clamp(
        calc(1.5rem * var(--ss-metric-scale)),
        calc(
            (100cqw - (var(--ss-metric-count) - 1) * var(--ss-metric-gap-min))
            / (var(--ss-metric-count) * 5)
        ),
        calc(var(--ss-metric-card-width) / 5)
    );
    text-align: center;
}

.ss-metric-cards .ss-metric-card__value {
    order: -1;
    margin: 0;
    color: var(--ss-product-card-accent, var(--ss-worktop));
    font-family: inherit;
    font-size: 1em !important;
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    white-space: normal;
}

/* Equal card heights give every label the same remaining space. */
.ss-metric-cards .ss-metric-card__label {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    color: var(--ss-product-card-muted, var(--ss-text-muted-on-dark));
    font-family: inherit;
    font-size: calc(var(--fnt-size1-fluid) * var(--ss-metric-scale)) !important;
    line-height: 1.3;
    font-weight: 400;
    overflow-wrap: anywhere;
}

/* ==== pages/stonedesk.css ==== */
/* StoneDesk composition only. Shared typography, hero, navigation, pricing,
   disclosures, shell and Fluid root remain the public StoneStudio components. */
.ss-stonedesk {
    --ss-hero-accent: var(--ss-stonedesk);
    --ss-product-card-accent: var(--ss-stonedesk);
    --ss-product-card-surface: var(--ss-stonedesk-navy);
    --ss-product-card-text: var(--ss-white);
    --ss-product-card-muted: var(--ss-stonedesk-muted);
    color: var(--ss-text);
}
.ss-stonedesk__section, .ss-stonedesk__cta-end { padding-block: clamp(3.75rem, calc(7 * var(--ss-fluid-vw)), 5.625rem); }
.ss-stonedesk__inner { min-width: 0; }
.ss-stonedesk__sec-soft { background: var(--ss-stonedesk-soft); }
.ss-stonedesk .ss-page-nav-band { --ss-nav-background: var(--ss-stonedesk-soft); margin-bottom: 0; }
.ss-stonedesk .ss-section-heading__eyebrow { color: var(--ss-stonedesk) !important; }
.ss-stonedesk .ss-section-heading__title { margin: 1.625rem 0 0 !important; }
.ss-stonedesk__lead { margin: 1.5rem 0 0 !important; text-align: left; max-width: 45rem; line-height: 1.45; }
.ss-stonedesk__hero { background: linear-gradient(154deg, var(--ss-stonedesk-ink), var(--ss-stonedesk-navy) 38%, var(--ss-stonedesk-gradient-mid) 72%, var(--ss-stonedesk-sky)); }
.ss-stonedesk__hero .ss-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; }
.ss-stonedesk__hero .ss-hero__title { margin-top: 1.5rem; }
.ss-stonedesk__accent-line { display: block; --ss-hero-accent: var(--ss-stonedesk-sky); }
.ss-stonedesk__hero small { display: block; margin-top: 1rem; color: var(--ss-stonedesk-muted); font-size: var(--fnt-size1-fluid); }
.ss-stonedesk__sd-logo { display: inline-flex; align-items: center; font-size: var(--fnt-size6-fluid); line-height: 1; color: var(--ss-white); }
.ss-stonedesk__sd-logo svg { width: 2.125rem; height: 2.125rem; margin-right: .625rem; fill: none; stroke: var(--ss-stonedesk-sky); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ss-stonedesk__sd-logo span { font-weight: 300; }
.ss-stonedesk__laptop { min-width: 0; padding-inline: 1.25rem; filter: drop-shadow(0 1.5rem 2.5rem rgb(0 0 0 / 35%)); }
.ss-stonedesk__screen { border: .5rem solid var(--ss-stonedesk-ink); border-bottom-width: .875rem; border-radius: 1rem 1rem .25rem .25rem; overflow: hidden; box-shadow: 0 0 0 .125rem var(--ss-stonedesk); }
.ss-stonedesk__screen img { display: block; width: 100%; aspect-ratio: 8 / 5; }
.ss-stonedesk__base { height: .875rem; margin-inline: -1.25rem; background: linear-gradient(var(--ss-white), var(--ss-stonedesk-metal)); border-radius: .125rem .125rem .875rem .875rem; border-top: .125rem solid var(--ss-stonedesk); }
.ss-stonedesk__tablet { max-width: 65rem; margin: 2.75rem auto 0; padding: 1.375rem 1.5rem; background: var(--ss-stonedesk-ink); border-radius: 2rem; box-shadow: 0 1.875rem 3.75rem rgb(40 36 80 / 20%), 0 0 0 .125rem var(--ss-stonedesk); }
.ss-stonedesk__tablet-screen { overflow: hidden; border-radius: .875rem; }
.ss-stonedesk__tablet-screen video { display: block; width: 100%; height: auto; aspect-ratio: 36 / 25; background: var(--ss-stonedesk-soft); }
.ss-stonedesk__metrics { --ss-metric-item-width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 14.375rem)); justify-content: center; gap: 1.125rem; margin-top: 2.25rem; }
.ss-stonedesk__card { min-width: 0; background: var(--ss-stonedesk-navy); color: var(--ss-white); border: .125rem solid var(--ss-stonedesk); border-radius: 1.25rem; padding: 1.5rem; }
.ss-stonedesk .ss-step-grid { margin-top: 2.5rem; }
.ss-stonedesk__cards4 { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.ss-stonedesk__cards4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.ss-stonedesk h3 { font-size: var(--fnt-size3-fluid); line-height: 1.3; }
.ss-stonedesk__card p { color: var(--ss-stonedesk-muted); line-height: 1.5; }
.ss-stonedesk__ic { width: 1.875rem; height: 1.875rem; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ss-stonedesk__feat { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3.5rem; align-items: center; }
.ss-stonedesk__rev > .ss-stonedesk__txt { order: 2; }
.ss-stonedesk__rev > .ss-stonedesk__vis { order: 1; }
.ss-stonedesk__txt > p { font-size: var(--fnt-size3-fluid); line-height: 1.45; margin-top: 1.5rem; }
.ss-stonedesk__dash { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .875rem; font-size: var(--fnt-size2-fluid); line-height: 1.45; }
.ss-stonedesk__dash li { position: relative; padding-left: 1.875rem; }
.ss-stonedesk__dash li::before { content: ''; position: absolute; left: 0; top: .7em; width: 1.125rem; height: .125rem; background: var(--ss-stonedesk); }
.ss-stonedesk__chip { display: inline-block; border: .125rem solid var(--ss-stonedesk); border-radius: .5rem; padding: .25rem .625rem; background: var(--ss-stonedesk-navy); color: var(--ss-white); font-size: var(--fnt-size1-fluid); }
.ss-stonedesk__vis { min-width: 0; }
.ss-stonedesk__frame, .ss-stonedesk__inset { padding: .75rem; background: var(--ss-white); border: .0625rem solid var(--ss-stonedesk-line); border-radius: 1.25rem; box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 10%); }
.ss-stonedesk__frame img, .ss-stonedesk__inset img { display: block; width: 100%; border-radius: .75rem; }
.ss-stonedesk__inset { margin-top: 1rem; border-color: var(--ss-stonedesk); }
.ss-stonedesk__phones { display: flex; justify-content: center; }
.ss-stonedesk__phone { width: min(18.75rem, 100%); border: .625rem solid var(--ss-stonedesk-ink); border-radius: 2.5rem; overflow: hidden; background: var(--ss-stonedesk-ink); box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 20%), 0 0 0 .125rem var(--ss-stonedesk); }
.ss-stonedesk__phone video { display: block; width: 100%; height: auto; aspect-ratio: 720 / 1558; background: var(--ss-stonedesk-soft); }
.ss-stonedesk__center { text-align: center; }
.ss-stonedesk__center .ss-section-heading__title, .ss-stonedesk__center .ss-stonedesk__lead { margin-inline: auto !important; text-align: center; }
.ss-stonedesk .ss-pricing-toggle { margin-top: 1.75rem; margin-bottom: 0; }
.ss-stonedesk__plans { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: stretch; gap: 1.25rem; margin-top: 2.75rem; text-align: left; }
.ss-stonedesk__plan { display: flex; flex-direction: column; grid-row: auto; gap: .75rem; border-radius: 1.25rem; padding: 1.5rem; }
.ss-stonedesk__plan h3 { margin: 0; }
.ss-stonedesk__plan .ss-pricing-card__description { margin: 0 !important; }
.ss-stonedesk__plan .ss-pricing-card__billing-note { min-height: 1.4em; margin: 0 !important; }
.ss-stonedesk__plan.ss-pricing-card--featured { border-color: var(--ss-stonedesk); }
.ss-stonedesk .ss-pricing-card__badge { background: var(--ss-stonedesk); }
.ss-stonedesk__price { margin: .5rem 0 0; }
.ss-stonedesk__plan ul { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.ss-stonedesk__plan li { padding-left: 1.25rem; position: relative; }
.ss-stonedesk__plan li::before { content: '✓'; position: absolute; left: 0; color: var(--ss-stonedesk); }
.ss-stonedesk__plan .ss-hero__button { margin-top: auto; align-self: center; width: 100%; min-height: 3rem; font-size: var(--fnt-size1); }
.ss-stonedesk__pr-note { text-align: right; }
.ss-stonedesk__pr-extra { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; margin-top: 1.875rem; text-align: left; }
.ss-stonedesk__x { border: .0625rem solid var(--ss-stonedesk-line); border-radius: 1rem; padding: 1.25rem; background: var(--ss-white); line-height: 1.5; }
.ss-stonedesk__x b { display: block; margin-bottom: .5rem; }
.ss-stonedesk .ss-qr-faq { --ss-faq-accent: var(--ss-stonedesk); }
.ss-stonedesk__faq { margin-top: 2.5rem; text-align: left; }
.ss-stonedesk__cta-end p:not(.ss-section-heading__eyebrow) { max-width: 45rem; margin: 1.5rem auto 0; font-size: var(--fnt-size3-fluid); }
.ss-stonedesk__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 2rem; }
.ss-stonedesk__button-outline { border: .125rem solid var(--ss-stonedesk-navy); color: var(--ss-stonedesk-navy); background: transparent; }
.ss-stonedesk__button-outline:hover { color: var(--ss-stonedesk-navy); }
@media (max-width: 1000px) {
    .ss-stonedesk__cards4, .ss-stonedesk__plans { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .ss-stonedesk__hero .ss-hero, .ss-stonedesk__feat { grid-template-columns: minmax(0,1fr); }
    .ss-stonedesk__rev > .ss-stonedesk__txt, .ss-stonedesk__rev > .ss-stonedesk__vis { order: initial; }
    .ss-stonedesk__laptop { width: 100%; max-width: 47.5rem; margin: auto; }
}
@media (max-width: 640px) {
    .ss-stonedesk__metrics, .ss-stonedesk__cards4, .ss-stonedesk__plans, .ss-stonedesk__pr-extra { grid-template-columns: minmax(0,1fr); }
    .ss-stonedesk__tablet { padding: .75rem; border-radius: 1.25rem; }
    .ss-stonedesk__row > a { width: 100%; }
}