/* SitePack EU theme — design tokens
   ===========================================================================
   Values follow the SitePack Brand Book (sitepack-core/BRAND_BOOK.md):
   Brand Navy #1e3346 (primary), Brand Sky Blue #64cbea and Brand Amber #ffb400
   (marketing accents), neutrals #202223 / #6d7175 / #dcdfe3 / #edeeef /
   #f1f2f4 / #f6f6f7, 12px cards, 8px controls and the soft double card shadow.

   How the layer works
   -------------------
   SitePack core always injects the site's core brand tokens into a generated
   :root that loads *before* this file: --main-color, --main-color-text,
   --secondary-color, --secondary-color-text, --link-color, --link-active-color,
   --link-text-decoration, --border-radius, --container-width, --body-font and
   --heading-font. Those are consumed directly — never redeclared here, or the
   theme would override the merchant.

   The remaining surface/ink settings are declared in theme.json, but they only
   reach the rendered stylesheet once the theme is published: under
   `theme:watch` the API node cannot read the watched theme.json (see
   CustomThemeService::getThemeConfig), so SiteDesignSettings falls back to the
   core-only list above and emits none of them. Each --sp-* token below
   therefore reads its setting first and falls back to its brand-book value:

       --sp-surface: var(--surface-color, #ffffff);

   A merchant value therefore always wins, and the theme still paints correctly
   when the platform emits nothing. Rules only ever use the --sp-* tokens, so
   every colour in this file traces back to exactly one setting, and the derived
   shades (hovers, dividers, shadows, scrims) are computed with color-mix()
   instead of being hardcoded. */
:root {
    /* --- Ink ------------------------------------------------------------- */
    --sp-text: var(--text-color, #202223);
    --sp-text-muted: var(--text-muted-color, #6d7175);
    /* Long-form copy: softened primary ink, still well above 4.5:1 on surface */
    --sp-text-body: color-mix(in srgb, var(--sp-text) 82%, transparent);
    /* Meta and captions (periods, billing notes, small print). Deliberately the
       same value as --sp-text-muted rather than a lighter tier: the brand book
       defines no shade below #6d7175, which is itself only 4.9:1 on white, so
       fading it further would drop this text under the WCAG AA minimum. */
    --sp-text-subtle: var(--sp-text-muted);
    /* Purely decorative marks (separators, icon glyphs, the × on an unavailable
       feature) — never the only carrier of meaning, so it may go lighter. */
    --sp-text-disabled: color-mix(in srgb, var(--sp-text-muted) 55%, transparent);

    /* --- Surfaces -------------------------------------------------------- */
    --sp-surface: var(--surface-color, #ffffff);
    --sp-surface-sunken: var(--surface-sunken-color, #f1f2f4);
    --sp-surface-hover: var(--surface-hover-color, #f6f6f7);

    /* --- Lines ----------------------------------------------------------- */
    --sp-border: var(--border-color, #dcdfe3);
    --sp-border-subtle: var(--border-subtle-color, #edeeef);

    /* --- Marketing accents ----------------------------------------------
       The brand book keeps sky blue and amber out of the dense admin UI and
       reserves them for logo/marketing surfaces — which is exactly this site.
       Used for eyebrows, the owl, focus rings and the "most popular" badge. */
    --sp-accent: var(--accent-color, #64cbea);
    --sp-accent-text: var(--accent-color-text, #1e3346);
    --sp-highlight: var(--highlight-color, #ffb400);
    --sp-highlight-text: var(--highlight-color-text, #202223);

    /* --- Semantic -------------------------------------------------------- */
    --sp-success: var(--success-color, #008060);
    --sp-success-bg: var(--success-background-color, #e3f1df);
    --sp-danger: var(--danger-color, #8e1f0b);
    --sp-danger-bg: var(--danger-background-color, #fedad7);
    /* No warning pair is documented in the brand book, so it is derived from
       amber rather than invented: darkened for text, tinted for the surface. */
    --sp-warning: color-mix(in srgb, var(--sp-highlight) 55%, var(--sp-text));
    --sp-warning-bg: color-mix(in srgb, var(--sp-highlight) 20%, var(--sp-surface));

    /* --- Chrome ---------------------------------------------------------- */
    --sp-header-bg: var(--header-background-color, #ffffff);
    --sp-header-text: var(--header-text-color, var(--main-color));
    --sp-topbar-bg: var(--header-topbar-color, var(--main-color));
    --sp-topbar-text: var(--header-topbar-text-color, var(--main-color-text));
    --sp-footer-bg: var(--footer-background-color, var(--main-color));
    --sp-footer-title: var(--footer-title-color, var(--main-color-text));
    --sp-footer-text: var(--footer-text-color, color-mix(in srgb, var(--sp-footer-title) 78%, transparent));
    --sp-copyright-text: var(--copyright-text-color, color-mix(in srgb, var(--sp-footer-title) 62%, transparent));
    /* The copyright bar sits on the footer surface; its own background only
       matters when a merchant sets one. */
    --sp-copyright-bg: var(--copyright-background-color, transparent);
    /* Hairline that reads on the dark footer surface */
    --sp-footer-rule: color-mix(in srgb, var(--sp-footer-title) 16%, transparent);

    /* --- Page backgrounds (per template) --------------------------------- */
    --sp-page-bg: var(--background-color, #ffffff);
    --sp-content-bg: var(--content-background-color, #ffffff);
    --sp-blog-bg: var(--blog-background-color, #ffffff);
    --sp-category-bg: var(--category-background-color, #ffffff);
    --sp-label-bg: var(--label-background-color, #f1f2f4);

    /* --- Elevation (brand book §5) --------------------------------------- */
    --sp-shadow-card: 0 1px 3px color-mix(in srgb, var(--sp-text) 10%, transparent),
                      0 0 0 1px color-mix(in srgb, var(--sp-text) 5%, transparent);
    --sp-shadow-hover: 0 8px 20px color-mix(in srgb, var(--sp-text) 12%, transparent);
    --sp-shadow-raised: 0 20px 40px color-mix(in srgb, var(--sp-text) 14%, transparent);
    --sp-shadow-dropdown: 0 4px 12px color-mix(in srgb, var(--sp-text) 14%, transparent);
    --sp-shadow-overlay: 0 16px 32px color-mix(in srgb, var(--sp-text) 26%, transparent);
    --sp-scrim: color-mix(in srgb, var(--sp-text) 55%, transparent);

    /* --- Shape ------------------------------------------------------------
       Controls use --border-radius (8px); cards sit one step up (12px), both
       still following whatever radius the merchant picks. */
    --sp-radius-card: calc(var(--border-radius) + 4px);
    --sp-radius-pill: 999px;

    /* --- Section ink context ----------------------------------------------
       The partner page proved a pattern worth having everywhere: a section
       does not carry a light and a dark twin of every rule, it carries one
       rule that reads a small set of context tokens, and the section's own
       class flips those tokens. :root holds the light values; .sp-dark (below)
       holds the values that read on the brand surface.

       Components written against --sp-ink / --sp-line / --sp-veil therefore
       work unchanged on a white, a sunken and a brand-coloured section. */
    --sp-ink: var(--sp-text);
    --sp-ink-soft: var(--sp-text-body);
    --sp-ink-muted: var(--sp-text-muted);
    --sp-ink-faint: var(--sp-text-subtle);
    --sp-line: var(--sp-border-subtle);
    --sp-veil: var(--sp-surface-sunken);
    /* Fill of a cell inside a hairline grid — the grid's own background is the
       line colour, and the 1px gaps between cells are what shows through. */
    --sp-cell-bg: var(--sp-surface);

    /* --- Display type ------------------------------------------------------
       The scale the partner page runs at, hoisted so every marketing template
       shares it. Heavy weight plus tight tracking is what separates a designed
       page from a generated one; both are as much part of the brand as the
       colours are. */
    --sp-display-1: clamp(2.375rem, 5.2vw, 4.125rem);
    --sp-display-2: clamp(1.85rem, 3.6vw, 2.75rem);
    --sp-display-3: clamp(1.35rem, 2.2vw, 1.6rem);
    --sp-display-weight: 900;
    --sp-display-tracking: -0.035em;

    /* --- Vertical rhythm ---------------------------------------------------
       Fluid rather than fixed: a page whose sections are all exactly the same
       height reads as a list. --sp-section-y is the marketing rhythm,
       --sp-section-y-sm the utility one (search, account, tag). */
    --sp-section-y: clamp(2.5rem, 7vw, 6rem);
    --sp-section-y-sm: clamp(1.75rem, 4vw, 3.5rem);

    /* --- Motion ------------------------------------------------------------
       One duration/easing pair for the whole theme. Everything that moves is
       gated on prefers-reduced-motion further down. */
    --sp-dur: 180ms;
    --sp-dur-slow: 420ms;
    --sp-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Brand-coloured section. Flips the ink context so the components inside need
   no dark variant of their own — the same mechanism the partner page uses for
   .pp-dark, hoisted here so any template can drop a brand section.

   .hub-section--dark and .cta-band are listed alongside so the modules that
   are always brand-coloured pick the context up without an extra class. */
.sp-dark,
.hub-section--dark,
.pricing-trial,
.cta-band__inner {
    background: var(--main-color);
    color: var(--main-color-text);
    --sp-ink: var(--main-color-text);
    --sp-ink-soft: color-mix(in srgb, var(--main-color-text) 75%, transparent);
    --sp-ink-muted: color-mix(in srgb, var(--main-color-text) 60%, transparent);
    --sp-ink-faint: color-mix(in srgb, var(--main-color-text) 45%, transparent);
    --sp-line: color-mix(in srgb, var(--main-color-text) 14%, transparent);
    --sp-veil: color-mix(in srgb, var(--main-color-text) 6%, transparent);
    --sp-cell-bg: var(--main-color);
}

/* Sunken section: same ink as the page, a tinted surface. Cells inside a
   hairline grid stay white so they still read as cells. */
.hub-section--muted,
.sp-sunken {
    --sp-veil: var(--sp-surface);
}

/* Lists that are a layout, not prose. Core ships an unlayered
   `ul { margin: 0 auto !important; width: 100%; max-width: var(--container-width) }`
   which otherwise swallows every list margin in this file and re-constrains
   grids that are already inside a .container-element. Cascade layers were
   evaluated as a cleaner fix and rejected: layering this stylesheet would put
   all of its *normal* declarations below core's unlayered ones, which is a far
   bigger regression than the `!important` it removes. This single class
   centralises the workaround instead of repeating it per module. */
.sp-bare-list {
    list-style: none;
    margin: 0 !important;
    padding: 0;
    width: auto;
    max-width: none;
}

/* Everything that moves in this theme moves through --sp-dur/--sp-ease, so a
   single gate switches all of it off. Not `animation: none` — an animation
   that is never allowed to finish can leave an element stuck at its start
   frame; collapsing the duration lets it complete instantly instead. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

* {
    box-sizing: border-box;
}

body {
    line-height: 1.6;
    background-color: var(--sp-page-bg);
    color: var(--sp-text);
    margin: 0;
}

/* Headings carry the brand's weight; the type scale steps in the brand book's
   8px rhythm and stays fluid down to phone widths. */
h1 {
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--sp-text);
}

h2 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--sp-text);
}

h3 {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sp-text);
}

img {
    max-width: 100%;
}

/* One visible focus treatment for every interactive element, in the brand's
   sky blue. Keyboard-only (:focus-visible) so pointer users see no ring. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--sp-accent);
    outline-offset: 2px;
    border-radius: var(--border-radius);
}

a {
    color: var(--link-color);
}

a:hover, a:active, a:focus {
    text-decoration: var(--link-text-decoration);
    color: var(--link-active-color);
}

.btn:hover, .btn:active, .btn:focus {
    text-decoration: none !important;
}

header {
    background: var(--sp-header-bg);
    padding: 1rem 0;
    width: 100%;
    position: relative;
    z-index: 1000;
    border-bottom: 1px solid var(--sp-border);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--sp-text) 5%, transparent);
}

header nav {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

/* Primary CTA in the navigation (e.g. "Get started") renders as an inline
   brand-coloured pill instead of the full-width default button. */
nav ul li a.btn-primary, .nav-link a.btn-primary {
    width: auto;
    padding: 0.55rem 1.35rem;
    border-radius: var(--sp-radius-pill);
    color: var(--main-color-text);
    background-color: var(--main-color);
}

nav ul li a.btn-primary:hover, nav ul li a.btn-primary:focus, nav ul li a.btn-primary:active {
    filter: brightness(90%);
    color: var(--main-color-text);
    background-color: var(--main-color, var(--sp-highlight));
    border-color: var(--main-color, var(--sp-highlight));
}

.brand {
    flex-shrink: 0;
    margin-right: auto;
}

.brand a {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 0.5rem;
}

.brand img {
    height: 40px;
    width: auto;
}

.brand .site-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sp-header-text);
}

/* The menu trigger is a real <button>, so its UA styling has to be reset before the
   three bars can be laid out. The <li> around it is what gets hidden on desktop. */
.nav-toggle-item {
    display: none;
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.nav-toggle span {
    display: block;
    height: 3px;
    width: 24px;
    margin: 2px 0;
    background-color: var(--sp-header-text);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

.nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-link {
    position: relative;
}

/* Direct child only: these are the top-level trigger/link styles. A descendant
   selector here would bleed into the mega panel and override the item, foot and
   promo-card styling (padding, colour, nowrap). */
.nav-link > a {
    text-decoration: none;
    color: var(--sp-header-text);
    white-space: nowrap;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
}

.nav-link > a:hover {
    color: var(--main-color);
    background-color: var(--sp-surface-hover);
}

.nav-icon .sitepack-shopping-cart-trigger svg {
    color: var(--sp-header-text);
}

header .nav-search-icon {
    width: 50px;

    @media (max-width: 768px) {
        width: 30px;
    }
}

header .nav-shopping-cart {
    width: 50px;
}

/* =========================
   XL dropdown (mega menu)
   =========================
   The platform emits a fixed structure — `.dropdown > a.dropdown-toggle +
   ul.dropdown-menu > li > a` — with only a label and URL per item. The theme
   turns that thin list into a wide, designed panel: a card grid of the sub
   items, each with a tinted leading tile, plus a "view all" row that theme.js
   appends pointing back at the parent category. The panel is anchored to the
   nav row (not the individual trigger) so it reads as one broad section and
   never overflows the viewport, whichever menu is open. */

/* header nav is the positioning context: the panel spans the nav's content
   box (container width, centred) rather than the narrow trigger. .nav-link sets
   position: relative on every item, so the dropdown item is explicitly reset to
   static — otherwise the panel would anchor to the ~100px trigger instead. */
header nav {
    position: relative;
}

.nav-link.dropdown {
    position: static;
}

.dropdown > .dropdown-menu {
    position: absolute;
    /* A gap below the header so the active underline stays visible above the
       panel. The ::before bridge below keeps hover intent across the gap. */
    top: calc(100% + 1.35rem);
    left: 0;
    right: 0;
    margin: 0;
    list-style: none;
    /* Two areas: the item grid (main) and the promo card. Menus without a
       promo let the main area take the whole width (rule below). */
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border-subtle);
    border-radius: var(--sp-radius-card);
    box-shadow: var(--sp-shadow-raised);
    z-index: 1001;
    /* Closed by default; opened on hover/focus below. Animated with
       opacity + transform so it can ease in (display:none cannot). */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity var(--sp-dur) var(--sp-ease),
                transform var(--sp-dur) var(--sp-ease),
                visibility var(--sp-dur) var(--sp-ease);
}

.dropdown > .dropdown-menu:not(.has-promo) {
    grid-template-columns: minmax(0, 1fr);
}

/* Invisible bridge across the gap between the trigger and the panel so the
   pointer can travel down without dropping the :hover state. */
.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -1.35rem;
    left: 0;
    right: 0;
    height: 1.35rem;
}

.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

/* XL mega menu — sitepack-eu skin.
   The platform seeds the mega markup (.sp-mega / .sp-mega__*, see the XL branch of
   nav_items.twig) and the frontend ships a token-based base sheet for it (injected
   as custom_theme.css before this file). These rules layer the sitepack-eu design on
   top so the panel looks exactly as it did under the old theme-side enrichment — the
   amber promo badge, the sky call to action, the accent/secondary icon-tile rhythm and
   the subtle tile ring — now driven by admin-configured navigation data. */
.sp-mega > .sp-mega__panel {
    border-color: var(--sp-border-subtle);
    box-shadow: var(--sp-shadow-raised);
}

.sp-mega__panel .sp-mega__eyebrow {
    color: var(--sp-text-muted);
}

.sp-mega__item:hover,
.sp-mega__item:focus {
    background: var(--sp-surface-hover);
}

/* Icon tile: a subtle inner ring plus the theme's three-step palette rhythm
   (navy default, accent on the 1st of every three, secondary on the 3rd). */
.sp-mega__ico {
    background: color-mix(in srgb, var(--main-color) 15%, var(--sp-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sp-text) 6%, transparent);
    transition: transform var(--sp-dur) var(--sp-ease);
}

.sp-mega__item:nth-child(3n+1) .sp-mega__ico {
    color: color-mix(in srgb, var(--sp-accent) 62%, var(--sp-text));
    background: color-mix(in srgb, var(--sp-accent) 22%, var(--sp-surface));
}

.sp-mega__item:nth-child(3n+3) .sp-mega__ico {
    color: var(--secondary-color);
    background: color-mix(in srgb, var(--secondary-color) 18%, var(--sp-surface));
}

.sp-mega__item:hover .sp-mega__ico,
.sp-mega__item:focus .sp-mega__ico {
    transform: scale(1.06);
}

.sp-mega__panel .sp-mega__sub {
    color: var(--sp-text-muted);
}

/* "View all" arrow nudges on hover, like the old .mega-foot link. */
.sp-mega__viewall span {
    transition: transform var(--sp-dur) var(--sp-ease);
}

.sp-mega__viewall:hover span,
.sp-mega__viewall:focus span {
    transform: translateX(3px);
}

/* Promo card: amber badge pinned to the top, sky call to action. */
.sp-mega__promo {
    justify-content: flex-start;
}

.sp-mega__promo-badge {
    margin-bottom: auto;
    background: var(--sp-highlight);
    color: var(--sp-highlight-text);
}

.sp-mega__promo-sub {
    color: color-mix(in srgb, var(--main-color-text) 80%, transparent);
}

.sp-mega__promo-cta {
    color: var(--sp-accent);
}

.sp-mega__promo-cta span {
    transition: transform var(--sp-dur) var(--sp-ease);
}

.sp-mega__promo:hover .sp-mega__promo-cta span,
.sp-mega__promo:focus .sp-mega__promo-cta span {
    transform: translateX(3px);
}

/* The theme already draws the sky underline under every top-level trigger
   (.nav-link:not(.nav-cta) > a::after), so suppress the base sheet's own XL
   underline to avoid painting it twice. */
.sp-mega > .dropdown-toggle::after {
    display: none;
}

/* Active/open indicator under the top-level items (the sky-blue underline). */
.nav-link:not(.nav-cta) > a {
    position: relative;
}

.nav-link:not(.nav-cta) > a::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: -1rem;
    height: 2px;
    border-radius: 2px;
    background: var(--sp-accent);
    opacity: 0;
    transform: scaleX(0);
    transition: transform var(--sp-dur) var(--sp-ease),
                opacity var(--sp-dur) var(--sp-ease);
}

.nav-link:not(.nav-cta) > a:hover::after,
.nav-link:not(.nav-cta) > a.active::after,
.dropdown:hover > a::after,
.dropdown:focus-within > a::after {
    opacity: 1;
    transform: scaleX(1);
}

/* On the narrower desktop range the promo card shrinks so the grid keeps room. */
@media (min-width: 769px) and (max-width: 1080px) {
    .dropdown > .dropdown-menu {
        grid-template-columns: minmax(0, 1fr) 16rem;
    }
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    transition: transform var(--sp-dur) var(--sp-ease);
}

.dropdown:hover .caret,
.dropdown:focus-within .caret {
    transform: rotate(180deg);
}

main {
    padding: 0;
    margin: 0 auto;
    background-color: var(--sp-content-bg);
}

/* Shared content wrapper: keeps text/blocks aligned to the same width and
   gutter as the header and grids, on every template. */
.container-element {
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* =========================
   Footer
   =========================
   The footer link columns are composed of site-configured elements rendered by
   sitepack_footer(); the theme only provides the brand surface (background +
   text/title colours via the CSS variables) so those elements inherit the look. */
footer {
    background-color: var(--sp-footer-bg);
    color: var(--sp-footer-text);
}

/* The platform inlines the footer column headings and links with a fixed colour
   of its own (which does not track the footer surface). Force them to the footer
   tokens so the text always reads on the footer background — white on the navy
   footer. !important is needed to beat the inline / per-element rules; scoped to
   the platform's .row grid so the theme's own bottom bar keeps its colours. */
footer .container-element-heading,
footer .container-element-heading * {
    color: var(--sp-footer-title) !important;
}

footer .row a {
    color: var(--sp-footer-text) !important;
}

/* Column spacing. The platform stacks the footer link columns in one or more
   .container-element-columns rows with no vertical rhythm — the rows sit flush against
   each other and, when the columns wrap on narrow screens, so do they. Add vertical
   breathing room between stacked rows and between wrapped columns, plus a little gap
   under each column heading. Scoped to the footer so editor-page columns are untouched. */
footer .background-inner > .container-element-columns + .container-element-columns {
    margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

footer .container-element-columns > .row {
    row-gap: clamp(1.75rem, 4vw, 2.5rem);
}

footer .col > .container-element-heading {
    margin-bottom: 0.35rem;
}

/* Bottom bar: sits on the footer surface, separated by a thin inset divider line.
   Holds the copyright text (left) and the language/translations switcher (right),
   both rendered by sitepack_copyright(). */
/* Copyright (left) and the language links (right) share one line. */
.footer-bottom {
    border-top: 1px solid var(--sp-footer-rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 1.5rem;
}

/* Copyright + "Made in Europe" as one group, so the claim reads as part of the
   copyright line instead of drifting into the middle of the row. */
.footer-legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.4rem;
}

.footer-madein {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--sp-copyright-text);
}

.footer-madein a {
    color: var(--sp-copyright-text);
    /* Same weight as the copyright text it sits on the line with, not a bolder
       call to action. inherit rather than a number, so it follows that text. */
    font-weight: inherit;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity var(--sp-dur) var(--sp-ease);
}

.footer-madein a:hover,
.footer-madein a:focus {
    opacity: 1;
    text-decoration: underline;
}

/* The platform's copyright block centres its paragraphs. Inside the flex row that
   would leave the dash sitting away from the text it belongs to. */
.footer-legal #copyright p {
    text-align: left;
}

/* That block is itself a flex row with a 24px column gap, and its second paragraph
   (the legal links) stays in the layout even when the site has no policy links to
   show. The empty item still claims its gap, which lands between "SitePack ®" and
   the dash. Drop it only when it has no links in it. */
.footer-legal #copyright p.policy-links:not(:has(a)) {
    display: none;
}

@media (max-width: 640px) {
    .footer-legal {
        justify-content: center;
    }

    .footer-legal #copyright p {
        text-align: center;
    }
}

#copyright {
    flex: 1 1 auto;
    margin: 0;
    padding: 1.5rem 0;
    font-size: 0.85rem;
    color: var(--sp-copyright-text);
    background-color: var(--sp-copyright-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

#copyright p {
    margin: 0;
    line-height: 1.6;
}

/* Translations / language switcher (e.g. EN · NL · ES · FR) */
#copyright ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

#copyright a {
    color: var(--sp-copyright-text);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s, color 0.2s;
}

#copyright a:hover {
    color: var(--sp-footer-title);
    opacity: 1;
    text-decoration: none;
}

/* Language links beside the copyright: plain codes (EN · NL · DE), no flags. */
.footer-langs ul {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.85rem;
    /* Core CSS applies `ul { width: 100%; margin: 0 auto !important }`; override both
       so the list stays content-sized and right-aligned next to the copyright. */
    width: auto;
    margin: 0 !important;
    padding: 0;
}

.footer-langs a {
    color: var(--sp-copyright-text);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.75;
    transition: opacity 0.2s, color 0.2s;
}

.footer-langs a:hover,
.footer-langs a:focus {
    color: var(--sp-footer-title);
    opacity: 1;
    text-decoration: none;
}

.footer-langs a.is-active {
    color: var(--sp-footer-title);
    opacity: 1;
}

.navigation-flag {
    width: 20px;
    height: auto;
    border-radius: 2px;
    vertical-align: middle;
}

@media (max-width: 576px) {
    /* The codes no longer fit beside the copyright, so the bar becomes one centred
       stack. Centred rather than left-aligned because the copyright paragraph carries
       the platform's own `text-center` class — left-aligning the codes under centred
       text is what looked out of line. */
    .footer-bottom {
        justify-content: center;
        text-align: center;
    }

    #copyright {
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 1.5rem 0 0.75rem;
        gap: 0.35rem;
    }

    .footer-langs {
        padding-bottom: 1.5rem;
    }

    .footer-langs ul {
        justify-content: center;
    }
}

.sitemap section {
    max-width: var(--container-width);
    margin: 0 auto 2rem;
    padding: 0 1.5rem;
}

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

.sitemap h1 {
    max-width: var(--container-width);
    margin: 0 auto 1rem;
    padding: 0 1.5rem;
}

.sitemap h2 {
    border-bottom: 1px solid var(--sp-border-subtle);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.sitemap ul {
    list-style: none;
    padding-left: 0;
}

.sitemap li {
    margin-bottom: 0.5rem;
}

.sitemap a {
    text-decoration: none;
    color: var(--link-color);
}

.sitemap a:hover {
    text-decoration: var(--link-text-decoration);
    color: var(--link-active-color);
}

.product-grid, .products-wrapper, .category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: var(--container-width);
    margin: 1rem auto;
    padding: 0 1.5rem;
}

/* Category Layout Sidebar + Grid */
.category-main-layout {
    display: flex;
    gap: 2rem;
    max-width: var(--container-width);
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.category-sidebar {
    flex: 0 0 280px;
}

.category-products-content {
    flex: 1;
}

/* Ensure product grid inside content doesn't double margin/max-width */
.category-products-content .products-wrapper {
    margin: 0;
    max-width: none;
    padding: 0;
}

@media (max-width: 992px) {
    .category-main-layout {
        flex-direction: column;
    }

    .category-sidebar {
        flex: none;
        width: 100%;
    }

    .product-grid, .products-wrapper, .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .product-grid, .products-wrapper, .category-grid {
        grid-template-columns: 1fr;
    }
}

.product-card {
    border-radius: var(--sp-radius-card);
    display: flex;
    flex-direction: column;
    background-color: var(--sp-surface);
    text-align: left;
    height: 100%;
    margin-bottom: 10px;
    border: 1px solid var(--sp-border-subtle);
    box-shadow: var(--sp-shadow-card);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.product-card:hover {
    box-shadow: var(--sp-shadow-hover);
    transform: translateY(-2px);
}

.product-card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-image {
    margin-bottom: 1rem;
    text-align: center;
}

.product-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin-top: 0;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.product-information {
    padding: 10px;
}

.product-title .product-brand {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sp-text-muted);
    line-height: 18px;
    height: 18px;
    display: block;
    width: 100%;
}

.product-title h3 {
    margin: 7px 0 0 0;
    font-size: 14px;
    color: var(--sp-text);
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price {
    margin: 0.5rem 0 1rem;
    font-weight: 400;
}

.product-price .old-price {
    text-decoration: line-through;
    color: var(--sp-text-subtle);
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.product-rating {
    margin: 10px 0;
}

.product-rating svg {
    height: 16px;
    width: 16px;
    margin-right: -4px;
    fill: var(--sp-highlight);
}

.product-rating span.review-count {
    font-size: 12px;
    margin-top: -5px;
}

.product-stock-info {
    font-size: 0.9rem;
    color: var(--sp-text);
    margin: 0.5rem 0;
}

.product-stock-info.in-stock {
    color: var(--sp-success);
}

.product-stock-info.backorder {
    color: var(--sp-warning);
}

.product-stock-info.out-of-stock {
    color: var(--sp-danger);
}

.product-cta {
    margin-top: auto;
}

.btn-primary {
    display: inline-block;
    background-color: var(--main-color);
    color: var(--main-color-text);
    border: none;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 600;
    width: 100%;
    text-decoration: none;
    text-align: center;
    /* filter is what the hover actually changes. The old `background-color` transition
       animated a property nothing touches, so the hover snapped instead of easing. */
    transition: filter 0.2s;
}

/* These buttons are <a> elements, and the generic `a:hover` rule near the top of this
   file is one class plus one element — more specific than a lone `.btn-primary`. It was
   therefore repainting the label in --link-active-color on hover: dark navy text on a
   dark navy button, which reads as the label disappearing. Any variant that sets its own
   foreground has to restate it for the interactive states. */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    filter: brightness(90%);
    color: var(--main-color-text);
}

.btn-primary:disabled, .btn-primary.disabled {
    background-color: color-mix(in srgb, var(--sp-text-muted) 35%, var(--sp-surface));
    cursor: not-allowed;
    filter: none;
}

/* Blog surfaces carry their own background setting so a merchant can tint blog pages
   without touching the rest of the site. */
.blog-grid, .blog-post {
    background-color: var(--sp-blog-bg);
}

.category-description {
    background-color: var(--sp-category-bg);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.category-sub-categories {
    margin-bottom: 2rem;
}

.category-sub-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .category-sub-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .category-sub-categories-grid {
        grid-template-columns: 1fr;
    }
}

/* Category Card - Shopify Style */
.category-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--sp-radius-card);
    background-color: var(--sp-category-bg);
    transition: box-shadow 0.3s ease;
    height: 100%;
    max-height: 350px;
    border: 1px solid var(--sp-border-subtle);
    box-shadow: var(--sp-shadow-card);
}

.category-card:hover {
    box-shadow: var(--sp-shadow-hover);
}

.category-card__link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

.category-card__link:hover, .category-card__link:focus {
    text-decoration: none !important;
}

.category-card__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--sp-surface-hover);
    flex: 1;
    max-height: 250px; /* Limit the image section height to leave room for the footer */
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-card__image {
    width: 100%;
    height: 100%;
}

.category-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the full image fits within the section */
    padding: 10px; /* Add some padding to see the full image clearly */
    transition: transform 0.5s ease;
}

.category-card:hover .category-card__image img {
    transform: scale(1.05);
}

.category-card__image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--sp-surface-hover) 25%, var(--sp-surface-hover) 50%, var(--sp-surface-hover) 75%);
    background-size: 200% 200%;
    animation: placeholder-shimmer 2s infinite linear;
}

@keyframes placeholder-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.category-card__info {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sp-surface);
    flex: 0 0 auto; /* Ensure info area has a consistent height and doesn't shrink or grow disproportionately */
    margin-top: 0;
}

.category-card__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--sp-text);
    flex-grow: 1;
}

.category-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--sp-surface-hover);
    color: var(--sp-text);
    transition: all 0.3s ease;
    margin-left: 10px;
    flex-shrink: 0;
}

.category-card__arrow svg {
    height: 20px;
}

.category-card:hover .category-card__arrow {
    background-color: var(--main-color);
    color: var(--main-color-text);
    transform: translateX(4px);
    text-decoration: none !important;
}

/* Badges follow the brand book's 8px control radius and semantic pairs. */
.label, .badge {
    display: inline-block;
    background-color: var(--sp-label-bg);
    color: var(--sp-text);
    padding: 0.2rem 0.55rem;
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
}

.badge--success {
    background-color: var(--sp-success-bg);
    color: var(--sp-success);
}

.badge--danger {
    background-color: var(--sp-danger-bg);
    color: var(--sp-danger);
}

.badge--warning {
    background-color: var(--sp-warning-bg);
    color: var(--sp-warning);
}

.badge--accent {
    background-color: color-mix(in srgb, var(--sp-accent) 28%, var(--sp-surface));
    color: var(--sp-accent-text);
}

/* Brand book §6: the secondary button is the neutral outline pair to the navy
   primary — not a second filled colour. */
.btn-secondary {
    background-color: var(--sp-surface);
    color: var(--sp-text);
    border: 1px solid var(--sp-border);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--sp-surface-hover);
    border-color: color-mix(in srgb, var(--sp-text) 35%, var(--sp-border));
    color: var(--sp-text);
    text-decoration: none;
}

/* =========================
   Top bar (utility navigation)
   ========================= */
.topbar {
    background-color: var(--sp-topbar-bg);
    color: var(--sp-topbar-text);
    font-size: 0.85rem;
    /* Lift the topbar (and its language dropdown) above the header, which is
       position: relative; z-index: 1000 — otherwise the open menu, which extends
       down into the header's band, is painted behind it. */
    position: relative;
    z-index: 1001;
}

.topbar__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.topbar ul {
    list-style: none;
    /* Core CSS applies `ul { width: 100%; margin: 0 auto !important }`, which
       stretches and centres the groups. Override both so the topbar groups stay
       content-sized and justify-content: space-between can push them to the edges. */
    margin: 0 !important;
    padding: 0;
    width: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.topbar__meta {
    gap: 1.25rem;
    justify-content: flex-end;
}

.topbar a {
    color: var(--sp-topbar-text);
    text-decoration: none;
    font-weight: 500;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.topbar a:hover,
.topbar a:focus {
    opacity: 1;
    text-decoration: none;
    color: var(--sp-topbar-text);
}

.topbar__lang {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
}

/* Dim only the plain single-language fallback, never this element itself: opacity here
   fades the whole subtree — including the dropdown panel — and a child cannot undo it,
   which is what made the open menu unreadable. */
.topbar__lang > svg,
.topbar__lang > span {
    opacity: 0.85;
}

.topbar__lang svg {
    display: block;
}

/* Language switcher (native <details> dropdown) */
.lang-switch {
    position: relative;
}

.lang-switch__toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    list-style: none;
    opacity: 0.85;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.lang-switch__toggle::-webkit-details-marker {
    display: none;
}

.lang-switch[open] .lang-switch__toggle,
.lang-switch__toggle:hover {
    opacity: 1;
}

.lang-switch__chevron {
    transition: transform 0.2s ease;
}

.lang-switch[open] .lang-switch__chevron {
    transform: rotate(180deg);
}

/* Scoped under .topbar to override the generic `.topbar ul` (flex) and `.topbar a`
   (light text) rules that would otherwise lay the menu out in a row and hide the text. */
.topbar .lang-switch__menu {
    /* Hidden until the <details> is open. Setting `display` here at all is what a
       browser normally does for us, but the generic `.topbar ul { display: flex }`
       rule wins over the UA hiding, so the panel has to be closed explicitly. */
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    width: auto;
    min-width: 190px;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    gap: 0;
    /* Fully opaque: the panel sits over the header, so anything showing through makes
       the language names hard to read. */
    background-color: var(--sp-surface);
    color: var(--sp-text);
    border: 1px solid var(--sp-border);
    border-radius: var(--border-radius);
    box-shadow: var(--sp-shadow-overlay);
    z-index: 1100;
}

.topbar .lang-switch[open] .lang-switch__menu {
    display: block;
}

/* A short settle as the panel appears. @starting-style supplies the "before it
   was rendered" values that an element going from display:none to display:block
   otherwise has no way to transition from; allow-discrete lets the display flip
   itself take part. Browsers without either still open the panel — instantly,
   exactly as before. Reverted by the reduced-motion gate. */
@supports (transition-behavior: allow-discrete) {
    .topbar .lang-switch__menu {
        opacity: 0;
        translate: 0 -4px;
        transition: opacity var(--sp-dur) var(--sp-ease),
                    translate var(--sp-dur) var(--sp-ease),
                    display var(--sp-dur) allow-discrete;
    }

    .topbar .lang-switch[open] .lang-switch__menu {
        opacity: 1;
        translate: none;
    }

    @starting-style {
        .topbar .lang-switch[open] .lang-switch__menu {
            opacity: 0;
            translate: 0 -4px;
        }
    }
}

.topbar .lang-switch__menu li {
    margin: 0;
    width: 100%;
}

.topbar .lang-switch__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: calc(var(--border-radius) - 2px);
    color: var(--sp-text);
    text-decoration: none;
    font-weight: 500;
    opacity: 1;
    white-space: nowrap;
}

.topbar .lang-switch__item:hover,
.topbar .lang-switch__item:focus {
    background: var(--sp-surface-sunken);
    color: var(--sp-text);
    text-decoration: none;
    opacity: 1;
}

.topbar .lang-switch__item.is-active {
    background: var(--sp-surface-sunken);
    font-weight: 700;
}

/* Shipped SVG flags from sitepack-frontend (/images/flags/{size}/{CODE}.svg) */
.lang-switch__flag {
    display: block;
    flex-shrink: 0;
    width: 1.2rem;
    height: auto;
    border-radius: 2px;
}

@media (max-width: 768px) {
    /* Size the whole bar, not just the links: setting this on .topbar__links alone left
       the language switcher and the login link a step larger than their neighbours. */
    .topbar {
        font-size: 0.8rem;
    }

    /* The five utility links do not fit a phone, so the bar keeps just the language
       switcher and the login link. Note the extra class: `.topbar ul` is the more
       specific selector, which is why a bare `.topbar__links { display: none }` was
       silently ignored and the links ended up pushed off the left edge instead. */
    .topbar ul.topbar__links {
        display: none;
    }

    /* Same 1.5rem gutter as `header nav` — with 1rem here the top bar sat 8px wider than
       the header, so "Log in" and the language switcher were visibly out of line with the
       CTA, the hamburger bars and the logo directly beneath them. The two links fit
       comfortably in the narrower space. */
    .topbar__inner {
        padding: 0.5rem 1.5rem;
    }

    /* Language on the left, login on the right. */
    .topbar ul.topbar__meta {
        width: 100%;
        flex: 1 1 auto;
        justify-content: space-between;
        gap: 1rem;
    }

    /* The toggle now sits against the left edge, so the panel has to open leftwards
       from there rather than being right-anchored off-screen. */
    .topbar .lang-switch__menu {
        right: auto;
        left: 0;
    }
}


.product-detail {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    max-width: var(--container-width);
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.product-image-item img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    border: 1px solid var(--sp-border-subtle);
    object-fit: cover;
}

.product-info-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.product-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    flex: 1;
}

.product-price-section {
    text-align: right;
    white-space: nowrap;
}

.product-price-section .price,
.product-price-section .promo-price {
    font-size: 1.25rem;
    font-weight: 400;
    display: block;
}

.product-price-section .advised-price {
    font-size: 0.9rem;
    color: var(--sp-text-subtle);
    text-decoration: line-through;
    font-weight: normal;
    display: block;
}

.product-price-section .promo-price {
    color: var(--sp-danger);
}

.product-meta {
    font-size: 0.9rem;
    color: var(--sp-text-muted);
}

.product-short-description {
    color: var(--sp-text-muted);
}

.product-actions {
    margin-top: 0.5rem;
}

.product-add-to-cart {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
}

/* Quantity + add-to-cart on one aligned row, beneath the variant options. */
.product-buy {
    display: flex;
    align-items: stretch;
    gap: 1rem;
}

.product-add-to-cart .btn-primary {
    flex: 1;
    padding: 1rem;
    font-size: 1.1rem;
}

.product-accordions {
    margin-top: 1rem;
    border-top: 1px solid var(--sp-border-subtle);
}

.product-accordion {
    border-bottom: 1px solid var(--sp-border-subtle);
}

.accordion-header {
    padding: 1rem 0;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

.accordion-header::-webkit-details-marker {
    display: none;
}

.accordion-icon::before {
    content: "+";
    font-size: 1.25rem;
}

.product-accordion[open] .accordion-icon::before {
    content: "−";
}

.accordion-content {
    padding: 0 0 1.5rem 0;
    line-height: 1.6;
}

.product-facets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.facet-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--sp-border-subtle);
}

.facet-label {
    font-weight: 600;
    color: var(--sp-text-muted);
}

.product-recommendations {
    margin-top: 4rem;
}

.product-recommendations h2 {
    margin-bottom: 2rem;
    text-align: center;
}

.product-recommendations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

@media (max-width: 1024px) {
    .product-recommendations-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .product-detail {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .product-image-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        width: 100%;
        cursor: grab;
        user-select: none;
    }

    .product-image-grid.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
        cursor: grabbing;
    }

    .product-image-grid::-webkit-scrollbar {
        display: none;
    }

    .product-image-item {
        flex: 0 0 100%;
        width: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .product-image-item img {
        border-radius: 0;
        border: none;
    }

    .product-header {
        flex-direction: column;
    }

    .product-price-section {
        text-align: left;
    }

    .product-recommendations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .product-recommendations-grid {
        grid-template-columns: 1fr;
    }
}

/* Form Controls */
label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font: inherit;
    color: var(--sp-text);
    background-color: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--border-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-accent) 45%, transparent);
}

textarea {
    resize: vertical;
}

.form-group {
    margin-bottom: 1rem;
}

.product-quantity {
    display: flex;
    width: 90px;
}

.product-quantity input[type="number"] {
    width: 100%;
    text-align: center;
}

/* Cart Styles */
.cart-form table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.cart-form th, .cart-form td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--sp-border);
}

.cart-item-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cart-item-info img {
    max-width: 50px;
    height: auto;
}

.cart-summary {
    text-align: right;
    margin-top: 2rem;
}

.cart-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.checkout-button {
    background: var(--main-color);
    color: var(--main-color-text);
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    display: inline-block;
}

.checkout-button:hover {
    background-color: var(--link-active-color);
}

/* Breadcrumbs */
#breadcrumbs {
    max-width: var(--container-width);
    margin: 1rem auto;
    padding: 0 1.5rem;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0.9rem;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin: 0 0.5rem;
    color: var(--sp-text-disabled);
}

.breadcrumb li a {
    color: var(--link-color);
    text-decoration: none;
}

.breadcrumb li a:hover {
    text-decoration: var(--link-text-decoration);
    color: var(--link-active-color);
}

.breadcrumb li span {
    color: var(--sp-text-muted);
}

.breadcrumb li a span {
    color: inherit;
}

/* Translations Modal */
#translationsModal .modal-body-translations {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
}

#translationsModal .modal-body-translations a {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--sp-header-text);
    border: 1px solid var(--sp-border-subtle);
    border-radius: var(--border-radius);
    transition: background-color 0.2s, border-color 0.2s;
}

#translationsModal .modal-body-translations a:hover {
    background-color: var(--sp-surface-hover);
    border-color: var(--main-color);
    color: var(--main-color);
}

#translationsModal .navigation-flag {
    width: 24px;
    height: auto;
    margin-right: 1rem;
    border-radius: 2px;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--sp-text) 12%, transparent);
}

#translationsModal .language-text {
    font-weight: 500;
}

/* Modal Basic Styling */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--sp-scrim);
    z-index: 2000;
}

.modal.fade.in, .modal.show {
    display: block;
}

.modal-dialog {
    margin: 2rem auto;
    max-width: 500px;
    background: var(--sp-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--sp-shadow-overlay);
}

.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--sp-border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header .close {
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.modal-title {
    margin: 0;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--sp-border-subtle);
    text-align: right;
}

.btn-default {
    background-color: var(--sp-border-subtle);
    border: 1px solid var(--sp-border);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
}

/* Cookie Bar */
#cookiebar {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: var(--sp-surface);
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: var(--sp-shadow-dropdown);
    z-index: 9999;
    max-width: 400px;
}

#cookiebar p {
    margin: 0;
    font-size: 14px;
    color: var(--sp-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    text-align: left;
}

/* Cookie bar "accept" action. Uses the semantic success token rather than a
   green of its own, and the standard 8px control radius. */
.btn-success {
    background-color: var(--sp-success);
    color: var(--sp-surface);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 600;
    transition: filter 0.2s;
    white-space: nowrap;
}

/* Same as .btn-primary above: restate the foreground so `a:hover` cannot take it. */
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    filter: brightness(92%);
    color: var(--sp-surface);
}


/* Icons next to hamburger on mobile; inline on desktop */
.nav-icon {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    /* Show hamburger; keep icons visible */
    .nav-toggle-item {
        display: flex;
        align-items: center;
    }

    /* 44px tap target (the bars stay 22px) — a 34px control is below the comfortable
       minimum for a thumb and this is the only way into the menu on a phone. */
    .nav-toggle {
        width: 44px;
        height: 44px;
        justify-content: center;
        align-items: center;
        margin-left: 0;
        /* The 22px bars sit centred in the 44px target, so the box has to overhang the
           gutter by (44 - 22) / 2 for the bars themselves to land on the same vertical
           line as "Log in" above and the CTA below. */
        margin-right: -11px;
        padding: 6px;
    }

    .nav-toggle span {
        width: 22px;
        height: 2px;
        margin: 2px 0;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .nav-icon {
        width: 40px;
        height: 40px;
        justify-content: center;
    }

    /* Reorder on mobile: Brand (stays 0), Search, Cart, Toggle */
    #nav-search {
        margin-left: auto;
        order: 10;
    }

    #nav-cart {
        order: 11;
    }

    .nav-toggle-item {
        order: 12;
    }

    /* Hide menu links until toggled */
    .nav-link {
        display: none;
        order: 20; /* Ensure links appear after the top bar icons when opened */
    }

    nav ul.menu-open .nav-link {
        display: block;
        width: 100%;
    }

    /* 48px minimum row height so every menu entry is a comfortable tap target, with the
       text aligned to the same gutter as the logo above it. */
    nav ul.menu-open .nav-link a {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0.75rem 0;
        width: 100%;
        border-radius: 0;
    }

    /* Dropdown behavior inside the list: the mega panel collapses back to a
       plain stacked accordion — no absolute positioning, no grid, no tiles. */
    .dropdown > .dropdown-menu {
        position: static;
        display: none;
        grid-template-columns: 1fr;
        gap: 0;
        width: 100%;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 0 0 1.5rem;
        background: var(--sp-surface-hover);
        /* Neutralise the desktop entrance so an accordion row shows instantly. */
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition: none;
    }

    .dropdown > .dropdown-menu::before {
        content: none;
    }

    /* No hover/open underline on the stacked mobile list. */
    .nav-link:not(.nav-cta) > a::after {
        display: none;
    }

    .dropdown.active > .dropdown-menu {
        display: block;
    }

    .dropdown:hover > .dropdown-menu {
        display: none;
    }

    .dropdown.active:hover > .dropdown-menu {
        display: block;
    }

    /* On touch the caret follows the .active accordion state, not :hover. */
    .dropdown:hover .caret,
    .dropdown:focus-within .caret {
        transform: none;
    }

    .dropdown.active .caret {
        transform: rotate(180deg);
    }

    /* Visual grouping for stacked links */
    nav ul.menu-open .nav-link {
        border-bottom: 1px solid var(--sp-border-subtle);
    }

    nav ul.menu-open .nav-link:last-child {
        border-bottom: none;
    }

    /* The CTA is an action, not another menu row: it keeps its pill shape, sits inside
       the gutter rather than bleeding to the edges, and drops the row divider that would
       otherwise cut across it. The generic `.nav-link a` rule above is more specific than
       the base `nav ul li a.btn-primary` pill, so the pill has to be restated here. */
    nav ul.menu-open .nav-cta {
        border-bottom: none;
        padding: 0.5rem 0 0.75rem;
    }

    nav ul.menu-open .nav-cta a.btn-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        width: 100%;
        padding: 0.75rem 1.35rem;
        border-radius: var(--sp-radius-pill);
        text-align: center;
    }
}


/* =========================
   Category Filters
   ========================= */
.category-filters {
    margin: 0;
    padding: 0;
}

.category-filters-title {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Sidebar toggle button spacing */
#sidebar-filter-toggle {
    margin: 0 0 1rem 0;
    display: none;
}

@media (max-width: 992px) {
    .category-filters-title {
        display: none;
    }

    #sidebar-filter-toggle {
        display: block;
    }

    #sidebar-category-filters {
        display: none;
    }

    #sidebar-category-filters.show {
        display: block;
    }
}

/* Basic .btn helpers to support provided markup */
.btn {
    display: inline-block;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    text-decoration: none;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-lg {
    padding: 0.75rem 1rem;
    font-size: 1.05rem;
}

/* Filter card */
.products-filter {
    background: var(--sp-surface);
    border-radius: var(--border-radius);
    margin-bottom: 0.5rem;
}

.products-filter h4 {
    margin: 0;
    padding: 0.5rem 0;
    font-size: 1rem;
}

/* Collapsible header link */
.filter-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    color: inherit;
    text-decoration: none;
}

.filter-link:hover,
.filter-link:focus {
    text-decoration: none;
    color: var(--main-color);
}

.filter-icon {
    margin-left: .5rem;
    display: inline-flex;
    align-items: center;
}

/* Show correct icon depending on collapse state (Bootstrap-like) */
.filter-link .if-opened {
    display: none;
}

.filter-link .if-closed {
    display: inline-flex;
}

.filter-link:not(.collapsed) .if-opened {
    display: inline-flex;
}

.filter-link:not(.collapsed) .if-closed {
    display: none;
}

/* Collapse support (no JS library required for simple default state) */
.collapse {
    display: none;
}

.collapse.in, .collapse.show {
    display: block;
}

/* Filter options list */
.category-filter-options {
    list-style: none;
    padding: 0.25rem 0 0.75rem 0;
    margin: 0;
}

.category-filter-options li {
    margin: 0.25rem 0;
}

.category-filter-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .35rem;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
}

.category-filter-link:hover,
.category-filter-link:focus {
    background: var(--sp-surface-hover);
    color: var(--main-color);
    text-decoration: none;
}

/* Nesting levels */
.category-filter-options .nested-level-0 {
    padding-left: 0;
}

.category-filter-options .nested-level-1 {
    padding-left: 0.75rem;
}

.category-filter-options .nested-level-2 {
    padding-left: 1.5rem;
}

.category-filter-options .nested-level-3 {
    padding-left: 2.25rem;
}

/* Optional: compact icon in links */
.category-filter-link i {
    color: var(--sp-text-disabled);
}

.category-filter-link:hover i {
    color: var(--main-color);
}

/* The account page is rendered by {{ sitepack_account() }}, which ships base styling for
   the canonical .account* classes. Override those classes here to restyle it. */

/* =========================
   Landing Page Template
   ========================= */
.landing-hero {
    padding: var(--sp-section-y) 0;
}

.landing-hero__inner {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
}

.landing-hero__content {
    flex: 1;
}

.landing-hero__title {
    font-size: var(--sp-display-1);
    font-weight: var(--sp-display-weight);
    line-height: 1.03;
    letter-spacing: var(--sp-display-tracking);
    margin: 0 0 1.25rem;
    color: var(--sp-ink);
    text-wrap: pretty;
}

/* The line above the headline. Sentence case, no pill, no uppercase — it is a
   kicker, not a category badge, and it sits under a headline heavy enough that
   it should not compete. */
.landing-hero__sub-head {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--main-color);
}

.landing-hero__text {
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--sp-ink-soft);
    max-width: 46ch;
    margin: 0 0 1.75rem;
}

.landing-hero__content .btn-primary {
    width: auto;
}

.landing-hero__image {
    flex: 1;
}

.landing-hero__image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--sp-shadow-raised);
}

/* Assurance row. The filled tick-in-a-circle is gone theme-wide: it is stock
   iconography, and the brand book deliberately ships no icon set. A short
   accent rule carries the same "confirmed" beat in the brand's own vocabulary. */
.landing-usps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem !important;
    width: auto;
    max-width: none;
}

.landing-usps li {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 1.9rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sp-ink-soft);
}

/* Checkmark disc — see .home-hero__usps for the colour reasoning. */
.landing-usps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--sp-accent) 24%, var(--sp-surface));
}

.landing-usps li::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 4.5px;
    height: 8px;
    border: solid var(--sp-accent-text);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -62%) rotate(45deg);
}

.landing-features {
    padding: var(--sp-section-y) 0;
}

.landing-features__title {
    font-size: var(--sp-display-2);
    font-weight: var(--sp-display-weight);
    line-height: 1.08;
    letter-spacing: var(--sp-display-tracking);
    max-width: 24ch;
    margin: 0 0 2rem;
    color: var(--sp-ink);
    text-wrap: pretty;
}

.landing-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    border-radius: var(--sp-radius-card);
    overflow: hidden;
}

/* A cell in a hairline grid, not a card of its own: the grid supplies the
   border and the dividers, the cell supplies the fill. The accent rule above
   the title is what the partner page uses in place of an icon. */
/* The ring, not a border: adjacent rings overlap across the 1px gap into a
   single divider, and an empty track in a partly-filled last row stays blank
   instead of showing a stray block of the grid's own colour. */
.feature-card {
    padding: clamp(1.5rem, 2.5vw, 2rem);
    background-color: var(--sp-surface);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-card);
    box-shadow: var(--sp-shadow-card);
}

.feature-card::before {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    border-radius: 2px;
    margin-bottom: 1.125rem;
    background: var(--sp-accent);
}

.feature-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--sp-ink);
}

.feature-card__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--sp-ink-soft);
}

@media (max-width: 768px) {
    .landing-hero__inner {
        flex-direction: column;
    }

    .landing-features__grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   404 / Error Page
   ========================= */
.error-404 {
    padding: 4.5rem 0 5.5rem;
}

.error-404__inner {
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
}

/* Top row: the "page not found" message on the left, Packy on the right */
.error-404__top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 3.5rem);
    margin-bottom: 2.5rem;
}

.error-404__message {
    flex: 1 1 0;
    min-width: 0;
    text-align: left;
}

.error-404__message .error-404__text {
    margin-left: 0;
    margin-right: 0;
}

/* Packy mood image: the mascot out searching for the missing page.
   Keeps its own 1200x627 aspect ratio. */
.error-404__packy {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.error-404__packy-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--sp-text) 45%, transparent);
}

/* Stack the message and image on narrow screens */
@media (max-width: 720px) {
    .error-404__top {
        flex-direction: column;
    }

    .error-404__message {
        text-align: center;
    }

    .error-404__message .error-404__hero {
        justify-content: center;
    }

    .error-404__message .error-404__text {
        margin-left: auto;
        margin-right: auto;
    }

    .error-404__packy {
        max-width: 420px;
    }
}

/* Oversized brand code: 4 · owl · 4 */
.error-404__hero {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(0.25rem, 2vw, 1.25rem);
    margin-bottom: 0.5rem;
}

.error-404__digit {
    font-size: clamp(5rem, 13vw, 9rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--main-color) 0%, var(--sp-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.error-404__owl {
    width: clamp(4.5rem, 13vw, 8.5rem);
    height: auto;
    overflow: visible;
}

/* Owl colours follow the store brand */
.owl-body { fill: var(--main-color); }
.owl-belly { fill: color-mix(in srgb, var(--sp-surface) 18%, transparent); }
.owl-wing { fill: color-mix(in srgb, var(--sp-text) 16%, transparent); }
.owl-eye-white { fill: var(--sp-surface); }
.owl-iris { fill: var(--sp-accent); }
.owl-pupil { fill: var(--sp-text); }
.owl-glint { fill: var(--sp-surface); }
.owl-eyelid { fill: var(--main-color); }
.owl-beak { fill: var(--sp-highlight); }
.owl-shadow { fill: color-mix(in srgb, var(--sp-text) 18%, transparent); }

/* Animations: the owl floats, blinks and glances around "looking" for the page */
.error-404__owl .owl {
    transform-box: fill-box;
    transform-origin: center;
    animation: owl-float 4.5s ease-in-out infinite;
}

.error-404__owl .owl-shadow {
    transform-box: fill-box;
    transform-origin: center;
    animation: owl-shadow 4.5s ease-in-out infinite;
}

.error-404__owl .owl-eyelid {
    transform-box: fill-box;
    transform-origin: center top;
    transform: scaleY(0);
    animation: owl-blink 5.5s ease-in-out infinite;
}

.error-404__owl .owl-pupil {
    transform-box: fill-box;
    transform-origin: center;
    animation: owl-look 7s ease-in-out infinite;
}

@keyframes owl-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@keyframes owl-shadow {
    0%, 100% { transform: scaleX(1); opacity: 0.85; }
    50% { transform: scaleX(0.8); opacity: 0.5; }
}

@keyframes owl-blink {
    0%, 42% { transform: scaleY(0); }
    47% { transform: scaleY(1); }
    52%, 100% { transform: scaleY(0); }
}

@keyframes owl-look {
    0%, 12% { transform: translateX(0); }
    22%, 38% { transform: translateX(-7px); }
    50%, 66% { transform: translateX(7px); }
    78%, 100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .error-404__owl .owl,
    .error-404__owl .owl-shadow,
    .error-404__owl .owl-pupil {
        animation: none;
    }

    .error-404__owl .owl-eyelid {
        animation: none;
        transform: scaleY(0);
    }
}

.error-404__title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    margin: 0.5rem 0 0.75rem;
    color: var(--sp-text);
}

.error-404__text {
    color: var(--sp-text-muted);
    max-width: 42ch;
    margin: 0 auto 2.25rem;
}

/* Search */
.error-404__search {
    max-width: 480px;
    margin: 0 auto 2.5rem;
}

.error-404__search-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sp-text-subtle);
    margin-bottom: 0.6rem;
}

/* Live-search field on the 404: the platform emits a fixed
   .sitepack-live-search-* structure with no styling of its own, so give it the
   same surface/border/focus language as the contact-form inputs, with the icon
   set inside the field and a card for the results dropdown. */
.error-404__search .sitepack-live-search-container {
    position: relative;
}

.error-404__search .sitepack-live-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.error-404__search .sitepack-live-search-input {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 2.9rem;
    font: inherit;
    color: var(--sp-text);
    background-color: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--sp-text) 6%, transparent);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.error-404__search .sitepack-live-search-input:focus {
    outline: none;
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-accent) 45%, transparent);
}

.error-404__search .sitepack-live-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    width: 1.1rem;
    height: 1.1rem;
    pointer-events: none;
    opacity: 0.55;
}

.error-404__search .sitepack-live-search-icon img {
    width: 100%;
    height: 100%;
}

/* Results dropdown: a floating card that matches the input's surface */
.error-404__search .sitepack-live-search-results-dropdown {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin-top: 0.4rem;
    text-align: left;
    background-color: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--border-radius);
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--sp-text) 45%, transparent);
    overflow: hidden;
}

.error-404__search .sitepack-live-search-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    color: var(--sp-text);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--sp-border) 60%, transparent);
}

.error-404__search .sitepack-live-search-result-item:last-child {
    border-bottom: 0;
}

.error-404__search .sitepack-live-search-result-item:hover,
.error-404__search .sitepack-live-search-result-item:focus {
    background-color: color-mix(in srgb, var(--main-color) 8%, transparent);
}

.error-404__search .sitepack-live-search-result-image {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.error-404__search .sitepack-live-search-result-title {
    display: block;
    font-weight: 600;
}

.error-404__search .sitepack-live-search-result-price {
    color: var(--sp-text-muted);
    font-size: 0.9rem;
}

.error-404__search .sitepack-live-search-no-results,
.error-404__search .sitepack-live-search-loading {
    padding: 0.9rem;
    text-align: center;
    color: var(--sp-text-muted);
}

/* Actions */
.error-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 3rem;
}

.error-404__actions .btn-primary,
.error-404__actions .btn-outline {
    width: auto;
    border-radius: var(--sp-radius-pill);
    padding: 0.8rem 1.9rem;
}

/* Outline button variant (pairs with the brand pill primary) */
.btn-outline {
    display: inline-block;
    background: transparent;
    color: var(--main-color);
    border: 2px solid var(--main-color);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-outline:hover,
.btn-outline:focus {
    background: var(--main-color);
    color: var(--main-color-text);
    text-decoration: none;
}

/* Popular links */
.error-404__links {
    border-top: 1px solid var(--sp-border);
    padding-top: 1.75rem;
}

.error-404__links-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sp-text-muted);
    margin-bottom: 0.9rem;
}

.error-404__links ul {
    /* override core `ul { width: 100%; margin: 0 auto !important }` */
    margin: 0 !important;
    width: auto;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.75rem;
}

.error-404__links a {
    color: var(--main-color);
    font-weight: 600;
    text-decoration: none;
}

.error-404__links a:hover,
.error-404__links a:focus {
    text-decoration: underline;
}

/* =========================================================================
   Content hub templates (pillar / sub-hub / supporting content)
   Shared modules M1-M11
   ========================================================================= */

/* The .hub wrapper is the single direct child of <main>, which the core
   stylesheet auto-constrains to the container width with a 1.5rem gutter.
   That double-wraps every inner .container-element (shifting content in by an
   extra gutter — so it no longer lines up with the header logo) and clips the
   full-bleed section backgrounds (CTA band, muted sections). Let the hub span
   the full width and hand the centring back to the inner .container-element
   wrappers, which already carry the max-width and gutter. */
main > .hub {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.hub-breadcrumb {
    padding-top: 1.25rem;
}

/* sitepack_breadcrumbs() outputs <nav id="breadcrumbs"> with its own gutter.
   Inside the hub the wrapping .container-element already supplies it, so drop the
   inner one — otherwise the breadcrumb sits a gutter to the right of everything
   else (and the logo). */
.hub-breadcrumb > nav,
.hub-breadcrumb #breadcrumbs {
    padding-left: 0;
    padding-right: 0;
}

/* M2 Hero
   Two registers. The plain .hub-hero is a marketing opener (pricing, pillar
   hubs, the homepage fallback) and runs the full display scale. The --compact
   modifier is what the utility pages use (search, account, tag, products,
   leaf content), where a 66px headline over "12 results" would be absurd. */
.hub-hero {
    padding: var(--sp-section-y) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.hub-hero--compact {
    padding: var(--sp-section-y-sm) 0 0.75rem;
}

.hub-hero__title {
    font-size: var(--sp-display-1);
    font-weight: var(--sp-display-weight);
    line-height: 1.03;
    letter-spacing: var(--sp-display-tracking);
    margin: 0 0 1.25rem;
    max-width: 20ch;
    color: var(--sp-ink);
    text-wrap: pretty;
}

.hub-hero--compact .hub-hero__title {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    max-width: 26ch;
}

/* The phrase the page is actually about, lifted out of the headline in the
   brand's marketing accent — the treatment the partner hero uses. */
.hub-hero__accent {
    color: var(--sp-highlight);
}

.hub-hero__intro {
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--sp-ink-soft);
    max-width: 58ch;
    margin: 0 0 1.5rem;
}

.hub-hero__cta {
    width: auto;
    border-radius: var(--sp-radius-pill);
    padding: 0.8rem 1.9rem;
}

.hub-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Optional hero image, used by the platform and made-in-europe templates. It sits in
   the right column of the shared two-column split hero, opposite the copy, as a 4:3
   figure carrying the theme's card rounding, hairline and raised shadow, so it reads
   like every other panel and recolours with the palette. */
.hub-hero__figure {
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--sp-radius-card);
    overflow: hidden;
    background: var(--sp-surface);
    border: 1px solid var(--sp-line);
    box-shadow: var(--sp-shadow-raised);
}

.hub-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Optional intro image on the pillar-hub template (see pillar-hub.twig). When set, the
   M11 intro section becomes two columns: the heading and prose on the left, the image
   on the right. Without the --split modifier the inner is a plain block, so the intro
   keeps its original full-width single column. */
.hub-intro--split .hub-intro__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.hub-intro__figure {
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--sp-radius-card);
    overflow: hidden;
    background: var(--sp-surface);
    border: 1px solid var(--sp-line);
    box-shadow: var(--sp-shadow-raised);
}

.hub-intro__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Below the tablet breakpoint the two columns stack, image under the copy. */
@media (max-width: 880px) {
    .hub-intro--split .hub-intro__inner {
        grid-template-columns: 1fr;
        gap: clamp(1.75rem, 5vw, 2.5rem);
    }
}

/* --- Split hero ----------------------------------------------------------
   The two-column opener used on pillar and comparison pages, mirroring the
   homepage hero: the promise on the left, the payoff at a glance on the right.
   The wash and the panel are what turn the old single column — which left a
   wide empty half — into a composed hero. Only added when the page carries
   benefits (see the template), so the grid never has a lone child. */
.hub-hero--split {
    position: relative;
    overflow: hidden;
}

/* Two soft brand washes, the same recipe as the homepage hero: sky blue rising
   on the right where the panel sits, navy barely tinting the left. Mixed
   against transparent so they carry no colour of their own. */
.hub-hero--split::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 70% at 82% 18%,
            color-mix(in srgb, var(--sp-accent) 24%, transparent), transparent 70%),
        radial-gradient(45% 55% at 8% 12%,
            color-mix(in srgb, var(--main-color) 7%, transparent), transparent 70%);
    pointer-events: none;
}

.hub-hero--split .hub-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

/* The headline is one column now, so it can run tighter than the 20ch of the
   full-width variant without leaving the copy cramped. */
.hub-hero--split .hub-hero__title {
    max-width: 18ch;
}

.hub-hero--split .hub-hero__intro {
    margin-bottom: 1.75rem;
}

/* Breadcrumb opening the hero from inside it, sitting on the wash above the
   heading. Its own top space comes from the hero's reduced top padding
   (.hub--pillar .hub-hero below), and it holds a gap before the heading. */
.hub-hero__breadcrumb {
    position: relative;
    z-index: 1;
    padding-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* sitepack_breadcrumbs() brings its own gutter; the wrapping container-element
   already supplies it, so drop the inner one (same fix as .hub-breadcrumb). */
.hub-hero__breadcrumb > nav,
.hub-hero__breadcrumb #breadcrumbs {
    padding-left: 0;
    padding-right: 0;
}

/* With the breadcrumb now opening the hero, the big marketing top padding would
   push everything down and re-open the gap it was meant to close, so the pillar
   hero starts tighter. Scoped to the pillar hub — the plain .hub-hero on pricing
   and the utility pages keeps its own rhythm. */
.hub--pillar .hub-hero {
    padding-top: clamp(1rem, 2.5vw, 1.75rem);
}

/* Right column: a branded card that restates the top benefits as a checklist.
   Brand fill and flipped ink come from .sp-dark in the markup, so it needs no
   dark twin of its own — the same mechanism the homepage contrast column uses. */
.hub-hero__panel {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--sp-radius-card);
    box-shadow: var(--sp-shadow-raised);
    /* A hairline in the flipped ink lifts the navy panel off the wash and gives
       its rounded corner a crisp edge rather than only a soft shadow. */
    border: 1px solid var(--sp-line);
    /* Keeps a long benefit title from stretching the grid column. */
    min-width: 0;
}

.hub-hero__panel-label {
    display: block;
    margin-bottom: 1.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Soft sky-blue on the navy panel — the accent carries more life than a flat
       muted grey, and it echoes the homepage eyebrows without being a badge. */
    color: color-mix(in srgb, var(--sp-accent) 75%, var(--main-color-text));
}

.hub-hero__checklist {
    list-style: none;
    padding: 0;
    /* Core CSS applies `ul { width: 100%; margin: 0 auto !important }`. */
    margin: 0 !important;
    width: auto;
    max-width: none;
    display: grid;
    gap: 0.9rem;
}

.hub-hero__checklist li {
    position: relative;
    padding-left: 1.9rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sp-ink);
}

/* Tick drawn as two borders on a rotated box — no icon font, no SVG — in the
   brand's amber accent so it reads on the navy panel. */
.hub-hero__checklist li::before {
    content: "";
    position: absolute;
    left: 0.2rem;
    top: 0.35em;
    width: 11px;
    height: 6px;
    border: 2px solid var(--sp-highlight);
    border-top: 0;
    border-right: 0;
    border-radius: 1px;
    transform: rotate(-45deg);
}

/* Below the tablet breakpoint the two columns stack; the panel keeps its place
   under the copy and reads as a summary card. */
@media (max-width: 880px) {
    .hub-hero--split .hub-hero__inner {
        grid-template-columns: 1fr;
        gap: clamp(1.75rem, 5vw, 2.5rem);
    }

    .hub-hero--split .hub-hero__title {
        max-width: 22ch;
    }
}

/* Generic section rhythm. Fluid, so the gap between sections grows with the
   viewport instead of holding one fixed step at every width. */
.hub-section {
    padding: var(--sp-section-y) 0;
}

.hub-section--muted {
    background: var(--sp-surface-sunken);
    border-top: 1px solid var(--sp-border-subtle);
}

/* A compact section for utility pages, where the marketing rhythm is too airy. */
.hub-section--tight {
    padding: var(--sp-section-y-sm) 0;
}

.hub-section__title {
    font-size: var(--sp-display-2);
    font-weight: var(--sp-display-weight);
    line-height: 1.08;
    letter-spacing: var(--sp-display-tracking);
    margin: 0 0 1.5rem;
    max-width: 24ch;
    color: var(--sp-ink);
    text-wrap: pretty;
}

/* Lede paragraph under a section heading — the counterpart to .hub-hero__intro
   one level down. */
.hub-section__lede {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--sp-ink-soft);
    max-width: 62ch;
    margin: -0.75rem 0 1.75rem;
}

/* --- Jump navigation -----------------------------------------------------
   A sticky row of in-page links for the long marketing pages. It is a plain
   <nav> of anchors: it works with JavaScript off, and the script only adds the
   active state. Deliberately hidden below the tablet breakpoint — a sticky bar
   on a phone costs more screen than the navigation it saves. */
.hub-jumpnav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--sp-surface) 88%, transparent);
    border-bottom: 1px solid var(--sp-border-subtle);
    backdrop-filter: blur(8px);
}

@media (max-width: 760px) {
    .hub-jumpnav {
        display: none;
    }
}

.hub-jumpnav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.75rem;
    list-style: none;
    margin: 0 auto !important;
    padding: 0.875rem 1.5rem;
    max-width: var(--container-width);
}

.hub-jumpnav a {
    display: block;
    padding: 0.15rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sp-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--sp-dur) var(--sp-ease),
                border-color var(--sp-dur) var(--sp-ease);
}

.hub-jumpnav a:hover,
.hub-jumpnav a:focus {
    color: var(--sp-text);
    text-decoration: none;
}

.hub-jumpnav a.is-active {
    color: var(--sp-text);
    border-bottom-color: var(--sp-accent);
}

/* Anchor targets have to clear the sticky bar, or a jump link lands with the
   section heading hidden behind it. */
.hub [id] {
    scroll-margin-top: 4.5rem;
}

html {
    scroll-behavior: smooth;
}

/* --- Scroll reveal -------------------------------------------------------
   A short fade-and-rise as a section arrives. Two implementations, one
   behaviour: browsers with scroll-driven animations run it entirely in CSS,
   the rest get the same thing from an IntersectionObserver in theme.js which
   adds .is-revealed. Both are switched off by the reduced-motion gate at the
   top of this file.

   Only whole sections animate, never individual cards. A grid whose cells
   arrive one at a time is the most over-used effect on the web, and staggering
   them makes the reader wait on decoration before they can read.

   Everything here is scoped under .sp-motion, which theme.js puts on <html>.
   Content is never hidden by a stylesheet that might be the only thing that
   loads: with JavaScript off, or with reduced motion requested, the class is
   absent and every section renders plainly. */
.sp-motion .sp-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--sp-dur-slow) var(--sp-ease),
                transform var(--sp-dur-slow) var(--sp-ease);
}

.sp-motion .sp-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* Where scroll-driven animations exist the browser owns the timeline and the
   observer in theme.js never runs. */
@supports (animation-timeline: view()) {
    .sp-motion .sp-reveal {
        opacity: 1;
        transform: none;
        transition: none;
        animation: sp-rise linear both;
        animation-timeline: view();
        /* Runs as the section's top edge enters and is finished well before the
           reader's eye arrives at the content. */
        animation-range: entry 0% cover 20%;
    }
}

@keyframes sp-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* --- Shared marketing primitives ----------------------------------------
   The three shapes the partner page leans on, hoisted out of it so every
   template can use them. They are deliberately separate declarations from the
   .pp-* originals rather than shared selectors: the partner page is signed off
   and frozen, so nothing here can reach it.

   All three read the ink context, so they work on white, sunken and brand
   sections without a variant. */

/* A short coloured rule above a title. Replaces the uppercase eyebrow label —
   it does the same job (signals "a new thing starts here") without the
   letter-spaced small caps that read as template filler. */
.sp-rule {
    display: block;
    width: 34px;
    height: 4px;
    border-radius: 2px;
    background: var(--sp-accent);
}

.sp-rule--highlight {
    width: 30px;
    background: var(--sp-highlight);
}

.sp-rule--quiet {
    background: var(--sp-line);
}

/* Em-dash list. The brand book ships no icon set, and a bought-in tick icon is
   the single most recognisable generated-page tell, so lists carry a typographic
   mark instead. */
.sp-dashlist {
    list-style: none;
    margin: 0.875rem 0 0 !important;
    padding: 0;
    width: auto;
    max-width: none;
}

.sp-dashlist li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.35rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--sp-ink-soft);
}

.sp-dashlist li::before {
    content: "\2014";
    position: absolute;
    left: 0;
    color: var(--sp-ink-faint);
}

/* Hairline grid: cells separated by a 1px gap, so the block reads as one thing
   with internal divisions rather than as N floating cards.

   The 1px lines come from a ring on each *cell*, not from a background on the
   container. Painting the container was the obvious way to do it and is wrong:
   the moment the last row is not full — three steps in a four-column grid, four
   features in a three-column one — the container's colour shows through the
   empty tracks as a stray grey block. With a ring per cell, adjacent rings
   overlap into a single 1px divider and empty tracks simply show nothing.

   The container keeps the radius and the clip, so a full grid still has rounded
   outer corners. */
.sp-hairline-grid {
    display: grid;
    gap: 1px;
    border-radius: var(--sp-radius-card);
    overflow: hidden;
}

.sp-hairline-grid > * {
    background: var(--sp-cell-bg);
    box-shadow: 0 0 0 1px var(--sp-line);
}

.sp-hairline-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sp-hairline-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sp-hairline-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .sp-hairline-grid--3,
    .sp-hairline-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .sp-hairline-grid--2,
    .sp-hairline-grid--3,
    .sp-hairline-grid--4 {
        grid-template-columns: 1fr;
    }
}

/* Two-column marketing split: text on one side, a block on the other. Stacks
   below the tablet breakpoint. */
.sp-split {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

.sp-split--wide-left {
    grid-template-columns: 1.05fr 0.95fr;
}

@media (max-width: 860px) {
    .sp-split,
    .sp-split--wide-left {
        grid-template-columns: 1fr;
    }
}

/* Translucent panel on a brand surface (and a tinted one on a light surface).
   Reads as a card without competing with the real content cards, because it
   carries an inset ring instead of a shadow. */
.sp-panel {
    background: var(--sp-veil);
    border-radius: var(--sp-radius-card);
    padding: clamp(1.5rem, 2.5vw, 2.125rem);
    box-shadow: inset 0 0 0 1px var(--sp-line);
}

/* Prose / intro body (M11) */
.hub-prose {
    color: var(--sp-text-body);
    line-height: 1.7;
    max-width: 72ch;
    white-space: pre-line; /* preserve line breaks from textarea fields without nl2br */
}

.hub-prose p {
    margin: 0 0 1rem;
}

.hub-list {
    color: var(--sp-text-body);
    line-height: 1.7;
    max-width: 72ch;
    padding-left: 1.25rem;
    margin: 1rem 0 0 !important;
}

.hub-list li {
    margin: 0.35rem 0;
}

/* Direct-answer callout (snippet / AI friendly) */
/* The short answer, directly under the section heading. Not a callout box: a
   filled panel says "aside, read later", while this is the one paragraph that
   answers the heading and should be read first. So it is set as a standfirst
   instead. A rule across the top opens it, with a short accent segment sitting
   on that rule, the label sits in the margin column, and the answer itself is
   the largest body text on the page. Nothing is filled, so it carries no grey
   block and stays readable on a dark section, where the tokens flip. */
.hub-answer {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
    gap: clamp(0.75rem, 2.5vw, 2rem);
    border-top: 1px solid var(--sp-line);
    padding-top: clamp(1rem, 2vw, 1.35rem);
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    /* Wider than the prose that follows: the answer is set larger, so it needs
       the extra room to keep a readable line length of roughly 60 characters. */
    max-width: 50rem;
}

/* The accent segment: a thicker piece of the top rule, over its first stretch. */
.hub-answer::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: clamp(2.5rem, 9rem, 20%);
    height: 3px;
    background: var(--sp-accent);
    border-radius: 3px;
}

/* Sentence case, not letter-spaced small caps. The rule and the margin column
   already mark this block as different; an uppercase label on top of that is
   the third signal doing the first one's job. */
.hub-answer__label {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--sp-ink-muted);
    font-weight: 600;
    padding-top: 0.35rem;
}

.hub-answer p {
    margin: 0;
    color: var(--sp-ink);
    font-size: clamp(1.15rem, 1.6vw, 1.375rem);
    line-height: 1.55;
    letter-spacing: -0.005em;
    white-space: pre-line;
    text-wrap: pretty;
}

/* Below the two-column width the label goes back on top, where it reads as a
   caption rather than a stranded column. */
@media (max-width: 720px) {
    .hub-answer {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .hub-answer__label {
        padding-top: 0;
    }
}

/* M3 Feature grid (reuses .feature-card)
   Separate rounded, elevated cards with a gap between them — the same card
   treatment the homepage value grid uses, so every benefits block across the
   theme reads the same. Same markup; the look lives in these rules and in
   .feature-card above. */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 900px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* Match the track count to the number of cells actually present. A pillar hub
   with three steps in a four-column grid, or two benefits in a three-column
   one, otherwise ends the block two-thirds of the way across the container and
   reads as though something failed to load.

   Above the tablet breakpoint only: below it the media queries already collapse
   these grids, and a :has() rule would outrank them on specificity. */
@media (min-width: 901px) {
    .feature-grid:has(> :last-child:nth-child(1)),
    .steps:has(> :last-child:nth-child(1)) {
        grid-template-columns: 1fr;
    }

    .feature-grid:has(> :last-child:nth-child(2)),
    .steps:has(> :last-child:nth-child(2)) {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps:has(> :last-child:nth-child(3)) {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* M5 Steps
   Same hairline block as the feature grid. The filled navy numbered circle is
   gone: it is one of the most recognisable stock-template shapes there is, and
   the partner page already established the alternative — the number set small
   in the accent colour, carrying no decoration of its own. */
.steps {
    list-style: none;
    margin: 0 !important;
    padding: 0;
    width: auto;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 900px) {
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .steps {
        grid-template-columns: 1fr;
    }
}

/* Same elevated card as the feature grid, matching the homepage steps. */
.step {
    padding: clamp(1.5rem, 2.5vw, 2rem);
    background: var(--sp-surface);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-card);
    box-shadow: var(--sp-shadow-card);
}

/* Zero-padded so the sequence reads as a sequence (01 02 03 04) rather than as
   four unrelated digits. The counter comes from the markup, not from CSS
   counters, because the snippet already emits loop.index. */
.step__num {
    display: block;
    margin-bottom: 1rem;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: color-mix(in srgb, var(--sp-accent) 24%, var(--sp-surface));
}

.step__num::before {
    content: "0";
}

/* Past nine the zero-padding is wrong, so drop it. :nth-child works on the
   <li>, which is why the selector reaches back up from the number. */
.step:nth-child(n + 10) .step__num::before {
    content: none;
}

.step__title {
    margin: 0 0 0.35rem;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--sp-ink);
}

.step__text {
    margin: 0;
    color: var(--sp-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.65;
}

/* M4 Comparison / cost table
   Long tables lose their heading the moment you scroll, and on a phone the
   horizontal scroll loses the row label too. Both rows and the first column
   stick, so you always know what you are looking at. */
/* Horizontal scroll only: a max-height here would turn this into a vertical
   scroll container too, and the payments rate table is long enough that boxing
   it would be worse than letting the page scroll. */
.compare-table__wrap {
    overflow-x: auto;
    border: 1px solid var(--sp-border-subtle);
    border-radius: var(--sp-radius-card);
    background: var(--sp-surface);
    box-shadow: var(--sp-shadow-card);
}

.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 480px;
}

.compare-table th,
.compare-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--sp-border-subtle);
}

/* Value columns are centred under their heading; only the first (label) column
   stays left-aligned. This is the shared look every feature/spec table on the
   site now uses. */
.compare-table th:not(:first-child),
.compare-table td:not(:first-child) {
    text-align: center;
}

/* Light header bar with dark ink — the neutral head the design leads with. Only
   an emphasised column (below) fills with the brand colour, so the eye lands on
   the recommended plan rather than on the whole header. */
.compare-table thead th {
    background: var(--sp-surface-sunken);
    color: var(--sp-ink);
    font-weight: 700;
    vertical-align: bottom;
}

/* The row label. Sticky on the inline axis so it survives horizontal scroll;
   the divider is a box-shadow rather than a border because a border on a
   sticky cell scrolls away with the cell's own box. */
.compare-table th:first-child,
.compare-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--sp-surface);
    font-weight: 600;
    color: var(--sp-text);
    box-shadow: 1px 0 0 var(--sp-border-subtle);
}

.compare-table thead th:first-child {
    z-index: 2;
    background: var(--sp-surface-sunken);
    color: var(--sp-ink);
}

/* Row highlight on hover. No zebra striping — the design keeps the body clean
   and lets the emphasised column and the row borders carry the structure. */
.compare-table tbody tr:hover td,
.compare-table tbody tr:hover th {
    background: color-mix(in srgb, var(--sp-surface-hover) 70%, var(--sp-surface));
}

/* Comparison tables on a pillar/comparison page carry three columns: the
   category, SitePack, and the competitor. Giving all three a brand-coloured
   header made the competitor column look endorsed too. Here the header is a
   neutral bar and only the SitePack column keeps the brand fill, so the eye
   lands on the column the page is arguing for. Scoped to three-column tables
   inside a pillar hub, so the two-column capability and price tables elsewhere
   keep their single filled header. */
.hub--pillar .compare-table:has(th:nth-child(3)) thead th {
    background: var(--sp-surface-sunken);
    color: var(--sp-text);
}

.hub--pillar .compare-table:has(th:nth-child(3)) thead th:first-child {
    background: var(--sp-surface-sunken);
    color: var(--sp-text);
}

.hub--pillar .compare-table:has(th:nth-child(3)) thead th:nth-child(2) {
    background: var(--main-color);
    color: var(--main-color-text);
}

/* A quiet brand tint down the SitePack column body, ending in a soft rule on
   each side so it reads as one highlighted column rather than a stray cell.
   Kept above the zebra and hover rules by being more specific than either. */
.hub--pillar .compare-table:has(td:nth-child(3)) tbody td:nth-child(2),
.hub--pillar .compare-table:has(td:nth-child(3)) tbody tr:nth-child(even) td:nth-child(2),
.hub--pillar .compare-table:has(td:nth-child(3)) tbody tr:hover td:nth-child(2) {
    background: color-mix(in srgb, var(--main-color) 6%, var(--sp-surface));
    color: var(--sp-text);
    font-weight: 600;
}

/* M9 Pricing block
   The single-plan counterpart to .plan--featured on the pricing page, and given
   the same treatment: filled with the brand colour rather than outlined in it,
   and left-aligned. Centred text in a bordered box was the last module still
   speaking the old language — it is the shape every template pricing block has,
   and it made the one price on a pillar hub look like a stock component. */
.pricing-card {
    max-width: 420px;
    margin: 0 auto;
    border-radius: var(--sp-radius-card);
    padding: 2rem 1.75rem;
    background: var(--main-color);
    box-shadow: var(--sp-shadow-raised);
    --sp-ink: var(--main-color-text);
    --sp-ink-soft: color-mix(in srgb, var(--main-color-text) 78%, transparent);
    --sp-ink-muted: color-mix(in srgb, var(--main-color-text) 62%, transparent);
    --sp-line: color-mix(in srgb, var(--main-color-text) 16%, transparent);
}

.pricing-card__name {
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--sp-ink);
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.pricing-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.pricing-card__currency {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--sp-ink);
}

.pricing-card__amount {
    font-size: 3rem;
    font-weight: var(--sp-display-weight);
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--sp-ink);
    font-variant-numeric: tabular-nums;
}

.pricing-card__period {
    color: var(--sp-ink-muted);
    font-weight: 500;
    font-size: 0.9375rem;
}

.pricing-card__features {
    list-style: none;
    margin: 0 0 1.5rem !important;
    padding: 0;
    width: auto;
    max-width: none;
}

.pricing-card__features li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    border-bottom: 1px solid var(--sp-line);
    color: var(--sp-ink-soft);
    font-size: 0.9375rem;
}

/* Same accent dash as .plan__feature — no tick glyphs anywhere in the theme. */
.pricing-card__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.05em;
    width: 10px;
    height: 3px;
    border-radius: 2px;
    background: var(--sp-accent);
}

/* Inverted on the filled card, the same way .plan--featured's CTA is. */
.pricing-card__cta {
    display: block;
    width: 100%;
    padding: 0.95rem 1rem;
    border-radius: var(--border-radius);
    text-align: center;
    font-weight: 600;
    background: var(--main-color-text);
    color: var(--main-color);
}

.pricing-card__cta:hover,
.pricing-card__cta:focus {
    background: var(--main-color-text);
    color: var(--main-color);
    filter: brightness(0.94);
}

/* M10 Internal-link cards (silo / underlying / related) */
.link-cards {
    list-style: none;
    margin: 0 !important;
    padding: 0;
    width: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.link-cards--compact {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .link-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .link-cards {
        grid-template-columns: 1fr;
    }
}

.link-card {
    margin: 0;
}

/* Navigation, not content: these point elsewhere, so they stay flat and let the
   real content cards on the page carry the elevation. The hover moves the arrow
   rather than the whole card — it reads as "this goes somewhere" instead of the
   generic lift every card on every template does. */
.link-card__link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    padding: 1.375rem 1.5rem;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-card);
    background: var(--sp-cell-bg);
    text-decoration: none;
    transition: border-color var(--sp-dur) var(--sp-ease),
                background var(--sp-dur) var(--sp-ease);
}

.link-card__link:hover,
.link-card__link:focus {
    border-color: var(--sp-accent);
    background: var(--sp-surface-hover);
    text-decoration: none;
}

.link-card__title {
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.012em;
    color: var(--sp-ink);
}

.link-card__desc {
    color: var(--sp-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.link-card__arrow {
    color: var(--sp-accent);
    font-weight: 700;
    margin-top: auto;
    padding-top: 0.5rem;
    transition: transform var(--sp-dur) var(--sp-ease);
}

.link-card__link:hover .link-card__arrow,
.link-card__link:focus .link-card__arrow {
    transform: translateX(4px);
}

/* M8 Social proof */
.proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .proof-grid {
        grid-template-columns: 1fr;
    }
}

/* A quote is already a strong shape on its own; boxing it just makes it look
   like the six boxes above it. The accent rule marks it instead. */
.proof-card {
    margin: 0;
    padding: 0 0 0 1.5rem;
    border-left: 3px solid var(--sp-accent);
    background: transparent;
}

.proof-card__quote {
    margin: 0 0 0.875rem;
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.012em;
    color: var(--sp-ink);
    text-wrap: pretty;
}

.proof-card__author {
    color: var(--sp-ink-muted);
    font-weight: 600;
    font-size: 0.9375rem;
}

/* M7 FAQ accordion
   Hairline rows instead of a stack of individual shadowed cards. Six questions
   are one list, not six objects — and the shadowed-card version made the FAQ
   compete visually with the plan cards further up the same page.

   The measurements below are the ones the partner-page design handoff already
   specified for its FAQ (1px top rule, 20px 0 padding, 19px/700 summary, an
   accent-coloured marker, 15px/1.7 answer). That page includes this same
   module, so it was rendering its FAQ as shadowed cards against its own signed
   -off design; matching the spec here fixes that too. */

/* The FAQ runs at a narrower, centred measure than the rest of the page —
   questions and answers are short, and a full container width leaves the
   marker stranded metres from its question. Narrowing the wrapper rather than
   the list keeps the heading over the same column as the rows, which is what
   makes it read as one centred block instead of a centred list under a
   full-width title.

   The partner page already did this locally; it is the default now, so every
   template that includes the module gets the same treatment. */
/* Pale accent wash so the white question cards read as cards, tinted cool blue
   from the accent token rather than a flat neutral grey. */
.faq-section {
    background: color-mix(in srgb, var(--sp-accent) 7%, var(--sp-surface));
}

.faq-section .container-element {
    max-width: 55rem;
}

/* Centred heading over the stack of cards. */
.faq-section .hub-section__title {
    max-width: none;
    margin-inline: auto;
    text-align: center;
}

.faq {
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1rem);
}

/* Each question is its own card — white panel, hairline, soft shadow, rounded —
   so the list reads as a stack of cards rather than a divided column. The card
   carries the horizontal padding; the summary and answer carry the vertical. */
.faq-item {
    background: var(--sp-surface);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-card);
    box-shadow: var(--sp-shadow-card);
    padding: 0 clamp(1.25rem, 3vw, 1.75rem);
}

.faq-item__q {
    cursor: pointer;
    list-style: none;
    padding: 1.25rem 0;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--sp-ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: color var(--sp-dur) var(--sp-ease);
}

/* Open question takes the accent, deepened against the ink so it stays legible
   as a heading on white. */
.faq-item[open] .faq-item__q {
    color: color-mix(in srgb, var(--sp-accent) 72%, var(--sp-ink));
}

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

.faq-item__q::after {
    content: "+";
    color: color-mix(in srgb, var(--sp-ink) 45%, transparent);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    flex-shrink: 0;
    transition: transform var(--sp-dur) var(--sp-ease), color var(--sp-dur) var(--sp-ease);
}

.faq-item[open] .faq-item__q::after {
    content: "\2212";
    color: color-mix(in srgb, var(--sp-accent) 72%, var(--sp-ink));
}

.faq-item__q:hover::after {
    color: color-mix(in srgb, var(--sp-accent) 72%, var(--sp-ink));
    transform: scale(1.15);
}

.faq-item__a {
    padding: 0 0 1.5rem;
    max-width: 68ch;
    font-size: 0.9375rem;
    color: var(--sp-ink-soft);
    line-height: 1.7;
}

/* A real open/close animation rather than a jump. <details> only became
   animatable with interpolate-size (height: auto interpolation) plus
   transition-behavior (so the discrete `content-visibility` flip waits for the
   transition instead of firing immediately). Where either is missing the
   accordion still opens — just instantly, exactly as before. */
@supports (interpolate-size: allow-keywords) and (transition-behavior: allow-discrete) {
    /* Opts the document into interpolating to/from `auto` sizes. Without it
       `block-size: auto` is still a discrete jump, animation or not. */
    :root {
        interpolate-size: allow-keywords;
    }

    .faq-item::details-content {
        block-size: 0;
        overflow: hidden;
        opacity: 0;
        transition: block-size var(--sp-dur-slow) var(--sp-ease),
                    opacity var(--sp-dur) var(--sp-ease),
                    content-visibility var(--sp-dur-slow) allow-discrete;
    }

    .faq-item[open]::details-content {
        block-size: auto;
        opacity: 1;
    }
}

/* M6 CTA band
   The close on every template: a centred navy card, title + text + buttons
   stacked and centred inside a rounded panel with a soft accent glow. Background
   and ink context come from the .sp-dark rule near the top of this file, which
   lists .cta-band__inner alongside it, so the card carries the flipped (white)
   ink and the buttons need no dark variant of their own. */
.cta-band {
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.cta-band__inner {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
    padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
    border-radius: clamp(20px, 2.5vw, 32px);
    /* Atmosphere photo behind the card, handed in per include as --cta-band-image
       (see hub-cta-band.twig). It sits under a near-opaque navy wash mixed from the
       card's own --main-color so the white title, text and buttons stay readable and
       the band keeps its brand colour whatever the merchant sets. The navy
       background-color from the .sp-dark rule above shows through if the image is
       missing, so the band degrades cleanly to its plain navy self. */
    background-image:
        linear-gradient(
            color-mix(in srgb, var(--main-color) 82%, transparent),
            color-mix(in srgb, var(--main-color) 82%, transparent)
        ),
        var(--cta-band-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Soft accent glow in the upper corner, clipped by the card's overflow. Purely
   decorative and carries no colour of its own beyond the accent token. */
.cta-band__inner::before {
    content: "";
    position: absolute;
    top: -45%;
    right: -12%;
    width: 62%;
    height: 150%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--sp-accent) 34%, transparent),
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

.cta-band__title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: clamp(1.75rem, 3.4vw, 2.625rem);
    font-weight: var(--sp-display-weight);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--sp-ink);
    max-width: 20ch;
    text-wrap: pretty;
}

.cta-band__text {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--sp-ink-soft);
    max-width: 52ch;
}

.cta-band__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.cta-band__button {
    flex-shrink: 0;
    width: auto;
    border-radius: var(--sp-radius-pill);
    background: var(--sp-highlight);
    color: var(--sp-highlight-text);
}

.cta-band__button:hover,
.cta-band__button:focus {
    filter: brightness(0.95);
    background: var(--sp-highlight);
    color: var(--sp-highlight-text);
}

/* Secondary, outline button. The band flips the ink context to white, so it
   draws itself from the current ink rather than the navy --main-color the base
   .btn-outline uses (which would vanish against the navy card). */
.cta-band__button2 {
    flex-shrink: 0;
    width: auto;
    border-radius: var(--sp-radius-pill);
    background: transparent;
    color: var(--sp-ink);
    border: 2px solid color-mix(in srgb, var(--sp-ink) 42%, transparent);
}

.cta-band__button2:hover,
.cta-band__button2:focus {
    background: color-mix(in srgb, var(--sp-ink) 12%, transparent);
    color: var(--sp-ink);
    border-color: var(--sp-ink);
}

/* Contextual inline CTA (leaf) */
/* Left, not centred. This CTA closes a passage of body copy, and everything
   around it (heading, prose, lists) starts at the same left edge, so a centred
   button was the only element on the page floating off that line. */
.hub-inline-cta {
    text-align: left;
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* When the CTA is the section itself, the section padding sets the rhythm. */
section.hub-inline-cta {
    margin-top: 0;
}

.hub-inline-cta__text {
    color: var(--sp-text-body);
    margin: 0 0 1rem;
}

.hub-inline-cta__button {
    width: auto;
    border-radius: var(--sp-radius-pill);
    padding: 0.8rem 1.9rem;
}

/* =========================================================================
   Pricing template
   Card radius, shadow and 8px spacing scale follow the SitePack brand book.
   ========================================================================= */
/* The packages lead the page, so the hero is a centred headline-and-intro block
   sitting directly above the billing toggle and the cards — no breadcrumb, trial
   band or jump nav in between. Centring (the title/intro are left-aligned on the
   other hubs) and the widened title cap are specific to this page. */
.pricing-hero {
    padding-bottom: clamp(1rem, 2vw, 1.5rem);
    text-align: center;
    /* The soft accent fade the other hubs open with (see .compare-hero /
       .guide-hero): a radial glow near the top and a gentle vertical wash down
       to the page background. Both are translucent mixes of merchant tokens, so
       they carry no colour of their own. */
    background:
        radial-gradient(1200px 600px at 78% -10%, color-mix(in srgb, var(--sp-accent) 22%, transparent), transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--sp-accent) 7%, var(--sp-surface)) 0%, var(--sp-surface) 72%);
}

.pricing-hero .hub-hero__title {
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
}

.pricing-hero .hub-hero__intro {
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
}

/* Follows the hero directly, so it drops the section's top padding: the toggle's
   own top margin carries the spacing down to the cards. */
.pricing-plans--lead {
    padding-top: 0;
}

.pricing-vat-badge {
    display: inline-block;
    color: var(--sp-text-subtle);
    font-size: 0.8125rem;
}

/* Assurance bar under the hero intro. The tick-in-a-circle is gone theme-wide;
   see .landing-usps for the reasoning.

   .hub-usps is the same bar under a plain .hub-hero, for the marketing pages
   that are not about prices (Made in Europe). Same treatment, name that does
   not claim the page is a pricing page. */
.pricing-usps,
.hub-usps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    list-style: none;
    padding: 0;
    /* Core CSS applies `ul { margin: 0 auto !important }`, which was swallowing the
       bottom margin and leaving the VAT badge touching the USP row. Same `!important`
       workaround the other lists in this file use. */
    margin: 0 0 1.25rem !important;
    width: auto;
    max-width: none;
}

.pricing-usps li,
.hub-usps li {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 1.9rem;
    font-weight: 600;
    color: var(--sp-ink-soft);
    font-size: 0.9375rem;
}

/* Checkmark disc — see .home-hero__usps for the colour reasoning. */
.pricing-usps li::before,
.hub-usps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--sp-accent) 24%, var(--sp-surface));
}

.pricing-usps li::after,
.hub-usps li::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 4.5px;
    height: 8px;
    border: solid var(--sp-accent-text);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -62%) rotate(45deg);
}

/* --- Trial band ----------------------------------------------------------
   The offer, stated once and plainly, directly under the hero: fourteen days
   to try it, then pick a package or cancel. This is the single most important
   thing on the page for someone deciding whether to start, so it gets its own
   full-bleed brand-coloured band rather than a line of small print.

   Ink context comes from .sp-dark, which this class is listed under. */
.pricing-trial {
    padding: clamp(1.75rem, 3vw, 2.5rem) 0;
}

.pricing-trial__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    flex-wrap: wrap;
}

.pricing-trial__title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    font-weight: var(--sp-display-weight);
    line-height: 1.15;
    letter-spacing: -0.028em;
    color: var(--sp-ink);
}

.pricing-trial__text {
    margin: 0;
    max-width: 62ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--sp-ink-soft);
}

/* The no-payment-details promise. Set apart from the paragraph above it, because
   it is the sentence that decides whether someone starts today or "later" — not
   a footnote to the trial. It stands out through weight and full-strength ink
   rather than a colour: the band is the merchant's main colour, and the old
   highlight colour clashed with it whenever the two were close (amber note on a
   gold band). Full-strength ink is guaranteed readable on the band on any
   palette, and stays distinct from the softer body text above it. */
.pricing-trial__note {
    margin: 0.875rem 0 0;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--sp-ink);
}

.pricing-trial__cta {
    flex-shrink: 0;
    width: auto;
    padding: 0.9rem 1.75rem;
    border-radius: var(--border-radius);
    background: var(--sp-highlight);
    color: var(--sp-highlight-text);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.pricing-trial__cta:hover,
.pricing-trial__cta:focus {
    background: var(--sp-highlight);
    color: var(--sp-highlight-text);
    filter: brightness(0.94);
    text-decoration: none;
}

/* Plan cards
   Each card is a flex column that sizes to its own content and aligns to the top
   of the row (align-items: start), so a shorter plan such as Website — three
   features against the store plans' six or seven — ends right after its button
   rather than stretching to match the tallest card and opening a large gap above
   its CTA. The plans differ in what they include, so cards of different heights
   read honestly; forcing one common height was what created the void. */
/* Billing-period toggle. It switches the *view*, not the price — annual billing
   earns no discount here — so it carries no "-20%" badge. The track is a sunken
   pill; the active segment fills with the brand colour, mirroring the featured
   card's CTA. */
.pricing-plans__toggle {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0 2.5rem;
}

.billing-toggle {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.3rem;
    background: var(--sp-surface-sunken);
    border-radius: var(--sp-radius-pill);
}

.billing-toggle__btn {
    border: 0;
    cursor: pointer;
    padding: 0.55rem 1.4rem;
    border-radius: var(--sp-radius-pill);
    background: transparent;
    color: var(--sp-ink-muted);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.billing-toggle__btn:hover {
    color: var(--sp-ink);
}

.billing-toggle__btn.is-active {
    background: var(--main-color);
    color: var(--main-color-text);
}

.billing-toggle__btn.is-active:hover {
    color: var(--main-color-text);
}

/* One view at a time. The server renders data-billing="monthly", so the monthly
   figures are correct before — and without — JavaScript; theme.js only flips the
   attribute. The descendant combinator leaves the .plans container itself (which
   also carries data-billing) untouched and hides only the price/period spans. */
.plans[data-billing="monthly"] [data-billing="yearly"],
.plans[data-billing="yearly"] [data-billing="monthly"] {
    display: none;
}

.plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding-top: 0.75rem; /* clearance for the badge that overhangs the featured card */
}

@media (max-width: 900px) {
    .plans {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    /* The padding is a variable because the badge is positioned against it. Two
       literals drifting apart is exactly how the badge ended up 8px outside the
       content column and 12px above the plan name. */
    --plan-pad-y: 2rem;
    --plan-pad-x: 1.75rem;
    padding: var(--plan-pad-y) var(--plan-pad-x);
    background: var(--sp-surface);
    border: 1px solid var(--sp-border-subtle);
    border-radius: var(--sp-radius-card);
    box-shadow: var(--sp-shadow-card);
}

/* The recommended package takes the top-tier treatment from the partner page:
   filled with the brand colour rather than outlined in it. An outline says
   "also available"; a fill says "this one". The ink context flips with it, so
   the name, features and small print inside need no overrides of their own. */
.plan--featured {
    background: var(--main-color);
    border-color: var(--main-color);
    box-shadow: var(--sp-shadow-raised);
    z-index: 1;
    --sp-ink: var(--main-color-text);
    --sp-ink-soft: color-mix(in srgb, var(--main-color-text) 78%, transparent);
    --sp-ink-muted: color-mix(in srgb, var(--main-color-text) 62%, transparent);
    --sp-ink-faint: color-mix(in srgb, var(--main-color-text) 45%, transparent);
    --sp-line: color-mix(in srgb, var(--main-color-text) 16%, transparent);
}

/* A pill centred on the featured card's top edge — the "most popular" marker
   the reference design leads with.

   Absolutely positioned deliberately: it keeps the badge out of the grid flow,
   so the featured card has exactly the same children as the other two and the
   card rows stay aligned across all three. It rides the top border rather than
   sitting inside the content box, which only fits while the string stays short:
   in German "Am häufigsten gewählt" would run straight over the heading. Riding
   the border is length independent, and .plans reserves padding-top for the
   overhang. */
.plan__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Never wider than the card it belongs to. No nowrap, so a longer translation
       wraps inside the pill instead of spilling past the edge. */
    max-width: calc(100% - 2 * var(--plan-pad-x));
    padding: 0.35rem 0.9rem;
    border-radius: var(--sp-radius-pill);
    background: var(--sp-highlight);
    color: var(--sp-highlight-text);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.plan__name {
    margin: 0 0 0.35rem;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sp-ink);
}

.plan__tagline {
    margin: 0 0 1.25rem;
    color: var(--sp-ink-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.plan__price {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    flex-wrap: wrap;
}

.plan__currency {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--sp-ink);
}

.plan__amount {
    font-size: 3rem;
    font-weight: var(--sp-display-weight);
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--sp-ink);
    font-variant-numeric: tabular-nums;
}

.plan__period {
    color: var(--sp-ink-muted);
    font-weight: 500;
    font-size: 0.9375rem;
}

/* Billed yearly whichever view is shown: the monthly view notes "billed
   annually", the yearly view shows the monthly-equivalent amount underneath. */
.plan__billing {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--sp-ink-muted);
}

/* Small uppercase eyebrow above each feature list: "Included", or "Everything in
   <previous plan>, plus" — the same "what you get on top" framing the reference
   design uses. */
.plan__incl-label {
    margin: 1.5rem 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sp-ink-faint);
}

.plan__incl-label + .plan__features {
    margin-top: 0.5rem !important;
}

.plan__features {
    list-style: none;
    margin: 1.5rem 0 !important;
    padding: 0;
    width: auto;
    max-width: none;
}

.plan__feature {
    position: relative;
    padding: 0.5rem 0 0.5rem 2rem;
    border-bottom: 1px solid var(--sp-line);
    color: var(--sp-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Included features carry the same marker as the hero USPs and the industry
   hero: a soft accent disc with a drawn tick, so the "included" signal reads
   consistently across the theme. Excluded features (below) swap the tick for a
   muted cross. The disc/tick recipe and its colours mirror .pricing-usps so the
   two never drift. The marker is centred on the item's first line — via
   calc(padding-top + half the line height) — so it stays put when a long
   feature wraps to a second line. */
.plan__feature::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(0.5rem + 0.75em - 10px);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--sp-accent) 24%, var(--sp-surface));
}

.plan__feature::after {
    content: "";
    position: absolute;
    left: 10px;
    top: calc(0.5rem + 0.75em);
    width: 4.5px;
    height: 8px;
    border: solid var(--sp-accent-text);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -62%) rotate(45deg);
}

/* Text for screen readers only. Used where a marker carries meaning that is
   drawn rather than written, such as the cross on a feature a plan lacks. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.plan__feature--off {
    color: var(--sp-ink-muted);
}

/* Not included: a muted cross in place of the disc-and-tick. Two crossed bars
   drawn rather than set in a glyph, so they keep the current ink context (they
   flip on the filled featured card). These override both pseudo-elements the
   included marker uses — resetting the disc's radius/size/border — and are
   centred on the same first-line position as the tick. */
.plan__feature--off::before,
.plan__feature--off::after {
    content: "";
    position: absolute;
    left: 1px;
    top: calc(0.5rem + 0.75em - 1px);
    width: 13px;
    height: 2px;
    border: 0;
    border-radius: 2px;
    background: var(--sp-ink-muted);
    box-shadow: none;
}

.plan__feature--off::before {
    transform: rotate(45deg);
}

.plan__feature--off::after {
    transform: rotate(-45deg);
}

/* Footer sits directly below the feature list. margin-top:auto still pins it to
   the bottom on the rare card that is given extra height (e.g. a future equal-
   height context); with content-sized cards there is no free space, so the CTA
   simply follows the features. */
.plan__footer {
    margin-top: auto;
    padding-top: 1.5rem;
}

.plan__cta {
    display: block;
    width: 100%;
    /* Full pill, like the reference design's CTAs. */
    border-radius: var(--sp-radius-pill);
    padding: 0.95rem 1rem;
    text-align: center;
    font-weight: 600;
}

/* Secondary plans use an outline button so the highlighted plan's solid CTA leads. */
.plan__cta--outline {
    background: transparent;
    color: var(--main-color);
    box-shadow: inset 0 0 0 1.5px var(--main-color);
}

.plan__cta--outline:hover {
    background: var(--main-color);
    color: var(--main-color-text);
    filter: none;
}

/* On the filled card the CTA inverts: white fill, brand text. */
.plan--featured .plan__cta {
    background: var(--main-color-text);
    color: var(--main-color);
}

.plan--featured .plan__cta:hover,
.plan--featured .plan__cta:focus {
    background: var(--main-color-text);
    color: var(--main-color);
    filter: brightness(0.94);
}

/* The trial line under each CTA. Same promise as the band at the top of the
   page, repeated at the point of decision. */
.plan__trial {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: center;
    color: var(--sp-ink-muted);
}

/* Starter → Grow break-even calculator
   Rebuilt on the partner calculator's shape: inputs in a white card on the
   left, the answer on a brand-coloured panel on the right. The arithmetic is
   unchanged — what changed is that the answer now leads instead of sitting in
   a grey box at the bottom of the section.

   The panel also shows the estimated monthly total per package rather than the
   sticker price. That number is what the visitor is actually trying to work
   out, and the script already computed it to decide the recommendation. */
.pricing-calc__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 860px) {
    .pricing-calc__grid {
        grid-template-columns: 1fr;
    }
}

.pricing-calc__inputs {
    background: var(--sp-surface);
    border-radius: var(--sp-radius-card);
    padding: clamp(1.5rem, 2.5vw, 2.125rem);
    box-shadow: var(--sp-shadow-card);
}

/* Both inputs are sliders. A number field asks you to know your answer before
   you can use the tool; a slider invites you to push it and watch. That is the
   whole reason a calculator earns its place on a pricing page, and it is the
   pattern the partner page already uses. */
.pricing-calc__field + .pricing-calc__field {
    margin-top: 1.75rem;
}

.pricing-calc__field-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.pricing-calc__label {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--sp-text);
}

.pricing-calc__sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    color: var(--sp-text-muted);
}

.pricing-calc__value {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--main-color);
    font-size: 1.5rem;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

.pricing-calc__range {
    width: 100%;
    margin-top: 0.875rem;
    accent-color: var(--main-color);
    cursor: pointer;
}

/* --- Result panel ------------------------------------------------------- */
.pricing-calc__panel {
    border-radius: var(--sp-radius-card);
    padding: clamp(1.5rem, 2.5vw, 2.125rem);
}

.pricing-calc__panel-label {
    display: block;
    font-size: 0.9375rem;
    color: var(--sp-ink-soft);
    margin-bottom: 1.25rem;
}

/* The verdict: which package, and by how much. One answer, not two columns of
   totals to compare — the comparison is the page's job, this panel's job is to
   end it. */
.pricing-calc__verdict {
    border-radius: var(--border-radius);
    padding: 1.375rem 1.5rem;
    background: var(--sp-veil);
    box-shadow: inset 0 0 0 1px var(--sp-line);
}

.pricing-calc__verdict-name {
    display: block;
    font-size: 1.5rem;
    font-weight: var(--sp-display-weight);
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--sp-ink);
}

.pricing-calc__verdict-line {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--sp-ink-soft);
}

/* The only figure on the panel, and deliberately a small one: it is a
   difference between two packages, not a bill. */
.pricing-calc__verdict-amount {
    font-weight: 700;
    color: var(--sp-highlight);
    font-variant-numeric: tabular-nums;
}

.pricing-calc__verdict-amount[hidden] {
    display: none;
}

.pricing-calc__cta {
    display: block;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.95rem 1rem;
    border-radius: var(--border-radius);
    background: var(--main-color-text);
    color: var(--main-color);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.pricing-calc__cta:hover,
.pricing-calc__cta:focus {
    background: var(--main-color-text);
    color: var(--main-color);
    filter: brightness(0.94);
    text-decoration: none;
}

/* The verdict in one sentence, on the panel rather than in a callout of its
   own. aria-live on the element means a screen reader hears it change as the
   sliders move. */
.pricing-calc__reco {
    margin: 1.25rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--sp-ink-soft);
}

.pricing-calc__panel .pricing-note {
    margin-top: 1rem;
    color: var(--sp-ink-faint);
}

/* Matrix tables (comparison, payment rates, add-ons) */
.price-matrix__intro {
    color: var(--sp-text-body);
    max-width: 72ch;
    margin: -0.5rem 0 1.5rem;
}

/* Section eyebrow above the comparison heading — the theme's standard accent
   label (see .home-value__eyebrow). */
.price-matrix__eyebrow {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--sp-accent) 82%, var(--sp-ink));
}

/* Centred variant used by the plan comparison, so the eyebrow and heading sit
   above the table the way the design leads with. The table itself stays full
   width and left-aligned inside its container. */
.price-matrix-section--center {
    text-align: center;
}

.price-matrix-section--center .hub-section__title {
    max-width: none;
}

.price-matrix-section--center .compare-table__wrap {
    text-align: left;
    margin-top: 2rem;
}

/* Assurance bar — a centred row of reassurance ticks directly under the cards,
   fenced off by a hairline top and bottom rule. */
.pricing-assurance {
    padding: 1.25rem 0;
    border-top: 1px solid var(--sp-border-subtle);
    border-bottom: 1px solid var(--sp-border-subtle);
}

/* Horizontal variant of the tick list (the vertical .pricing-usps lives in the
   hero on other pages). Core CSS forces `ul { margin: 0 auto !important }`, so
   the reset needs the same !important to win. */
.pricing-usps--row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem 2.5rem;
    margin: 0 !important;
}

.price-matrix__subtitle {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sp-text);
}

.price-matrix__col {
    white-space: nowrap;
}

/* Small line under a column heading — the monthly price beside the plan name. */
.price-matrix__head-sub {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sp-ink-muted);
}

/* The recommended column takes the featured card's treatment: a brand-filled
   header and a quiet brand tint down the body, values set bold. The whole column
   reads as "this one" without needing a second accent colour. */
.price-matrix th.price-matrix__col--highlight {
    background: var(--main-color);
    color: var(--main-color-text);
}

.price-matrix th.price-matrix__col--highlight .price-matrix__head-sub {
    color: color-mix(in srgb, var(--main-color-text) 72%, transparent);
}

.price-matrix td.price-matrix__col--highlight,
.price-matrix tbody tr:hover td.price-matrix__col--highlight {
    background: color-mix(in srgb, var(--main-color) 6%, var(--sp-surface));
    font-weight: 700;
    color: var(--sp-ink);
}

/* Included / not-included marks in a comparison cell. The tick mirrors the plan
   cards' feature marker (accent disc + drawn tick); the not-included state is a
   muted dash. Both are centred in the cell and carry an sr-only label. */
.ct-mark {
    display: inline-block;
    vertical-align: middle;
}

.ct-mark--yes {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--sp-accent) 24%, var(--sp-surface));
}

.ct-mark--yes::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4.5px;
    height: 8px;
    border: solid var(--sp-accent-text);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -62%) rotate(45deg);
}

.ct-mark--no {
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--sp-ink-faint);
}

/* Section header rows inside a grouped price matrix (SitePack Payments rates).
   These sit in <tbody> so the thead styling does not reach them. */
.price-matrix__group th {
    background: var(--sp-surface-sunken);
    color: var(--sp-text);
    text-align: left;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--sp-border);
    border-bottom: 1px solid var(--sp-border);
}

/* The first group header sits right under the table head — drop its top border. */
.payments-matrix tbody tr:first-child.price-matrix__group th {
    border-top: none;
}

/* Full-width payments table (no scroll wrapper). The header row sticks to the top of
   the viewport while scrolling the long rate list, so the package columns stay in view. */
.payments-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--sp-text) 16%, transparent);
}

.pricing-note {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--sp-text-subtle);
}

/* Add-ons: two tables side by side */
.addons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 800px) {
    .addons-grid {
        grid-template-columns: 1fr;
    }
}

.addon-card {
    padding: 1.75rem;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-card);
    box-shadow: var(--sp-shadow-card);
}

/* The add-on tables sit in a narrow card, so they must not keep the wide
   comparison-table minimum. Their single value column reads best right-aligned. */
.addon-card .compare-table {
    min-width: 0;
}

.addon-card .compare-table th + th,
.addon-card .compare-table td + td {
    text-align: right;
}

/* =========================================================================
   Pricing pages — mobile refinements
   ========================================================================= */
@media (max-width: 640px) {
    /* Tighter page gutter to give content (and tables) more room */
    .container-element {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Section rhythm is fluid (--sp-section-y), so it already scales down here —
       no fixed override needed. */

    /* Roomier cards get slimmer padding on small screens. Set through the
       variables so the badge follows the padding down with them. */
    .plan {
        --plan-pad-y: 1.5rem;
        --plan-pad-x: 1.25rem;
    }

    .pricing-calc__inputs,
    .pricing-calc__panel,
    .addon-card {
        padding: 1.25rem;
    }

    .feature-card,
    .step {
        padding: 1.5rem 1.25rem;
    }

    /* The break-even result tiles stack when there isn't room side by side */
    .pricing-calc__results {
        grid-template-columns: 1fr;
    }

    .pricing-calc__aov-wrap {
        max-width: none;
    }

    /* Denser tables so more fits before scrolling sideways */
    .compare-table th,
    .compare-table td {
        padding: 0.6rem 0.7rem;
        font-size: 0.9rem;
    }

    .price-matrix__group th {
        padding: 0.55rem 0.7rem;
    }

    /* Comparison / add-on tables (not payments): keep the first column pinned while
       the value columns scroll horizontally, so every row stays readable. */
    .price-matrix-section .compare-table:not(.payments-matrix) th:first-child,
    .price-matrix-section .compare-table:not(.payments-matrix) td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--sp-surface);
    }

    .price-matrix-section .compare-table:not(.payments-matrix) thead th:first-child {
        z-index: 4;
        background: var(--sp-surface-sunken);
    }

    .price-matrix-section .compare-table:not(.payments-matrix) .price-matrix__group th {
        background: var(--sp-surface-sunken);
    }

    /* Payments table collapses into one card per payment method. The <thead> is
       hidden and each value cell shows its package name from data-label. */
    .payments-matrix {
        min-width: 0;
    }

    .payments-matrix thead {
        display: none;
    }

    .payments-matrix,
    .payments-matrix tbody,
    .payments-matrix tr,
    .payments-matrix td {
        display: block;
        width: auto;
    }

    .payments-matrix tbody tr:not(.price-matrix__group) {
        border: 1px solid var(--sp-border);
        border-radius: var(--border-radius);
        background: var(--sp-surface);
        padding: 0.9rem 1.1rem;
        margin: 0 0 0.75rem;
        box-shadow: var(--sp-shadow-card);
    }

    .payments-matrix td {
        border: none;
        padding: 0;
    }

    /* Method name = card title */
    .payments-matrix td.price-matrix__method {
        font-weight: 700;
        font-size: 1rem;
        color: var(--sp-text);
        padding-bottom: 0.55rem;
        margin-bottom: 0.55rem;
        border-bottom: 1px solid var(--sp-border-subtle);
    }

    /* Each price on its own labelled line */
    .payments-matrix td.price-matrix__col {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: 0.3rem 0;
        text-align: right;
        white-space: normal;
        font-weight: 600;
        color: var(--sp-text);
    }

    .payments-matrix td.price-matrix__col::before {
        content: attr(data-label);
        font-weight: 500;
        color: var(--sp-text-muted);
        text-align: left;
    }

    /* Section names become subheadings between card groups */
    .payments-matrix tr.price-matrix__group {
        margin: 1.5rem 0 0.6rem;
    }

    .payments-matrix tr.price-matrix__group th {
        display: block;
        background: transparent;
        border: none;
        padding: 0;
        color: var(--sp-text);
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .payments-matrix tbody tr:first-child.price-matrix__group {
        margin-top: 0;
    }
}

/* =========================================================================
   Search results
   The result rows reuse the hub link-card shape so search feels like the rest
   of the site rather than a separate platform screen.
   ========================================================================= */
.search-form {
    max-width: 480px;
    margin-top: 1.25rem;
}

.search-count {
    font-size: 1rem;
    color: var(--sp-text-muted);
    margin-bottom: 0;
}

.search-results {
    list-style: none;
    /* Core CSS applies `ul { width: 100%; margin: 0 auto !important }` */
    margin: 0 !important;
    width: auto;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.search-result {
    margin: 0;
}

.search-result__link {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 1.4rem;
    border: 1px solid var(--sp-border-subtle);
    border-radius: var(--sp-radius-card);
    background: var(--sp-surface);
    box-shadow: var(--sp-shadow-card);
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.search-result__link:hover,
.search-result__link:focus {
    border-color: var(--main-color);
    box-shadow: var(--sp-shadow-hover);
    transform: translateY(-2px);
    text-decoration: none;
}

.search-result__image {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--sp-surface-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-result__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search-result__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
}

.search-result__type {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sp-text-muted);
}

.search-result__title {
    font-weight: 700;
    color: var(--sp-text);
    font-size: 1.05rem;
}

.search-result__description {
    color: var(--sp-text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.search-result__price {
    font-weight: 700;
    color: var(--sp-text);
}

.search-result__arrow {
    color: var(--main-color);
    font-weight: 700;
    flex-shrink: 0;
}

/* Zero results: an empty state, not a bare sentence — it has to offer a way onward. */
.search-empty {
    padding: 2rem;
    border: 1px solid var(--sp-border-subtle);
    border-radius: var(--sp-radius-card);
    background: var(--sp-surface);
    box-shadow: var(--sp-shadow-card);
    max-width: 640px;
}

.search-empty__title {
    margin: 0 0 0.4rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--sp-text);
}

.search-empty__text {
    margin: 0 0 1.25rem;
    color: var(--sp-text-muted);
}

.search-empty__links {
    list-style: none;
    margin: 0 !important;
    width: auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.search-empty__links a {
    color: var(--main-color);
    font-weight: 600;
    text-decoration: none;
}

.search-empty__links a:hover,
.search-empty__links a:focus {
    text-decoration: underline;
}

@media (max-width: 560px) {
    .search-result__link {
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }

    .search-result__image {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
    }

    /* The arrow is decorative and costs width that the title needs on a phone. */
    .search-result__arrow {
        display: none;
    }
}

/* =========================================================================
   Blog
   =========================================================================
   Two listings share one look. The platform renders a blog overview page from
   its own blog_posts element (.blogposts-wrapper > .blog-post-block), and the
   tag page renders snippets/blog-card.twig. The markup differs, the card does
   not: outlined, flat, hairline under the image, date above the title. Cards
   here carry no shadow on purpose, the same call the link cards make. What
   marks a card as reachable is the border warming up, not a lift. */

/* --- The grid, for both listings --------------------------------------- */
.blogposts-wrapper,
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* The platform element arrives without a container of its own, so it brings its
   own width and gutter, the same way .products-wrapper does. */
.blogposts-wrapper {
    max-width: var(--container-width);
    margin: clamp(1.5rem, 3vw, 2.5rem) auto;
    padding: 0 1.5rem;
}

@media (max-width: 900px) {
    .blogposts-wrapper,
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .blogposts-wrapper,
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

/* --- The card ----------------------------------------------------------- */
.blog-post-block,
.blog-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-card);
    background: var(--sp-surface);
    text-decoration: none;
    transition: border-color var(--sp-dur) var(--sp-ease);
}

.blog-post-block:hover,
.blog-card__link:hover,
.blog-card__link:focus-visible {
    border-color: color-mix(in srgb, var(--sp-accent) 55%, var(--sp-line));
    text-decoration: none;
}

.blog-card {
    margin: 0;
}

/* --- The image ----------------------------------------------------------
   The platform paints it as a background on an empty div, with the URL injected
   in a style block per post, so this side only sets the box and the framing.
   The gradient underneath is what a post without an image falls back to. */
.blog-post-image,
.blog-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--sp-line);
    background-color: var(--sp-veil);
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--sp-accent) 20%, var(--sp-surface)) 0%,
        var(--sp-veil) 100%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* The platform makes this div navigate on click, so it should say so. */
.blog-post-image {
    cursor: pointer;
}

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- The body ------------------------------------------------------------
   In the platform's markup the date sits in a footer after the title, which is
   the wrong way round for a card: the date is a label on the piece, not its
   closing line. Reordering it here keeps that markup untouched and still reads
   date, headline, standfirst, top to bottom. */
.blog-post-block .blog-post-image {
    order: 1;
}

.blog-post-block .blog-post-footer {
    order: 2;
    padding: 1.15rem 1.35rem 0;
}

.blog-post-block .blog-post-title {
    order: 3;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.4rem 1.35rem 1.35rem;
}

.blog-post-footer p,
.blog-card__meta {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sp-ink-muted);
}

/* The date is right-aligned by a utility class in the platform's markup, which
   was written for a wide footer bar rather than a card. Left, with everything
   else. The <i> next to it is a Font Awesome hook, and this theme ships no icon
   font, so it would be an empty gap. */
.blog-post-block .text-right {
    text-align: left;
}

.blog-post-block i {
    display: none;
}

.blog-post-title h3,
.blog-card__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: var(--sp-display-tracking);
    color: var(--sp-ink);
}

.blog-post-title h3 a {
    color: inherit;
    text-decoration: none;
}

.blog-post-title h3 a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-post-title p,
.blog-card__excerpt {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--sp-ink-soft);
}

/* --- Our own card, the parts the platform element has no equivalent for -- */
.blog-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.15rem 1.35rem 1.35rem;
}

.blog-card__more {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--link-color);
}

.blog-card__link:hover .blog-card__more {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Single post ---------------------------------------------------------
   One column, one measure. The header, the image, the copy, the tags and the
   pager all line up on the same left edge and the same width, so the article
   reads as a single column rather than a wide picture with a narrow text under
   it. That width is the reading measure, not the container: long-form copy at
   1200px is unreadable however nice the type is. */
.blog-post {
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
}

/* Narrowing the container itself, rather than the blocks inside it, is what keeps
   the header, the image, the tags and the pager on one edge: they are each their
   own .container-element, so anything set on their children would leave the rows
   around them at full width. */
.blog-post .container-element {
    max-width: calc(72ch + 3rem);
}

/* The prose block carries .container-element as well, so it is already capped by
   the rule above. Giving it a measure of its own here would inset the text by a
   second gutter and knock it out of line with the heading. */

/* An article's <header> is a header element like any other, and the bare
   `header` selector that dresses the site chrome catches it: surface colour, a
   rule underneath and a shadow. Undone here rather than by renaming the tag,
   which is the correct one for this block. */
.blog-post__header {
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
    padding-top: 0;
    padding-bottom: 0;
    background: none;
    border-bottom: 0;
    box-shadow: none;
    z-index: auto;
}

/* The same accent segment that opens the short answer on the hub pages, so an
   article opens the way every other page on the site does. */
.blog-post__header::before {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin-bottom: 1.1rem;
    border-radius: 3px;
    background: var(--sp-accent);
}

.blog-post__title {
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    font-weight: var(--sp-display-weight);
    line-height: 1.08;
    letter-spacing: var(--sp-display-tracking);
    margin: 0 0 0.75rem;
    color: var(--sp-ink);
    text-wrap: balance;
}

.blog-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sp-ink-muted);
}

.blog-post__image {
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.blog-post__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-card);
}

.blog-post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2rem;
}

.tag {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: var(--sp-radius-pill);
    background: var(--sp-surface-sunken);
    color: var(--sp-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

a.tag:hover,
a.tag:focus {
    background: color-mix(in srgb, var(--sp-accent) 25%, var(--sp-surface));
    color: var(--sp-accent-text);
    text-decoration: none;
}

.blog-post__nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sp-border-subtle);
}

/* One link alone still sits on its own side: "next" must stay right-aligned when
   there is no "previous" before it. */
.blog-post__nav-link--next:only-child {
    margin-left: auto;
}

.blog-post__nav-link {
    color: var(--main-color);
    font-weight: 600;
    text-decoration: none;
}

.blog-post__nav-link:hover,
.blog-post__nav-link:focus {
    text-decoration: underline;
}

/* =========================================================================
   Sitemap — brought onto the same card/type scale as the rest of the site
   ========================================================================= */
.sitemap {
    padding: 2.5rem 0 3.5rem;
}

.sitemap h2 {
    font-size: 1.15rem;
    border-bottom: 1px solid var(--sp-border-subtle);
}

.sitemap li {
    line-height: 1.7;
}

.sitemap a {
    font-weight: 500;
}

/* =========================================================================
   Partner programme (templates/partners.twig)
   =========================================================================
   A type-led marketing page: no photography, no uppercase eyebrows, cards lead
   with the number. It runs a larger display scale than the content hubs, so the
   sizes below are local to .partners and clamp down to the phone widths the
   design bundle left open.

   Light and dark sections share the same components (panels, dash lists,
   headings), so every ink, line and veil goes through a small set of local
   custom properties. .partners sets the light values; .pp-dark overrides them
   for anything sitting on the brand surface. That keeps a single rule per
   component instead of a dark twin, and every value still traces back to a
   theme setting. */
.partners {
    --pp-ink: var(--sp-text);
    --pp-ink-soft: var(--sp-text-body);
    --pp-ink-muted: var(--sp-text-muted);
    --pp-ink-faint: var(--sp-text-subtle);
    --pp-line: var(--sp-border-subtle);
    --pp-veil: var(--sp-surface-sunken);
    --pp-section-y: clamp(3.5rem, 7vw, 6rem);
}

.pp-dark {
    background: var(--main-color);
    color: var(--main-color-text);
    --pp-ink: var(--main-color-text);
    --pp-ink-soft: color-mix(in srgb, var(--main-color-text) 75%, transparent);
    --pp-ink-muted: color-mix(in srgb, var(--main-color-text) 60%, transparent);
    --pp-ink-faint: color-mix(in srgb, var(--main-color-text) 45%, transparent);
    --pp-line: color-mix(in srgb, var(--main-color-text) 14%, transparent);
    --pp-veil: color-mix(in srgb, var(--main-color-text) 6%, transparent);
}

/* --- Section rhythm ---------------------------------------------------- */
.pp-section {
    padding: var(--pp-section-y) 0;
}

.pp-section--sunken {
    background: var(--sp-surface-sunken);
    border-top: 1px solid var(--sp-border-subtle);
}

.pp-section--ruled {
    border-top: 1px solid var(--sp-border-subtle);
}

/* --- Shared type ------------------------------------------------------- */
.partners .pp-h2 {
    font-size: clamp(1.85rem, 3.6vw, 2.75rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin: 0;
    max-width: 24ch;
    color: var(--pp-ink);
    text-wrap: pretty;
}

.partners .pp-h2--wide {
    max-width: 30ch;
}

.pp-lede {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--pp-ink-soft);
    max-width: 62ch;
    margin: 1rem 0 0;
}

.pp-body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--pp-ink-soft);
    margin: 1.1rem 0 0;
}

/* Two-column marketing split. Both halves stack below the tablet breakpoint —
   the design bundle only specified desktop ratios. */
.pp-split {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

/* Short accent rule above a card title. */
.pp-rule {
    display: block;
    width: 34px;
    height: 4px;
    border-radius: 2px;
    background: var(--pp-line);
}

.pp-rule--accent {
    background: var(--sp-accent);
}

.pp-rule--highlight {
    width: 30px;
    background: var(--sp-highlight);
}

/* Em-dash bullet list, used in the contract block and the tier cards. */
.partners .pp-dashlist {
    list-style: none;
    margin: 0.875rem 0 0 !important;
    padding: 0;
    width: auto;
}

.partners .pp-dashlist li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.35rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--pp-ink);
}

.partners .pp-dashlist li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--pp-ink-faint);
}

/* --- Buttons -----------------------------------------------------------
   Local to the partner page: the design uses square-ish 8px CTAs rather than
   the pill the rest of the site leads with. */
.partners .pp-btn {
    display: inline-block;
    padding: 1rem 1.875rem;
    border: none;
    border-radius: var(--border-radius);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease;
}

.partners .pp-btn:hover,
.partners .pp-btn:focus {
    text-decoration: none;
    filter: brightness(0.92);
}

.partners .pp-btn--primary {
    background: var(--main-color);
    color: var(--main-color-text);
}

.partners .pp-btn--highlight {
    background: var(--sp-highlight);
    color: var(--sp-highlight-text);
}

.partners .pp-btn--light {
    background: var(--sp-surface);
    color: var(--main-color);
}

/* Outline CTA on the brand surface: an inset ring instead of a border, so it
   lines up with the filled button beside it. */
.partners .pp-btn--ghost {
    background: transparent;
    color: var(--pp-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--main-color-text) 35%, transparent);
}

.partners .pp-btn--ghost:hover,
.partners .pp-btn--ghost:focus {
    filter: none;
    background: var(--pp-veil);
}

.partners .pp-btn--block {
    display: block;
    width: 100%;
}

/* Inline text link with the accent underline the design uses instead of a
   button in body copy. */
.partners .pp-textlink,
.partners .pp-textbutton {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0 0 2px;
    border: none;
    border-bottom: 2px solid var(--sp-accent);
    background: transparent;
    color: var(--pp-ink);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.partners .pp-textlink:hover,
.partners .pp-textbutton:hover {
    text-decoration: none;
    color: var(--pp-ink);
    filter: brightness(1.15);
}

/* Translucent card on the brand surface (hero pitch, audience cards). */
.pp-panel {
    background: var(--pp-veil);
    border-radius: var(--sp-radius-card);
    padding: clamp(1.5rem, 2.5vw, 2.125rem);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--main-color-text) 12%, transparent);
}

.partners .pp-panel__title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pp-ink);
}

.partners .pp-panel__heading {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pp-ink);
}

.pp-panel__text {
    margin: 0.625rem 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--pp-ink-soft);
}

/* --- 1. Hero ------------------------------------------------------------ */
.pp-hero {
    padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3.25rem, 6vw, 5.5rem);
}

.pp-hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.partners .pp-hero__title {
    margin: 0;
    font-size: clamp(2.375rem, 5.2vw, 4.125rem);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -0.036em;
    color: var(--pp-ink);
    text-wrap: pretty;
}

.pp-hero__accent {
    color: var(--sp-highlight);
}

.pp-hero__intro {
    margin: 1.375rem 0 0;
    max-width: 35rem;
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--pp-ink-soft);
}

.pp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: 2.25rem;
}

.pp-hero__note {
    margin: 2.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--pp-ink-faint);
}

.pp-pitch {
    padding-top: 1.375rem;
}

.partners .pp-pitch__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.017em;
    color: var(--pp-ink);
}

.pp-pitch__text {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--pp-ink-soft);
}

/* --- 2. Earnings calculator --------------------------------------------
   Inputs on the left, the result card on the right. Everything the script
   writes into this block is a number or a translated label carried on a data
   attribute; the markup itself lives in the template. */
.pp-calc {
    margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

.pp-calc__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 1.5rem;
    align-items: start;
}

.pp-calc__inputs {
    background: var(--sp-surface);
    border-radius: var(--sp-radius-card);
    padding: clamp(1.5rem, 2.5vw, 2.125rem);
    box-shadow: var(--sp-shadow-card);
}

.pp-slider {
    padding-bottom: 1.625rem;
}

.pp-slider__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.partners .pp-slider__label {
    display: block;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sp-text);
}

.pp-slider__sub {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--sp-text-muted);
}

.pp-slider__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--main-color);
    white-space: nowrap;
}

.pp-slider__input {
    width: 100%;
    margin-top: 0.875rem;
    accent-color: var(--main-color);
    cursor: pointer;
}

.pp-calc__total {
    margin: 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sp-border-subtle);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--sp-text-muted);
}

.pp-calc__total strong {
    color: var(--sp-text);
}

.pp-result {
    border-radius: var(--sp-radius-card);
    padding: clamp(1.5rem, 2.5vw, 2.125rem);
}

.pp-result__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9375rem;
    color: var(--pp-ink-soft);
}

/* Tier chip — accent ink on a tint of itself, so it reads on the brand
   surface without introducing a second colour. */
.pp-result__chip {
    padding: 5px 11px;
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--sp-accent) 16%, transparent);
    color: var(--sp-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.pp-result__figure {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 1rem 0 0;
}

.pp-result__yearly {
    font-size: clamp(2.75rem, 5.5vw, 4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.044em;
    color: var(--pp-ink);
}

.pp-result__per {
    font-size: 0.9375rem;
    color: var(--pp-ink-muted);
}

.pp-result__monthly {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--pp-ink-muted);
}

.pp-result__rows {
    margin-top: 1.75rem;
    padding-top: 1.375rem;
    border-top: 1px solid var(--pp-line);
}

.pp-result__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4375rem 0;
    font-size: 0.875rem;
    color: var(--pp-ink-soft);
}

.pp-result__row-value {
    font-weight: 600;
    color: var(--pp-ink);
    white-space: nowrap;
}

.partners .pp-result .pp-btn {
    margin-top: 1.625rem;
    padding: 0.9375rem 1rem;
}

.pp-result__footnote {
    margin: 0.875rem 0 0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--pp-ink-faint);
}

/* --- 3. Management contract --------------------------------------------- */
.pp-contract {
    border-radius: var(--sp-radius-card);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--main-color-text) 14%, transparent);
}

.pp-contract__row {
    padding: 1.625rem 1.75rem;
}

.pp-contract__row + .pp-contract__row {
    border-top: 1px solid var(--pp-line);
}

.partners .pp-contract__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pp-ink);
}

.pp-contract__note {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--pp-ink-muted);
}

/* --- 4. Marketplace ----------------------------------------------------- */
.pp-market-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.pp-market-card {
    background: var(--sp-surface);
    border-radius: var(--sp-radius-card);
    padding: 1.625rem;
    box-shadow: var(--sp-shadow-card);
}

.partners .pp-market-card__title {
    margin: 1rem 0 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.017em;
    color: var(--sp-text);
}

.pp-market-card__text {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--sp-text-body);
}

/* --- 5. Partner tiers ---------------------------------------------------
   Three cards that lead with the rate. The entry tier is a plain card, the
   middle tier is ringed in the accent colour and the top tier flips to the
   brand surface. */
.pp-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.pp-tier {
    background: var(--sp-surface);
    border-radius: var(--sp-radius-card);
    padding: 2rem;
    box-shadow: var(--sp-shadow-card);
}

.pp-tier--certified {
    box-shadow: 0 0 0 1px var(--sp-accent);
}

.pp-tier--premium {
    background: var(--main-color);
    color: var(--main-color-text);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--main-color) 25%, transparent);
    --pp-ink: var(--main-color-text);
    --pp-ink-soft: color-mix(in srgb, var(--main-color-text) 75%, transparent);
    --pp-ink-muted: color-mix(in srgb, var(--main-color-text) 60%, transparent);
    --pp-ink-faint: color-mix(in srgb, var(--main-color-text) 45%, transparent);
}

.pp-tier__rate {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--pp-ink);
}

.pp-tier__threshold {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    color: var(--pp-ink-soft);
}

.pp-tier__rule {
    width: 28px;
    height: 3px;
    margin: 1.25rem 0 0.875rem;
    background: var(--sp-border);
}

.pp-tier--certified .pp-tier__rule {
    background: var(--sp-accent);
}

.pp-tier--premium .pp-tier__rule {
    background: var(--sp-highlight);
}

.pp-tier__market {
    margin: 0;
    font-size: 0.875rem;
    color: var(--pp-ink-muted);
}

.partners .pp-tier .pp-dashlist {
    margin-top: 1.5rem !important;
}

/* --- 6 & 8. Hairline grids ---------------------------------------------
   Cells separated by a 1px gap over the border colour, so the dividers read as
   hairlines without a border on every cell. */
.pp-hairline-grid {
    display: grid;
    gap: 1px;
    margin-top: 2.5rem;
    background: var(--sp-border-subtle);
    border: 1px solid var(--sp-border-subtle);
    border-radius: var(--sp-radius-card);
    overflow: hidden;
}

/* Fixed column counts rather than auto-fit: both grids hold an exact number of
   cells (six and four), and an auto-fit track count that does not divide them
   leaves empty cells showing the divider colour. */
.pp-hairline-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.pp-hairline-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .pp-hairline-grid--3,
    .pp-hairline-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .pp-hairline-grid--3,
    .pp-hairline-grid--4 {
        grid-template-columns: 1fr;
    }
}

.pp-cell {
    background: var(--sp-surface);
    padding: 2rem 1.875rem;
}

.pp-cell__step {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sp-accent);
}

.partners .pp-cell__title {
    margin: 1.125rem 0 0.5rem;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.017em;
    color: var(--sp-text);
}

.pp-cell__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--sp-text-body);
}

/* --- 7. Audiences ------------------------------------------------------- */
.pp-audiences {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}

/* --- 9. Sign-up --------------------------------------------------------- */
.pp-signup {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

.partners .pp-checklist {
    list-style: none;
    margin: 1.75rem 0 0 !important;
    padding: 0;
    width: auto;
}

.partners .pp-checklist li {
    position: relative;
    padding: 0.4375rem 0 0.4375rem 1.4rem;
    font-size: 0.875rem;
    color: var(--sp-text);
}

.partners .pp-checklist li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--sp-success);
}

.pp-form-card {
    background: var(--sp-surface);
    border-radius: var(--sp-radius-card);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: var(--sp-shadow-card);
}

/* Sign-up card without a form: the checklist, the hand-off button and the small
   print, stacked and vertically centred against the copy beside it. */
.pp-signup__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
}

.pp-signup__card .pp-checklist {
    margin: 0 !important;
}

.pp-form__small {
    margin: 0.875rem 0 0;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--sp-text-muted);
}

/* --- 10. FAQ ------------------------------------------------------------
   Reuses the shared FAQ module, including its card styling and markers — no
   partner-specific overrides needed now that the base runs at this measure. */
.partners .faq-section .container-element {
    max-width: 55rem;
}

.partners .faq {
    max-width: none;
}

/* --- 11. Closing band --------------------------------------------------- */
.pp-close {
    background: var(--sp-accent);
    color: var(--sp-accent-text);
}

.pp-close__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2.5rem;
    padding-top: clamp(2.75rem, 5vw, 4rem);
    padding-bottom: clamp(2.75rem, 5vw, 4rem);
}

.partners .pp-close__title {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.125rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.032em;
    color: var(--sp-accent-text);
}

.pp-close__text {
    margin: 0.625rem 0 0;
    font-size: 1rem;
    color: color-mix(in srgb, var(--sp-accent-text) 80%, transparent);
}

/* --- Responsive ---------------------------------------------------------
   The design bundle is desktop-first at 1280px and left the fixed-ratio grids
   (hero, calculator, contract, marketplace, sign-up) without breakpoints.
   They all collapse to a single column here; the calculator's result card
   follows its inputs. */
@media (max-width: 960px) {
    .pp-hero__inner,
    .pp-calc__grid,
    .pp-split,
    .pp-signup {
        grid-template-columns: 1fr;
    }

    .pp-hero__inner {
        gap: 2.5rem;
    }
}

@media (max-width: 600px) {
    .pp-market-grid {
        grid-template-columns: 1fr;
    }

    .partners .pp-hero__actions .pp-btn {
        width: 100%;
    }

    .pp-close__inner {
        gap: 1.75rem;
    }

    .partners .pp-close .pp-btn {
        width: 100%;
    }
}


/* =========================================================================
   Homepage hero
   The one place in the theme that gets to be loud. Same ingredients as the rest
   of the site (display scale, brand navy, sky blue eyebrow, amber accent, card
   radius and elevation) arranged as a two column opener: the promise on the
   left, a preview of what a visitor is about to build on the right.

   Everything here reads the tokens, so a merchant changing main-color,
   accent-color or border-radius restyles the whole hero with it.
   ========================================================================= */
.home-hero {
    position: relative;
    /* Tighter at the top than the other heroes: the whole opener has to fit a
       laptop fold, and the header above it already supplies air. */
    padding: clamp(1.75rem, 3.5vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
    overflow: hidden;
}

/* Two soft brand washes behind the hero: sky blue rising on the right where the
   panel sits, navy barely tinting the left. color-mix against transparent, so
   they carry no colour of their own and fade out over the page background. */
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 70% at 82% 18%,
            color-mix(in srgb, var(--sp-accent) 26%, transparent), transparent 70%),
        radial-gradient(45% 55% at 8% 12%,
            color-mix(in srgb, var(--main-color) 8%, transparent), transparent 70%);
    pointer-events: none;
}

.home-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

/* --- Left column ------------------------------------------------------- */
.home-hero__title {
    font-size: var(--sp-display-1);
    font-weight: var(--sp-display-weight);
    line-height: 1.02;
    letter-spacing: var(--sp-display-tracking);
    margin: 0 0 1.25rem;
    /* Wider than .hub-hero__title's 20ch: this headline is the page. */
    max-width: 24ch;
    color: var(--sp-ink);
    text-wrap: pretty;
}

.home-hero__accent {
    color: var(--sp-highlight);
}

.home-hero__intro {
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: 1.6;
    color: var(--sp-ink-soft);
    max-width: 52ch;
    margin: 0 0 1.5rem;
}

/* Assurance row. Same dash marker as .pricing-usps, stacked tighter because it
   sits between the lead and the buttons rather than under a price. */
.home-hero__usps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    list-style: none;
    padding: 0;
    /* Core CSS applies `ul { width: 100%; margin: 0 auto !important }`. */
    margin: 0 0 1.75rem !important;
    width: auto;
    max-width: none;
}

.home-hero__usps li {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 1.9rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sp-ink-soft);
}

/* Checkmark in a soft accent disc. Both colours come from the accent settings
   in theme.json: the disc is a tint of --sp-accent (sky blue), the tick uses
   --sp-accent-text (brand navy) — the same pairing the admin lets a merchant
   recolour. ::before is the disc, ::after the border-drawn tick centred on it. */
.home-hero__usps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--sp-accent) 24%, var(--sp-surface));
}

.home-hero__usps li::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 4.5px;
    height: 8px;
    border: solid var(--sp-accent-text);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -62%) rotate(45deg);
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.home-hero__cta {
    width: auto;
    border-radius: var(--sp-radius-pill);
    padding: 0.85rem 1.9rem;
}

.home-hero__note {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    color: var(--sp-ink-muted);
}

/* --- Right column: the preview panel ----------------------------------- */
.home-hero__visual {
    position: relative;
    /* Keeps the badge that overhangs the panel from widening the grid column. */
    min-width: 0;
}

/* The slider itself. The stage is a fixed 16:9 box the slides sit inside, so
   swapping a slide never changes the height of the hero. Slides stack on top of
   each other and cross-fade; only the active one is readable to a screen reader. */
.home-slider {
    position: relative;
}

.home-slider__stage {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--sp-radius-card);
    background: var(--sp-surface);
    border: 1px solid var(--sp-line);
    box-shadow: var(--sp-shadow-raised);
    overflow: hidden;
}

.home-slider__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    /* Short on purpose. Two pale interfaces dissolving through each other is a
       muddle at any length, so the swap is quick rather than languid. */
    transition: opacity var(--sp-dur) var(--sp-ease),
                visibility var(--sp-dur) var(--sp-ease);
}

.home-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
}

.home-slider__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* The name of the screen, on the shot itself. Sits on a scrim rather than a
   solid bar, so the interface behind it stays visible. */
.home-slider__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.75rem 1rem 0.7rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sp-surface);
    background: linear-gradient(to top,
        color-mix(in srgb, var(--sp-text) 82%, transparent),
        transparent);
}

/* On a phone the whole 16:9 shot shrinks to the point where the interface in it
   is a grey blur. A taller box crops the right-hand side away and enlarges what
   is left, which is the sidebar and the first columns: the part that reads as a
   real screen. */
@media (max-width: 620px) {
    .home-slider__stage {
        aspect-ratio: 4 / 3;
    }

    .home-slider__img {
        object-position: top left;
    }
}

/* Hidden until the script takes over, so nobody is offered a control that does
   nothing. The `hidden` attribute in the markup is what the script removes. */
.home-slider__dots {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.home-slider__dots[hidden] {
    display: none;
}

/* The button is the tap target and the dot is only what you see inside it, drawn
   by the pseudo-element. Sizing it the other way round (a 9px button with an
   oversized ::before hanging outside it) made neighbouring targets overlap, so a
   click near the edge of one dot landed on the next one along. */
.home-slider__dot {
    position: relative;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.home-slider__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sp-ink) 22%, transparent);
    transition: background-color var(--sp-dur) var(--sp-ease),
                transform var(--sp-dur) var(--sp-ease);
}

.home-slider__dot:hover::before {
    background: color-mix(in srgb, var(--sp-ink) 45%, transparent);
}

.home-slider__dot.is-active::before {
    background: var(--sp-accent);
    transform: scale(1.35);
}

/* --- Arrows over the shot ---------------------------------------------------
   Sit on the image itself, vertically centred, and stay visible rather than
   appearing on hover: on a touch screen there is no hover, and a control that
   only exists for mouse users is not a control. */
.home-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border: 1px solid var(--sp-line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--sp-surface) 88%, transparent);
    color: var(--sp-ink);
    cursor: pointer;
    box-shadow: var(--sp-shadow-raised);
    transition: background-color var(--sp-dur) var(--sp-ease),
                transform var(--sp-dur) var(--sp-ease);
}

.home-slider__arrow:hover {
    background: var(--sp-surface);
    transform: scale(1.06);
}

.home-slider__arrow[hidden] {
    display: none;
}

.home-slider__arrow--prev {
    left: 0.65rem;
}

.home-slider__arrow--next {
    right: 0.65rem;
}

@media (max-width: 620px) {
    .home-slider__arrow {
        width: 34px;
        height: 34px;
        margin-top: -17px;
    }
}

/* --- Narrower viewports ------------------------------------------------ */
@media (max-width: 980px) {
    .home-hero__inner {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 6vw, 3rem);
    }

    .home-hero__title,
    .home-hero__intro {
        max-width: none;
    }

    /* The slider keeps its place in the reading order but stops competing with
       the headline: capped width. The explicit width matters, since as a flex
       item next to `align-items: flex-start` below it would otherwise shrink to
       the intrinsic width of its absolutely positioned slides, which is nothing
       at all. */
    .home-slider {
        width: 100%;
        max-width: 520px;
    }

    .home-hero__visual {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .home-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .home-hero__cta {
        width: 100%;
    }
}


/* --- Homepage: facts strip --------------------------------------------------
   The offer in four numbers, directly under the hero. No panels and no filled
   cells: the figures sit straight on the page, separated only by a hairline
   between the columns, so the strip reads as a line of facts rather than four
   grey blocks. */
.home-facts {
    padding: 0 0 var(--sp-section-y-sm);
}

/* The four facts sit inside one hairline card, divided by internal rules, rather
   than floating free on the page — it reads as a single designed strip and
   anchors the numbers directly under the hero. */
.home-facts__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-card);
    background: var(--sp-surface);
    overflow: hidden;
}

.home-fact {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.25rem, 2.6vw, 1.9rem);
    border-left: 1px solid var(--sp-line);
}

.home-fact:first-child {
    border-left: 0;
}

.home-fact__value {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: var(--sp-display-weight);
    letter-spacing: var(--sp-display-tracking);
    line-height: 1.05;
    color: var(--sp-ink);
}

.home-fact__label {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--sp-ink-muted);
}

@media (max-width: 760px) {
    .home-facts__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Two columns: every left-hand cell opens a row, so it loses the divider;
       the bottom row gains a top rule to separate it from the row above. */
    .home-fact:nth-child(odd) {
        border-left: 0;
    }

    .home-fact:nth-child(n + 3) {
        border-top: 1px solid var(--sp-line);
    }
}

/* --- Trust bar ---------------------------------------------------------------
   The customer-logo strip under the facts. Label on the left, a balanced row of
   logo slots on the right, framed top and bottom by full-width hairlines so it
   reads as its own quiet band between the facts and the value grid. */
.home-trust {
    border-top: 1px solid var(--sp-line);
    border-bottom: 1px solid var(--sp-line);
    padding: clamp(1.25rem, 3vw, 1.75rem) 0;
}

.home-trust__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.home-trust__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sp-ink-muted);
}

.home-trust__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    list-style: none;
    margin: 0 !important;
    padding: 0;
    width: auto;
    max-width: none;
}

/* Real customer logos, sized to a common height so mixed marks sit on one line.
   Slightly dimmed so the colourful set reads as a quiet row, full strength on
   hover. */
.home-trust__logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity var(--sp-dur) var(--sp-ease);
}

.home-trust__logo:hover {
    opacity: 1;
}

/* --- Value grid (home "what you get") ----------------------------------------
   Six separate bordered cards, each led by a rounded icon tile. The tile colours
   cycle across the columns — a: accent (sky blue), b: highlight (amber),
   c: ink (navy) — as soft tints with a stronger icon on top, so the whole set
   stays inside the merchant's palette. */
.home-value__eyebrow {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--sp-accent) 82%, var(--sp-ink));
}

.home-value__title {
    margin-bottom: 1rem;
}

.home-value__lede {
    margin-top: 0;
}

.home-value__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 900px) {
    .home-value__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .home-value__grid {
        grid-template-columns: 1fr;
    }
}

.home-value__card {
    padding: clamp(1.5rem, 2.5vw, 2rem);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-card);
    background: var(--sp-surface);
}

.home-value__icon {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.25rem;
    border-radius: calc(var(--border-radius) + 2px);
}

.home-value__icon svg {
    width: 23px;
    height: 23px;
}

.home-value__icon--a {
    background-color: color-mix(in srgb, var(--sp-accent) 22%, var(--sp-surface));
    color: color-mix(in srgb, var(--sp-accent) 70%, var(--sp-ink));
}

.home-value__icon--b {
    background-color: color-mix(in srgb, var(--sp-highlight) 26%, var(--sp-surface));
    color: color-mix(in srgb, var(--sp-highlight) 52%, var(--sp-ink));
}

.home-value__icon--c {
    background-color: color-mix(in srgb, var(--sp-ink) 8%, var(--sp-surface));
    color: var(--sp-ink);
}

.home-value__card-title {
    margin: 0 0 0.5rem;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--sp-ink);
}

.home-value__card-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--sp-ink-soft);
}

/* --- Steps (home "how you start") --------------------------------------------
   The shared hub-steps block is a joined hairline grid; the homepage takes its
   own treatment — a centred header over separate elevated cards on a soft accent
   wash, each led by a large faint number. Same copy as before, new design. */
.home-steps {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--sp-accent) 10%, var(--sp-surface)),
        var(--sp-surface)
    );
}

.home-steps__head {
    max-width: 40ch;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.home-steps__eyebrow {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--sp-accent) 82%, var(--sp-ink));
}

.home-steps__title {
    max-width: none;
    margin: 0;
}

.home-steps__grid {
    list-style: none;
    margin: 0 !important;
    padding: 0;
    width: auto;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
}

/* Match the track count to the number of steps present, so a three-step set
   (some hub pages) does not leave an empty fourth column. */
@media (min-width: 901px) {
    .home-steps__grid:has(> :last-child:nth-child(3)) {
        grid-template-columns: repeat(3, 1fr);
    }

    .home-steps__grid:has(> :last-child:nth-child(2)) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .home-steps__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .home-steps__grid {
        grid-template-columns: 1fr;
    }
}

.home-steps__card {
    padding: clamp(1.5rem, 2.5vw, 2rem);
    background: var(--sp-surface);
    border-radius: var(--sp-radius-card);
    box-shadow: var(--sp-shadow-card);
}

.home-steps__num {
    display: block;
    margin-bottom: 1rem;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: color-mix(in srgb, var(--sp-accent) 24%, var(--sp-surface));
}

.home-steps__card-title {
    margin: 0 0 0.5rem;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--sp-ink);
}

.home-steps__card-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--sp-ink-soft);
}

/* --- Made in Europe band (home) ----------------------------------------------
   A navy two-column close-out: copy on the left, four proof points on the right.
   The section carries .sp-dark, so ink and the card surface/line tokens are the
   flipped (on-navy) set; the icons pick up the accent. */
.home-eu__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

@media (max-width: 860px) {
    .home-eu__inner {
        grid-template-columns: 1fr;
        gap: clamp(1.75rem, 5vw, 2.5rem);
    }
}

.home-eu__eyebrow {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sp-accent);
}

.home-eu__intro {
    margin: 1rem 0 0;
    max-width: 46ch;
    line-height: 1.7;
    color: var(--sp-ink-soft);
}

/* "What it costs": copy on the left, the square illustration on the right. Same
   two-column rhythm as the EU band above, collapsing to a single column (copy
   first, image below) on narrow screens. */
.home-price__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

@media (max-width: 860px) {
    .home-price__inner {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 5vw, 2.25rem);
    }
}

.home-price__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 460px;
    margin-inline: auto;
    border-radius: var(--sp-radius-card);
    box-shadow: var(--sp-shadow-card);
}

.home-eu__grid {
    list-style: none;
    margin: 0 !important;
    padding: 0;
    width: auto;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.85rem, 1.5vw, 1.25rem);
}

@media (max-width: 460px) {
    .home-eu__grid {
        grid-template-columns: 1fr;
    }
}

.home-eu__card {
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 2.2vw, 1.75rem);
    background: var(--sp-veil);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-card);
}

.home-eu__icon {
    display: block;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--sp-accent);
}

.home-eu__icon svg {
    width: 22px;
    height: 22px;
}

.home-eu__card-title {
    margin: 0 0 0.4rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--sp-ink);
}

.home-eu__card-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--sp-ink-soft);
}

/* --- Screenshots -------------------------------------------------------------
   A product screenshot needs a frame: without one it bleeds into the page and
   reads as decoration rather than as a picture of the actual product. The frame
   is a hairline plus the sunken surface, so it stays quiet, and the image keeps
   its own 16:9 box whatever the column width. */
.media-shot {
    margin: 0;
}

.media-shot__frame {
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-card);
    background: var(--sp-veil);
    overflow: hidden;
}

.media-shot__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top center;
}

.media-shot__caption {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--sp-ink-muted);
    max-width: 60ch;
}

/* Two up on desktop, stacked below the tablet breakpoint: any narrower and the
   interface in the shot stops being readable. */
.media-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.25rem, 3vw, 2.25rem);
}

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

/* --- Homepage: the two ways to start ----------------------------------------
   Two choice cards, each closing on its own sign-up button. Outlined rather
   than filled: the page already carries its weight in type, and a pair of
   large tinted panels here would shout over the section that follows. The
   border warms on hover so the whole card reads as one target even though only
   the button is clickable. */
.home-start__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: stretch;
}

.home-start__card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-card);
    transition: border-color var(--sp-dur) var(--sp-ease);
}

.home-start__card:hover {
    border-color: color-mix(in srgb, var(--sp-accent) 55%, var(--sp-line));
}

.home-start__eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sp-ink-muted);
}

.home-start__title {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--sp-display-tracking);
    color: var(--sp-ink);
    margin: 0;
}

.home-start__text {
    margin: 0;
    color: var(--sp-ink-soft);
    line-height: 1.55;
}

/* Same tick as the comparison list. Core CSS applies
   `ul { width: 100%; margin: 0 auto !important }`, hence the overrides. */
.home-start__list {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0.5rem !important;
    width: auto;
    max-width: none;
    display: grid;
    gap: 0.55rem;
}

.home-start__list li {
    position: relative;
    padding-left: 1.9rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--sp-ink-soft);
}

/* Amber tick on a soft amber disc — the highlight-coloured counterpart of the
   blue hero USPs, so every checklist in the theme carries the same disc marker.
   ::before is the disc, ::after the border-drawn tick, anchored to the first
   line so it stays put when the copy wraps. */
.home-start__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--sp-highlight) 24%, var(--sp-surface));
}

.home-start__list li::after {
    content: "";
    position: absolute;
    left: 10px;
    top: calc(0.1rem + 10px);
    width: 4.5px;
    height: 8px;
    border: solid var(--sp-highlight);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -62%) rotate(45deg);
}

/* Pushed to the bottom edge so both buttons line up however long the copy is.
   Width and radius match the other page buttons, which are pills sized to their
   label; the button base stretches to full width without this. */
.home-start__cta {
    align-self: flex-start;
    width: auto;
    margin-top: auto;
    border-radius: var(--sp-radius-pill);
    padding: 0.8rem 1.9rem;
}

.home-start__aside {
    margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
}

.home-start__link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--link-color);
}

.home-start__arrow {
    transition: transform var(--sp-dur) var(--sp-ease);
}

.home-start__link:hover .home-start__arrow {
    transform: translateX(3px);
}

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

/* --- Homepage: the product explained by contrast ---------------------------
   Two columns, the second one on the brand surface. .sp-dark on that column
   flips the ink context, so the heading and the list inside need no dark twin
   of their own. */
.home-compare {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: stretch;
}

.home-compare__col {
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--sp-radius-card);
    background: var(--sp-veil);
    border: 1px solid var(--sp-line);
}

/* The brand fill has to be restated here. .sp-dark sets `background: var(--main-color)`
   too, but it lives near the top of this file while .home-compare__col sits at the
   bottom with the same specificity, so source order handed the background back to
   --sp-veil — which .sp-dark had just flipped to white-at-6%. The result was white text
   on an almost white panel. */
.home-compare__col--brand {
    background: var(--main-color);
    border-color: transparent;
    box-shadow: var(--sp-shadow-card);
}

.home-compare__head {
    margin: 0 0 1rem;
    font-size: var(--sp-display-3);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sp-ink);
}

.home-compare__list {
    list-style: none;
    padding: 0;
    /* Core CSS applies `ul { width: 100%; margin: 0 auto !important }`. */
    margin: 0 !important;
    width: auto;
    max-width: none;
    display: grid;
    gap: 0.7rem;
}

.home-compare__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.45;
    color: var(--sp-ink-soft);
}

/* A dash for the situation being left behind, a tick for what replaces it. Both
   drawn from the ink context, so they read on the light and the brand column. */
.home-compare__list li::before {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 2px;
    margin-top: 0.7rem;
    border-radius: 2px;
    background: var(--sp-ink-faint);
}

.home-compare__list--check li::before {
    /* Tick: two borders on a rotated box, so it needs no icon font or SVG. */
    width: 9px;
    height: 5px;
    margin-top: 0.45rem;
    border: 2px solid var(--sp-highlight);
    border-top: 0;
    border-right: 0;
    border-radius: 1px;
    background: transparent;
    transform: rotate(-45deg);
}

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

/* --- Homepage: reviews ------------------------------------------------------
   Uses .proof-grid / .proof-card. Three quotes read best as three columns, and
   the accent rule on each card is what ties them to the rest of the brand. */
.home-reviews .proof-grid {
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 860px) {
    .home-reviews .proof-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Industry / niche landing: info band -----------------------------------
   The one section written for the niche, between the generic "what you get"
   cards and the steps. It sits on the sunken wash (.hub-section--muted) and is
   centred, so it reads as a distinct block of industry copy rather than another
   left-aligned marketing section. Everything inherits the merchant's palette
   through the shared .hub-section / .home-value / .hub-prose tokens. */
/* Two-column row: on the left an eyebrow, heading, accent rule and short
   sub-heading; on the right a lead paragraph, the body copy and feature chips.
   The left column is a touch narrower so the heading stacks and the body has
   room to breathe. */
.industry-info__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.industry-info__title {
    margin: 0.25rem 0 0;
}

/* The one warm mark in the block: a short amber rule under the heading. */
.industry-info__rule {
    display: block;
    width: 44px;
    height: 4px;
    margin: 1.25rem 0 0;
    border-radius: var(--sp-radius-pill);
    background: var(--sp-highlight);
}

.industry-info__sub {
    margin: 1.25rem 0 0;
    max-width: 32ch;
    color: var(--sp-text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Right column: a larger lead paragraph over the body copy. */
.industry-info__lead {
    margin: 0 0 1.25rem;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    line-height: 1.5;
    font-weight: 500;
    color: var(--sp-ink);
}

.industry-info__prose {
    max-width: none;
}

/* Feature chips: pills with a small accent dot, wrapping under the body. The
   fill is a light tint of the merchant's accent over the surface, so it tracks
   the palette. */
.industry-info__chips {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.industry-info__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--sp-radius-pill);
    background: color-mix(in srgb, var(--sp-accent) 14%, var(--sp-surface));
    color: var(--sp-ink);
    font-size: 0.9375rem;
    font-weight: 600;
}

.industry-info__chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sp-accent);
}

@media (max-width: 880px) {
    .industry-info__grid {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 5vw, 2.25rem);
    }

    .industry-info__sub {
        max-width: none;
    }
}

/* --- Industry / niche landing: hero atmosphere image -----------------------
   Replaces the homepage admin slider in the hero. One merchant-set photo of the
   trade, carrying the theme's card rounding and raised shadow so it sits like
   every other panel. When no image is set the same rounded box shows a striped
   placeholder with a hint, so the two-column hero keeps its balance. */

/* The industry hero puts the title full width above the two columns (see
   industry.twig), so the copy and the atmosphere image below each get more room
   than the homepage's title-in-the-left-column layout allows. Scoped to
   .industry so the homepage hero keeps its own layout. */
.industry-hero__title {
    max-width: 30ch;
    margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

/* With the title lifted out, split the row a touch in the image's favour — a
   photo carries the hero better with a bit more width than the homepage slider. */
.industry-hero__inner {
    grid-template-columns: 1fr 1.15fr;
}

/* Mobile / single-column hero. The shared 980px rule collapses .home-hero__inner
   to one column and turns .home-hero__visual into a flex column with
   align-items: flex-start — which caps the homepage slider but leaves the
   industry photo without a width, so as a flex item it would shrink to nothing.
   Give the sfeerbeeld the same width treatment the slider gets, and let the
   full-width title use the whole column again. */
@media (max-width: 980px) {
    /* This rule sits later in the file than the shared .home-hero__inner mobile
       rule and carries equal specificity, so without repeating the single-column
       here the two-column split above would keep winning on mobile. */
    .industry-hero__inner {
        grid-template-columns: 1fr;
    }

    .industry-hero__title {
        max-width: none;
        margin-bottom: clamp(1.25rem, 5vw, 2rem);
    }

    .industry-sfeerbeeld {
        width: 100%;
        max-width: 520px;
    }
}

.industry-sfeerbeeld {
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--sp-radius-card);
    overflow: hidden;
    background: var(--sp-surface);
    border: 1px solid var(--sp-line);
    box-shadow: var(--sp-shadow-raised);
}

.industry-sfeerbeeld__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Empty state: the diagonal-stripe tile, centred hint chip on top. Colours are
   the merchant's sunken surface and subtle border, so it recolours with the
   palette. */
.industry-sfeerbeeld--placeholder {
    display: grid;
    place-items: center;
    background-color: var(--sp-surface-sunken);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0 14px,
        color-mix(in srgb, var(--sp-border-subtle) 60%, transparent) 14px 28px
    );
}

.industry-sfeerbeeld__hint {
    padding: 0.4rem 0.9rem;
    border-radius: var(--sp-radius-pill);
    background: var(--sp-surface);
    border: 1px solid var(--sp-line);
    color: var(--sp-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* --- Industry / niche landing: template examples ---------------------------
   A showcase strip of ready-made designs. A header row (eyebrow + heading on the
   left, an "all templates" link on the right) over a row of preview cards. The
   previews are placeholder tiles for now: the same striped fill as the empty
   sfeerbeeld, with a monospace label chip, then a name and a one-line note. */
.industry-templates__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.industry-templates__title {
    margin: 0;
}

.industry-templates__all {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--sp-ink);
    text-decoration: none;
    white-space: nowrap;
}

.industry-templates__all:hover {
    color: var(--sp-accent);
}

.industry-templates__arrow {
    transition: transform var(--sp-dur) var(--sp-ease);
}

.industry-templates__all:hover .industry-templates__arrow {
    transform: translateX(3px);
}

.industry-templates__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
}

.industry-templates__card {
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-card);
    overflow: hidden;
    background: var(--sp-surface);
    box-shadow: var(--sp-shadow-card);
    transition: box-shadow var(--sp-dur) var(--sp-ease),
                transform var(--sp-dur) var(--sp-ease);
}

.industry-templates__card:hover {
    box-shadow: var(--sp-shadow-raised);
    transform: translateY(-2px);
}

.industry-templates__media {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    background-color: var(--sp-surface-sunken);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0 14px,
        color-mix(in srgb, var(--sp-border-subtle) 60%, transparent) 14px 28px
    );
}

.industry-templates__chip {
    padding: 0.35rem 0.85rem;
    border-radius: var(--sp-radius-pill);
    background: var(--sp-surface);
    border: 1px solid var(--sp-line);
    color: var(--sp-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

.industry-templates__body {
    padding: 1.1rem 1.25rem 1.35rem;
}

.industry-templates__name {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    color: var(--sp-ink);
}

.industry-templates__sub {
    margin: 0;
    color: var(--sp-text-muted);
}

@media (max-width: 900px) {
    .industry-templates__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .industry-templates__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Comparison / "alternative to" landing (templates/comparison.twig)
   A SitePack vs. <competitor> page. Every colour is a merchant token: the sky
   accent, the amber highlight, the navy brand surface and their derived tints.
   ========================================================================== */

/* Amber call-to-action, the one warm button. Pairs with .btn-lg for size. */
.btn-highlight {
    display: inline-block;
    background-color: var(--sp-highlight);
    color: var(--highlight-color-text);
    border: none;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: filter var(--sp-dur) var(--sp-ease);
}

.btn-highlight:hover,
.btn-highlight:focus,
.btn-highlight:active {
    filter: brightness(96%);
    color: var(--highlight-color-text);
}

/* Shared section heading bits. */
/* Same eyebrow as the rest of the theme (see .home-value__eyebrow): an
   ink-softened accent, not a pure sky, so it reads as a label and not a link. */
.compare-eyebrow {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--sp-accent) 82%, var(--sp-ink));
}

.compare-heading {
    text-align: center;
    max-width: 40ch;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.compare-heading--left {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

.compare-heading__title {
    font-size: var(--sp-display-2);
    font-weight: var(--sp-display-weight);
    letter-spacing: var(--sp-display-tracking);
    line-height: 1.1;
    color: var(--sp-ink);
    margin: 0.75rem 0 0;
    text-wrap: pretty;
}

/* --- Hero ---------------------------------------------------------------- */
.compare-hero {
    background:
        radial-gradient(1200px 600px at 78% -10%, color-mix(in srgb, var(--sp-accent) 22%, transparent), transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--sp-accent) 7%, var(--sp-surface)) 0%, var(--sp-surface) 72%);
}

.compare-hero__inner {
    max-width: 900px;
    padding-top: clamp(3rem, 6vw, 4.75rem);
    padding-bottom: 1.5rem;
    text-align: center;
}

/* The hero label is the shared .badge component (.badge--accent); nothing to add
   but the letter-spacing that suits an all-caps-free short label at hero scale. */
.compare-hero__badge {
    letter-spacing: 0.01em;
}

.compare-hero__title {
    font-size: clamp(2.4rem, 5vw, 3.5rem);
    font-weight: var(--sp-display-weight);
    line-height: 1.05;
    letter-spacing: var(--sp-display-tracking);
    color: var(--sp-ink);
    margin: 1.35rem 0 0;
    text-wrap: balance;
}

.compare-hero__accent {
    color: var(--sp-highlight);
}

.compare-hero__intro {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    color: var(--sp-text-body);
    max-width: 600px;
    margin: 1.25rem auto 0;
}

.compare-hero__actions {
    display: flex;
    gap: 0.875rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.75rem;
}

/* Pill CTAs, the same shape as every other hero in the theme (see
   .home-hero__cta / .hub-hero__cta): auto width, fully rounded, roomy padding. */
.compare-hero__actions .btn-primary,
.compare-hero__actions .btn-outline {
    width: auto;
    border-radius: var(--sp-radius-pill);
    padding: 0.85rem 1.9rem;
}

.compare-hero__note {
    font-size: 0.875rem;
    color: var(--sp-text-muted);
    margin: 1rem 0 0;
}

/* --- Quick verdict cards ------------------------------------------------- */
.compare-verdicts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.compare-verdict {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border-subtle);
    border-radius: var(--sp-radius-card);
    padding: clamp(1.5rem, 2.5vw, 1.75rem);
    box-shadow: var(--sp-shadow-card);
}

/* The verdict icon tile reuses the shared .home-value__icon component (sky/amber/
   navy variants), so there is no verdict-specific tile style here. */
.compare-verdict__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sp-ink);
    margin: 1.1rem 0 0;
}

.compare-verdict__text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sp-text-muted);
    margin: 0.5rem 0 0;
}

/* --- Comparison table ---------------------------------------------------- */
.compare-table-section {
    background: var(--sp-surface);
}

.compare-table-section .container-element {
    max-width: 1080px;
}

/* Scoped to the comparison section: this is the CSS-grid "SitePack vs competitor"
   card, a different component that happens to share the .compare-table name with
   the <table>-based feature matrices above. Without the scope its border, radius
   and raised shadow bled onto every price matrix, doubling their frame. */
.compare-table-section .compare-table {
    border: 1px solid var(--sp-border-subtle);
    border-radius: var(--sp-radius-card);
    overflow: hidden;
    box-shadow: var(--sp-shadow-raised);
}

.compare-table__head,
.compare-table__row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
}

.compare-table__row {
    border-top: 1px solid var(--sp-border-subtle);
}

/* Zebra: every second data row a hair darker than white. */
.compare-table__row:nth-child(odd) {
    background: color-mix(in srgb, var(--sp-accent) 4%, var(--sp-surface));
}

.compare-table__corner {
    background: color-mix(in srgb, var(--sp-accent) 7%, var(--sp-surface));
}

.compare-table__col {
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.compare-table__col:not(.compare-table__col--brand) {
    background: color-mix(in srgb, var(--sp-accent) 7%, var(--sp-surface));
}

.compare-table__col--brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--main-color);
    color: var(--main-color-text);
}

.compare-table__logo {
    width: 26px;
    height: 26px;
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--main-color-text) 16%, transparent);
}

.compare-table__brand {
    font-size: 1.125rem;
    font-weight: 800;
}

.compare-table__competitor {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sp-text-muted);
}

.compare-table__feature {
    padding: 1.4rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.compare-table__label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sp-ink);
}

.compare-table__note {
    font-size: 0.8125rem;
    color: var(--sp-text-muted);
    margin-top: 0.2rem;
}

.compare-cell {
    padding: 1.4rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
}

.compare-cell--brand {
    background: color-mix(in srgb, var(--sp-accent) 6%, transparent);
}

.compare-cell__icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
}

.compare-cell__icon--brand {
    background: color-mix(in srgb, var(--sp-accent) 18%, var(--sp-surface));
    color: var(--sp-ink);
}

.compare-cell__icon--yes {
    background: color-mix(in srgb, var(--sp-text-muted) 14%, var(--sp-surface));
    color: var(--sp-text-muted);
}

.compare-cell__icon--no {
    background: var(--sp-surface-hover);
    color: color-mix(in srgb, var(--sp-text-muted) 55%, var(--sp-surface));
}

.compare-cell__value {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--sp-ink);
}

.compare-cell__value--muted {
    color: var(--sp-text-muted);
    font-weight: 400;
}

.compare-table__footnote {
    font-size: 0.8125rem;
    color: var(--sp-text-muted);
    text-align: center;
    margin: 1.1rem 0 0;
}

/* --- Why switch: reasons ------------------------------------------------- */
/* These two sections sit on the soft sky wash (the same tint as the hero and the
   table columns), not the grey sunken surface, so the white cards read against a
   faint blue rather than a flat grey. */
.compare-reasons,
.compare-migration {
    background: color-mix(in srgb, var(--sp-accent) 7%, var(--sp-surface));
}

.compare-reasons__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

.compare-reason {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border-subtle);
    border-radius: var(--sp-radius-card);
    padding: clamp(1.5rem, 2.5vw, 2rem);
    box-shadow: var(--sp-shadow-card);
}

.compare-reason__num,
.compare-step__num {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: color-mix(in srgb, var(--sp-accent) 32%, var(--sp-surface-sunken));
}

.compare-reason__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sp-ink);
    margin: 0.875rem 0 0;
}

.compare-reason__text,
.compare-step__text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--sp-text-muted);
    margin: 0.5rem 0 0;
}

/* --- Pricing snapshot ---------------------------------------------------- */
.compare-price-section {
    background: var(--sp-surface);
}

.compare-price__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

.compare-price__intro {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--sp-text-body);
    max-width: 460px;
    margin: 1rem 0 0;
}

.compare-price__list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.compare-price__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--sp-text);
}

/* Sky check, the same "included" mark as the SitePack column in the table, so
   the page keeps amber for the few true highlights (the accented word, the price
   CTA and the "most chosen" badge) and never for plain ticks. */
.compare-price__check {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    background: color-mix(in srgb, var(--sp-accent) 18%, var(--sp-surface));
    color: var(--sp-ink);
}

.compare-price__card {
    border-radius: var(--sp-radius-card);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background:
        radial-gradient(500px 300px at 80% 0%, color-mix(in srgb, var(--sp-accent) 22%, transparent), transparent 60%),
        var(--main-color);
    color: var(--main-color-text);
}

/* The "most chosen" flag uses the shared .badge--warning (the theme's standard
   light-amber "most popular" treatment); nothing to override here but a hair of
   space before the price. */
.compare-price__badge {
    align-self: flex-start;
}

.compare-price__amount-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.875rem;
}

/* "from" prefix before the amount: small and quiet, so €15 reads as a starting
   point rather than a fixed package price. */
.compare-price__from {
    font-size: 1.05rem;
    color: color-mix(in srgb, var(--main-color-text) 72%, transparent);
}

.compare-price__amount {
    font-size: clamp(2.75rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.compare-price__period {
    font-size: 1.05rem;
    color: color-mix(in srgb, var(--main-color-text) 72%, transparent);
}

.compare-price__desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--main-color-text) 72%, transparent);
    margin: 0.5rem 0 0;
}

.compare-price__cta {
    display: block;
    width: 100%;
    margin-top: 1.75rem;
    border-radius: var(--sp-radius-pill);
}

.compare-price__note {
    font-size: 0.8125rem;
    text-align: center;
    color: color-mix(in srgb, var(--main-color-text) 60%, transparent);
    margin: 0.875rem 0 0;
}

/* --- Migration steps ----------------------------------------------------- */
.compare-migration__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(2rem, 4vw, 3.25rem);
}

.compare-step {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border-subtle);
    border-radius: var(--sp-radius-card);
    padding: clamp(1.5rem, 2.5vw, 2rem);
    box-shadow: var(--sp-shadow-card);
}

.compare-step__num {
    font-size: 2.75rem;
    letter-spacing: -0.04em;
}

.compare-step__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sp-ink);
    margin: 1rem 0 0;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
    .compare-verdicts,
    .compare-migration__grid {
        grid-template-columns: 1fr;
    }

    .compare-reasons__grid,
    .compare-price__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .compare-table__feature {
        padding: 1rem 0.85rem;
    }

    .compare-table__col,
    .compare-cell {
        padding: 1rem 0.6rem;
    }

    .compare-table__note {
        display: none;
    }

    .compare-cell__value,
    .compare-table__brand,
    .compare-table__competitor {
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   Content guide (templates/guide.twig)
   A long-form guide: hero + meta, then a two-column body with a sticky table of
   contents and the numbered article. Numbering is done in CSS (the TOC is an
   <ol>-style counter, the sections carry their own counter) so the two always
   agree, whichever sections are filled. All colours are merchant tokens.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.guide-hero {
    background: linear-gradient(180deg, color-mix(in srgb, var(--sp-accent) 8%, var(--sp-surface)) 0%, var(--sp-surface) 70%);
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--sp-border-subtle);
}

/* Narrower centred column, so the hero reads as a focused article header rather
   than a full-width band; the text inside stays left-aligned. */
.guide-hero__inner {
    max-width: 52rem;
    margin-inline: auto;
}

/* Full-width atmosphere image below the header. It spans the container width and
   keeps the image's own aspect ratio (no crop), so a wide banner shot shows in
   full. Rounded corners and the theme's raised shadow tie it to the other cards. */
.guide-hero__figure {
    margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
    border-radius: var(--sp-radius-card);
    overflow: hidden;
    box-shadow: var(--sp-shadow-raised);
    border: 1px solid var(--sp-line);
}

.guide-hero__img {
    display: block;
    width: 100%;
    height: auto;
}

.guide-hero__breadcrumb {
    font-size: 0.9rem;
    color: var(--sp-text-muted);
    margin-bottom: 1.5rem;
}

/* Category badge: the shared .badge--accent pill, but fully rounded, roomier and
   never underlined even when it links. */
.guide-hero__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 1.1rem;
    border-radius: var(--sp-radius-pill);
    font-size: 0.95rem;
    text-decoration: none;
}

.guide-hero__cat:hover,
.guide-hero__cat:focus {
    text-decoration: none;
}

.guide-hero__cat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sp-accent);
}

.guide-hero__title {
    font-size: clamp(2.1rem, 4.5vw, 3.25rem);
    font-weight: var(--sp-display-weight);
    line-height: 1.08;
    letter-spacing: var(--sp-display-tracking);
    color: var(--sp-ink);
    margin: 0;
    text-wrap: balance;
}

.guide-hero__intro {
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    line-height: 1.55;
    color: var(--sp-text-body);
    margin: 1.25rem 0 0;
}

/* --- Meta line ----------------------------------------------------------- */
.guide-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-top: 1.75rem;
    font-size: 0.95rem;
    color: var(--sp-text-muted);
}

/* A dot separator between meta items (never before the first one). */
.guide-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
}

.guide-meta__item:not(:first-child)::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sp-text-muted) 60%, transparent);
}

/* --- Two-column body ----------------------------------------------------- */
.guide-body {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-top: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
}

/* --- Sidebar: table of contents + CTA ------------------------------------ */
.guide-sidebar {
    position: sticky;
    top: 2rem;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* Reset the shared .hub-jumpnav (a sticky horizontal bar) back to a plain
   vertical list inside the sidebar; the scroll-spy JS still drives .is-active. */
.guide-toc {
    position: static;
    z-index: auto;
    background: none;
    border-bottom: none;
    backdrop-filter: none;
}

.guide-toc__label,
.guide-takeaways__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guide-toc__label {
    color: var(--sp-text-muted);
    margin-bottom: 1rem;
}

.guide-toc__list {
    list-style: none;
    counter-reset: toc;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--sp-border-subtle);
}

.guide-toc__list li {
    counter-increment: toc;
}

/* Override the .hub-jumpnav a base (block link with an underline border) for the
   vertical list. */
.guide-toc .guide-toc__list a {
    display: block;
    padding: 0.5rem 0 0.5rem 1rem;
    margin-left: -2px;
    border-bottom: none;
    border-left: 2px solid transparent;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--sp-text-muted);
    line-height: 1.4;
}

.guide-toc .guide-toc__list a::before {
    content: counter(toc) ". ";
    color: color-mix(in srgb, var(--sp-text-muted) 70%, transparent);
}

.guide-toc .guide-toc__list a:hover,
.guide-toc .guide-toc__list a:focus {
    color: var(--sp-ink);
}

.guide-toc .guide-toc__list a.is-active {
    color: var(--sp-ink);
    font-weight: 600;
    border-left-color: var(--sp-accent);
}

.guide-sidebar__cta {
    width: auto;
    border-radius: var(--sp-radius-pill);
    padding: 0.85rem 1.9rem;
    text-align: center;
}

/* --- Main: "in short" box + sections ------------------------------------- */
.guide-main {
    counter-reset: guide-sec;
    min-width: 0;
}

.guide-takeaways {
    background: color-mix(in srgb, var(--sp-accent) 6%, var(--sp-surface));
    border: 1px solid color-mix(in srgb, var(--sp-accent) 22%, var(--sp-border-subtle));
    border-radius: var(--sp-radius-card);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.guide-takeaways__label {
    color: color-mix(in srgb, var(--sp-accent) 82%, var(--sp-ink));
    margin-bottom: 1rem;
}

.guide-takeaways__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.guide-takeaways__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--sp-text);
    line-height: 1.55;
}

.guide-takeaways__check {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    background: color-mix(in srgb, var(--sp-accent) 18%, var(--sp-surface));
    color: var(--sp-ink);
}

.guide-section {
    margin-bottom: clamp(2rem, 4vw, 3rem);
    scroll-margin-top: 2rem;
}

.guide-section__title {
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    font-weight: var(--sp-display-weight);
    letter-spacing: var(--sp-display-tracking);
    line-height: 1.15;
    color: var(--sp-ink);
    margin: 0 0 1rem;
}

.guide-section__title::before {
    content: counter(guide-sec) ". ";
    counter-increment: guide-sec;
}

.guide-section__list {
    margin-top: 1rem !important;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
    .guide-body {
        grid-template-columns: 1fr;
    }

    /* The sidebar stops being sticky and sits above the article; the shared
       .hub-jumpnav hides itself under 760px, so restore the TOC here. */
    .guide-sidebar {
        position: static;
    }

    .guide-toc {
        display: block;
    }

    .guide-sidebar__cta {
        align-self: flex-start;
    }
}

/* --- Guide section: sub-heading, check list, image, note ------------------ */
.guide-section__subtitle {
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    font-weight: 700;
    color: var(--sp-ink);
    margin: 1.75rem 0 1rem;
}

/* Check list with amber ticks, the guide's own list style. */
.guide-checklist {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.guide-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--sp-text-body);
    line-height: 1.6;
}

.guide-checklist__check {
    flex: none;
    margin-top: 0.1rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    background: color-mix(in srgb, var(--sp-highlight) 26%, var(--sp-surface));
    color: color-mix(in srgb, var(--sp-highlight) 60%, var(--sp-ink));
}

/* Image / screenshot per section. */
.guide-figure {
    margin: 1.75rem 0 0;
}

.guide-figure__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sp-radius-card);
    border: 1px solid var(--sp-border-subtle);
}

.guide-figure__caption {
    margin-top: 0.7rem;
    font-size: 0.875rem;
    color: var(--sp-text-muted);
    text-align: center;
}

/* Empty state: a striped placeholder with a monospace label, so a reserved
   screenshot slot reads clearly before the image is added. */
.guide-figure--placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    border-radius: var(--sp-radius-card);
    border: 1px solid var(--sp-border-subtle);
    background-color: color-mix(in srgb, var(--sp-accent) 5%, var(--sp-surface));
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0 14px,
        color-mix(in srgb, var(--sp-border-subtle) 65%, transparent) 14px 28px
    );
}

.guide-figure__hint {
    padding: 0.5rem 1rem;
    border-radius: var(--sp-radius-pill);
    background: var(--sp-surface);
    border: 1px solid var(--sp-border-subtle);
    color: var(--sp-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

/* "Good to know" callout: a navy card (sp-dark flips the ink to light) with a
   sky eyebrow. */
.guide-note {
    border-radius: var(--sp-radius-card);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    margin: 1.75rem 0 0;
}

.guide-note__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sp-accent);
    margin-bottom: 0.6rem;
}

.guide-note__text {
    color: var(--sp-ink);
    line-height: 1.65;
    white-space: pre-line;
}

/* =========================
   Editor content pages (e.g. Contact)
   =========================
   Pages built in the SitePack editor render through the platform's content-element
   library (container-element*, the .row/.col grid, forms, USP lists), styled by
   editor_elements.css / custom_theme.css. Those sheets load before this one, so the
   rules below — scoped to the editor's own element classes, which never appear on the
   hub templates — lift those blocks into the theme's visual language (surface cards,
   hairline borders, card rounding and the raised shadow) without touching the markup.
   Everything is a merchant token, so it recolours with the palette. */

/* Contact-style form: a themed panel, echoing the hub cards and the contact-details
   block opposite it. Scoped to a form inside a column so only editor forms are carded. */
.container-element-columns .col form[id^="contact-form"] {
    background: var(--sp-surface);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-card);
    box-shadow: var(--sp-shadow-raised);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* Inputs follow the theme's input tokens even where the platform ships a bootstrap
   default (grey border, its own radius). */
.container-element-columns .col form[id^="contact-form"] .form-control {
    border-radius: var(--border-radius);
    border: 1px solid var(--sp-border);
    background-color: var(--sp-surface);
    padding: 0.6rem 0.75rem;
}

.container-element-columns .col form[id^="contact-form"] .form-control:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-accent) 45%, transparent);
    outline: none;
}

/* The submit button already themes through .btn-primary; give it room above. */
.container-element-columns .col form[id^="contact-form"] .btn {
    margin-top: 0.5rem;
}

/* USP list: align the platform's admin-coloured check icon with its text and even out
   the spacing, so it reads like the theme's own assurance rows. The icon colour is
   merchant-set inline, so it is left alone. */
.container-element-usp ul.list-usp {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.7rem;
}

.container-element-usp ul.list-usp li.navigation-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    line-height: 1.45;
}

.container-element-usp ul.list-usp li .usp-icon {
    flex: 0 0 auto;
}

/* Contact-details / opening-times block: a tight, compact card, not a full-width
   band. The platform styles it as `main .container-element-opening-times` (which
   out-specifies a bare class), and `main > *` caps every top-level block to the full
   container width — so both are overridden here, at matching specificity that wins on
   load order (this sheet is last). It caps to a narrow column, sits flush-left with the
   page content (same centring offset the hero uses), and takes the crisp card shadow
   rather than the raised one so it reads tight. */
main .container-element-opening-times {
    max-width: 340px;
    width: 100%;
    /* Flush-left with the content line (container edge + 1.5rem gutter), so the card
       lines up under the logo and the body text rather than 24px to their left. */
    margin-left: max(1.5rem, calc((100% - var(--container-width)) / 2 + 1.5rem));
    margin-right: auto;
    padding: 1.1rem 1.3rem;
    background: var(--sp-surface);
    border: 1px solid var(--sp-line);
    border-radius: var(--border-radius);
    box-shadow: var(--sp-shadow-card);
}

main .container-element-opening-times h5 {
    margin: 0 0 0.55rem;
    font-size: 1rem;
}

main .container-element-opening-times p {
    margin: 0 0 0.45rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

main .container-element-opening-times p:last-child {
    margin-bottom: 0;
}

/* Page-title heading opens as a hero band, like the guide / compare / pricing hubs:
   the theme's soft accent fade (a radial glow near the top over a gentle vertical wash
   down to the page surface, both translucent mixes of merchant tokens) and the hub hero
   title type. Scoped to a heading element that is a direct child of <main> — that is the
   full-width page title on an editor page; the in-column sub-headings sit inside
   .container-element-columns and are untouched, and the hub templates never put a
   .container-element-heading at the top of <main>. The fade runs full-bleed while the
   content stays capped to the container width via the centring padding. */
main > .container-element.container-element-heading {
    max-width: none;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    padding-top: clamp(2.5rem, 6vw, 4.5rem);
    padding-bottom: clamp(2rem, 5vw, 3.25rem);
    /* Align the title to the content line — the container edge plus the 1.5rem gutter
       that .container-element (body text) and the header nav (the logo) both use — so
       the heading sits on the same vertical as the logo above it, not 24px to its left. */
    padding-left: max(1.5rem, calc((100% - var(--container-width)) / 2 + 1.5rem));
    padding-right: max(1.5rem, calc((100% - var(--container-width)) / 2 + 1.5rem));
    background:
        radial-gradient(1200px 600px at 78% -10%, color-mix(in srgb, var(--sp-accent) 22%, transparent), transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--sp-accent) 7%, var(--sp-surface)) 0%, var(--sp-surface) 72%);
}

main > .container-element.container-element-heading h1,
main > .container-element.container-element-heading h2 {
    font-size: var(--sp-display-1);
    font-weight: var(--sp-display-weight);
    line-height: 1.03;
    letter-spacing: var(--sp-display-tracking);
    color: var(--sp-ink);
    max-width: 22ch;
    margin: 0;
}