/*
 * marcingrzegorzewski.com - own styles on top of the shareyougo stack (see views/partials/head_assets.php):
 * custom Bootstrap 5.3.8 -> transitions.css -> components-bs5.css -> this file.
 *
 * Rules (same as shareyougo and nasztuki):
 * - colors ONLY from Bootstrap variables, so light/dark (`data-bs-theme` on <html>) works without overrides.
 *   Page = --bs-body-bg, surfaces (cards, navbar) = --bs-main-bg.
 * - no class that only repeats 1-2 Bootstrap utilities - use the utility in markup instead.
 *
 * Stage 1: neutral look only. The sales site gets its own design from the accepted mockups (PLAN_BUDOWY 9).
 */

/* Bootstrap has no min-width utility - needed so long names truncate inside flex rows */
.min-w-0 {
    min-width: 0;
}

/* ------------------------------------------------------------ public pages */

.feature-icon-circle {
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ------------------------------------------------------------ login, password reset */

.auth-layout {
    min-height: 100vh;
}

.auth-content {
    width: 100%;
    max-width: 26rem;
}

/* ------------------------------------------------------------ light/dark switch (provided by Marcin) */

.mode-switch {
    cursor: pointer;
    margin-bottom: 0;
    padding: 1rem;
    transform: scale(0.8);
    border-radius: 100rem;
    border: none;
    color: var(--bs-body-color);
}

.mode-switch .toggle {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: relative;
    box-shadow: inset 8px -8px 0 0 currentcolor;
    transform: scale(1) rotate(-2deg);
    transition: box-shadow 0.5s ease 0s, transform 0.4s ease 0.1s, opacity .2s;
    opacity: .5;
}

.mode-switch:active .toggle {
    opacity: 1;
}

@media (min-width: 576px) {
    .mode-switch:hover .toggle {
        opacity: 1;
    }
}

.mode-switch:active .toggle:after {
    opacity: 1;
}

@media (min-width: 576px) {
    .mode-switch:hover .toggle:after {
        opacity: 1;
    }
}

.mode-switch .toggle.active {
    opacity: 1;
}

.mode-switch .toggle:before {
    content: "";
    width: inherit;
    height: inherit;
    border-radius: inherit;
    position: absolute;
    left: 0;
    top: 0;
    transition: background-color 0.3s ease;
}

.mode-switch .toggle:after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin: -3px 0 0 -3px;
    position: absolute;
    top: 50%;
    left: 50%;
    box-shadow: 0 -23px 0 currentcolor, 0 23px 0 currentcolor, 23px 0 0 currentcolor, -23px 0 0 currentcolor, 15px 15px 0 currentcolor, -15px 15px 0 currentcolor, 15px -15px 0 currentcolor, -15px -15px 0 currentcolor;
    transform: scale(0);
    transition: all 0.3s ease;
    opacity: .4;
}

.mode-switch .toggle.active {
    box-shadow: inset 20px -20px 0 0 currentcolor;
    transform: scale(0.5) rotate(0deg);
    transition: transform 0.3s ease 0.1s, box-shadow 0.2s ease 0s;
}

.mode-switch .toggle.active:before {
    background: currentcolor;
    transition: background-color 0.3s ease 0.1s;
}

.mode-switch .toggle.active:after {
    transform: scale(1);
    transition: transform 0.5s ease 0.15s, opacity .2s;
}

/* The shareyougo Bootstrap build gives every <label> margin-bottom: .375rem - next to a checkbox/switch it pushes the text above the control */
.form-check-label {
    margin-bottom: 0;
}

/* The custom Bootstrap fixes .form-control height at 1.5em + .9rem, but the file button keeps .375rem padding -
   it ended 2.4px above the bottom border. Match the vertical padding to the height. */
.form-control[type="file"] { padding-block: .45rem; }
.form-control::file-selector-button { padding-block: .45rem; margin-block: -.45rem; }
/* Firefox on a retina screen still left a hairline under the button (rounding, 2026-10-15): its own colour 2px above and
   below fills it - the field's overflow: hidden clips the rest at the border */
.form-control::file-selector-button { box-shadow: 0 2px 0 var(--bs-tertiary-bg), 0 -2px 0 var(--bs-tertiary-bg); }

/* ============================================================ sales site (PLAN_BUDOWY 5.4, 9; mockups CLAUDE/specs/makiety/)
   One type size for everything (Marcin 2026-10-20) - hierarchy comes from distances only. Colours, buttons and fonts
   after transitions.dev, layout our own. Scoped to body.site so the panel and the login keep Bootstrap's look.
   Colours are variables set here for both themes: light and dark - the dark one on the agencies page (.is-dark) and
   wherever the visitor's or the system's choice is dark (data-bs-theme on <html>, partials/theme_boot.php). */

body.site {
    --s-bg: #fdfdfd;
    --s-text: #0d0d0d;
    --s-muted: #6c6c6c;
    --s-line: #ececec;
    --s-card: #ffffff;
    --s-tile: #f9f9f9;
    --s-chip: #f4f4f4;
    --s-chip-active: rgba(0, 0, 0, .04);
    --s-primary-bg: #17181c;
    --s-primary-text: #ffffff;
    --s-primary-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2);
    --s-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, .04), inset 0 0 0 1px rgba(0, 0, 0, .06), inset 0 -1px 0 0 rgba(0, 0, 0, .06);
    --s-primary-hover: #2a2b31;
    --s-secondary-hover: #eae9e9;
    --s-field-bg: #ffffff;
    --s-field-border: #e5e5e5;
    --s-band: #f3f3f3;
    --s-available: #34c759;
    --s-icon-ring: rgba(0, 0, 0, .08);
    --s-size: 13px;
    --s-gutter: 40px;
    --s-section: 176px;

    margin: 0;
    background: var(--s-bg);
    color: var(--s-text);
    font: 500 var(--s-size)/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.site.is-dark,
html[data-bs-theme="dark"] body.site {
    --s-bg: #121212;
    --s-text: #ffffff;
    --s-muted: rgba(202, 202, 202, .7);
    --s-line: rgba(255, 255, 255, .07);
    --s-card: #181818;
    --s-tile: #181818;
    --s-chip: rgba(255, 255, 255, .07);
    --s-chip-active: rgba(255, 255, 255, .06);
    --s-primary-bg: #ffffff;
    --s-primary-text: #0d0d0d;
    --s-primary-shadow: none;
    --s-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, .04), inset 0 1px 0 0 rgba(255, 255, 255, .04), inset 0 0 0 1px rgba(196, 196, 196, .07);
    --s-primary-hover: #e8e8e8;
    --s-secondary-hover: rgba(255, 255, 255, .12);
    --s-field-bg: #1c1c1c;
    --s-field-border: rgba(255, 255, 255, .1);
    --s-band: #000000;
    --s-available: #30d158;
    --s-icon-ring: rgba(255, 255, 255, .08);
}

@media (max-width: 767.98px) {
    body.site {
        --s-gutter: 16px;
        --s-section: 104px;
    }
}

/* Every text element in one size and weight - Bootstrap's heading scale does not apply here */
.site h1, .site h2, .site h3, .site h4, .site p, .site ul, .site ol, .site dl, .site dd, .site dt,
.site legend, .site summary, .site strong, .site label, .site button, .site input, .site select, .site textarea, .site small {
    font: inherit;
    margin: 0;
}

.site a { color: inherit; text-decoration: none; }
.site a:hover { color: var(--s-muted); }
.site a.s-link { text-decoration: underline; text-underline-offset: 3px; }

.s-muted { color: var(--s-muted); font-weight: 400; }

.s-container {
    max-width: 1360px;
    margin: 0 auto;
    padding-left: var(--s-gutter);
    padding-right: var(--s-gutter);
}

.s-section { padding-top: var(--s-section); }
.s-section--end { padding-bottom: 120px; }
.s-stack { display: flex; flex-direction: column; gap: 40px; }
.s-stack--sm { display: flex; flex-direction: column; gap: 14px; }

/* ------------------------------------------------------------ header and footer */

.s-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 40px;
    padding-top: 28px;
    padding-bottom: 28px;
}

.s-brand { color: var(--s-text); }
.s-nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 auto; }

.s-pill {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 13px;
    border-radius: 50px;
    color: var(--s-muted) !important;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.s-pill:hover, .s-pill.is-current { background: var(--s-chip-active); color: var(--s-text) !important; }

.s-footer { border-top: 1px solid var(--s-line); margin-top: 0; }
.s-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 28px; padding-bottom: 28px; }
.s-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.s-footer__end { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.s-footer__languages { display: inline-flex;}
.s-language { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 16px; background: none; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--s-muted); }
.site .s-language:hover, .site .s-language[aria-expanded="true"] { color: var(--s-text); background: var(--s-chip); }
.s-language-menu { --bs-dropdown-min-width: 9rem; --bs-dropdown-font-size: 14px; --bs-dropdown-bg: var(--s-bg, var(--bs-body-bg)); --bs-dropdown-color: var(--s-text); --bs-dropdown-border-color: var(--s-line); --bs-dropdown-border-radius: 12px; --bs-dropdown-link-color: var(--s-text); --bs-dropdown-link-hover-color: var(--s-text); --bs-dropdown-link-hover-bg: var(--s-chip); --bs-dropdown-link-active-color: var(--s-text); --bs-dropdown-link-active-bg: var(--s-chip); --bs-dropdown-item-padding-y: 6px; --bs-dropdown-padding-y: 6px; }
.s-language-menu .dropdown-item.active { font-weight: 600; }
.s-social { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: 15px; color: var(--s-muted); }
.site a.s-social:hover { color: var(--s-text); background: var(--s-chip); }
/* An SVG icon (Socials::get_icon) the size of a Font Awesome fa-fw one - here and in the panel */
.s-social__svg { display: inline-flex; justify-content: center; width: 1.25em; }
.s-social__svg svg { width: 1em; height: 1em; }
.s-footer .mode-switch { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 0 0 4px; padding: 0; background: none; transform: scale(.65); }

/* ------------------------------------------------------------ buttons */

.s-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 26px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s cubic-bezier(.22, 1, .36, 1), color .2s cubic-bezier(.22, 1, .36, 1);
}

.s-btn--primary, .site a.s-btn--primary { background: var(--s-primary-bg); color: var(--s-primary-text); box-shadow: var(--s-primary-shadow); }
.s-btn--primary:hover, .site a.s-btn--primary:hover { background: var(--s-primary-hover); color: var(--s-primary-text); }
.s-btn--secondary, .site a.s-btn--secondary { background: var(--s-chip); color: var(--s-text); }
.s-btn--secondary:hover, .site a.s-btn--secondary:hover { background: var(--s-secondary-hover); color: var(--s-text); }
.s-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ------------------------------------------------------------ layout */

/* Home hero: two columns from one top line. Left: kicker, claim. Right: lead (on the kicker's line - two lines of text),
   actions, date. The claim sits level with the buttons: below the kicker by two lead lines and 20px (measured).*/
.s-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 32px 56px; align-items: start; padding-top: 120px; }
.s-hero__claim { display: flex; flex-direction: column; gap: calc(2 * 1.4em + 20px); }
.s-hero__offer { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.s-hero__offer > .s-availability { margin-top: -8px; }
@media (max-width: 1119.98px) { .s-hero__claim { gap: 20px; } }
@media (max-width: 767.98px) { .s-hero { padding-top: 56px; } }
.s-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 56px; align-items: end; }
.s-split--top { align-items: start; }
/* Section heads on the hero's grid: the lead starts on the same vertical line as the hero's right column */
.s-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); align-items: end; gap: 16px 56px; }
.s-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.s-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 48px 16px; }
.s-grid--half { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }
.s-grid--apps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.s-lead { max-width: 34rem; }

/* ------------------------------------------------------------ images and cards */

.s-tile { display: block; border-radius: 14px; overflow: hidden; background: var(--s-tile); aspect-ratio: 4 / 3; }
.s-tile--wide { aspect-ratio: 21 / 9; }
.s-tile--card { aspect-ratio: 16 / 10; }
.s-tile img, .s-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-figure { border-radius: 14px; overflow: hidden; background: var(--s-tile); }
.s-figure img, .s-figure video { width: 100%; height: auto; display: block; }
/* Marks on a project page: two columns of white boards, the mark with a wide margin around it (desktop) */
.s-marks { display: grid; grid-template-columns: 1fr; }
.s-marks .s-figure { background: #ffffff; box-shadow: var(--s-card-shadow); }
@media (min-width: 768px) {
    .s-marks { grid-template-columns: 1fr 1fr; }
    .s-marks .s-figure { padding: 14%; }
    /* The last board is the whole set: full width, no margin */
    .s-marks .s-figure:last-child { grid-column: 1 / -1; padding: 0; }
}

.s-caption { display: flex; justify-content: space-between; gap: 12px; }
.s-project { display: flex; flex-direction: column; gap: 14px; }

.s-card { background: var(--s-card); border-radius: 24px; box-shadow: var(--s-card-shadow); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.s-card--media { padding: 12px 12px 20px; gap: 20px; }
.s-card--media .s-card__text { padding: 0 12px; display: flex; flex-direction: column; gap: 8px; }
.s-card__end { margin-top: auto; }
.s-app { padding: 24px; }
.s-app img { width: 64px; height: 64px; border-radius: 14px; }

/* Home page projects (each photo once): a strip of up to three gallery photos - one large, two stacked beside it,
   every other strip mirrored - or a wall of small tiles for logos */
.s-case { display: flex; flex-direction: column; gap: 18px; }
.s-case__media { display: grid; gap: 16px; }
.s-case__media .s-tile { aspect-ratio: auto; height: 100%; }
.s-case__media--1 .s-tile { aspect-ratio: 21 / 9; }
.s-case__media--2 { grid-template-columns: 1fr 1fr; }
.s-case__media--2 .s-tile { aspect-ratio: 4 / 3; }
.s-case__media--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.s-case__media--3 > :first-child { grid-row: span 2; aspect-ratio: 4 / 3; }
.s-case__media--3.s-case__media--flip { grid-template-columns: 1fr 2fr; }
.s-case__media--3.s-case__media--flip > :first-child { grid-column: 2; grid-row: 1 / span 2; }
.s-case__text { display: flex; flex-direction: column; gap: 8px; }
.s-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.s-wall .s-tile { aspect-ratio: 1; background: #ffffff; box-shadow: var(--s-card-shadow); }
/* The marks stay as designed in both themes - some cannot be shown in negative (Marcin 2026-10-20) */

.s-appcase { padding: 0; overflow: hidden; gap: 0; }
/* Apps: the screens and videos side by side up to the card edges; more than fit = scrolled sideways (trackpad, finger,
   Shift + wheel, or grabbed and dragged with the mouse - js/custom.js), snapping to each screen */
.s-appcase__screens { display: flex; justify-content: safe center; gap: 12px; height: 360px; background: #000000; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.s-appcase__screens::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .s-appcase__screens.is-draggable { cursor: grab; } }
.s-appcase__screens.is-dragging { cursor: grabbing; user-select: none; }
/* No snapping while dragged and while gliding to the screen after release - the script does that smoothly */
.s-appcase__screens.is-settling { scroll-snap-type: none; }
.s-appcase__screens img, .s-appcase__screens video { height: 100%; width: auto; max-width: none; object-fit: cover; object-position: top; flex-shrink: 0; scroll-snap-align: start; user-select: none; -webkit-user-drag: none; }
/* Websites: the phone view over the bottom right corner of the strip, reaching down past it towards the name - it does
   not scroll and lets the drag through; the text below keeps clear of it */
.s-appcase__media { position: relative; }
.s-appcase__arrow { position: absolute; z-index: 2; top: 180px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #0d0d0d; font-size: 18px; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); cursor: pointer; transition: background-color .15s, transform .15s; }
.s-appcase__arrow[hidden] { display: none; }
.s-appcase__arrow:hover { background: #ffffff; }
.s-appcase__arrow:active { transform: translateY(-50%) scale(.94); }
.s-appcase__arrow:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.s-appcase__arrow--prev { left: 16px; }
.s-appcase__arrow--next { right: 16px; }
.s-appcase__phone { position: absolute; z-index: 1; right: 28px; bottom: -110px; width: 160px; height: 340px; border: 5px solid #2b2b2b; border-radius: 26px; overflow: hidden; background: #000000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .35); pointer-events: none; }
.s-appcase--phone .s-appcase__text { padding-right: 240px; min-height: 150px; }
.s-appcase__phone-track { display: flex; height: 100%; will-change: transform; }
.s-appcase__phone img, .s-appcase__phone video { display: block; flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.s-appcase__text { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.s-appcase__name { display: flex; align-items: center; gap: 14px; }
.s-appcase__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
/* App icon as the background of one element with the ring as its inset shadow - drawn together, so the ring cannot drift
   off the icon at any zoom (an <img> snaps to whole screen pixels, a ring around it does not; at 80% one CSS pixel is 1.6) */
.s-appcase__icon { flex: 0 0 50px; width: 50px; height: 50px; border-radius: 12px; background: center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--s-icon-ring); }

@media (max-width: 767px) {
    .s-case__media--3, .s-case__media--3.s-case__media--flip { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .s-case__media--3 > :first-child, .s-case__media--3.s-case__media--flip > :first-child { grid-column: 1 / span 2; grid-row: auto; }
    .s-case__media--3 > :not(:first-child) { aspect-ratio: 1; }
    .s-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .s-appcase__screens { height: 260px; justify-content: flex-start; }
    .s-appcase__arrow { top: 130px; width: 30px; height: 30px; font-size: 15px; }
    .s-appcase__phone { right: 16px; bottom: -80px; width: 110px; height: 234px; border-width: 4px; border-radius: 20px; }
    .s-appcase--phone .s-appcase__text { padding-right: 144px; min-height: 120px; }
}

/* ------------------------------------------------------------ lists */

.s-rows { list-style: none; padding: 0; margin: 0; }
.s-rows > li { padding: 18px 0; border-top: 1px solid var(--s-line); display: flex; gap: 20px; }
.s-rows > li:last-child { border-bottom: 1px solid var(--s-line); }
.s-offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); border-top: 1px solid var(--s-line); }
.s-offer > a { display: flex; flex-direction: column; gap: 8px; padding: 28px 24px 32px 0; border-bottom: 1px solid var(--s-line); }
.s-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.s-meta > div { display: flex; flex-direction: column; gap: 6px; }
.s-cta { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: 40px; }
/* The agencies band: a light grey strip in the light theme, black in the dark one - colours and buttons follow the theme */
.s-band { background: var(--s-band); }
.s-band .s-container { padding-top: 96px; padding-bottom: 96px; }
.s-section--band { margin-top: var(--s-section); }

.s-availability { display: flex; align-items: center; gap: 10px; }
.s-availability::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s-available); }

/* ------------------------------------------------------------ brief form */

.s-form { background: var(--s-card); border-radius: 24px; box-shadow: var(--s-card-shadow); padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.s-form fieldset { margin: 0; padding: 0; border: 0; }
.s-form legend { margin-bottom: 10px; }
.s-field { display: flex; flex-direction: column; gap: 8px; }
.s-field input, .s-field select, .s-field textarea {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--s-field-border);
    border-radius: 14px;
    background: var(--s-field-bg);
    color: var(--s-text);
    width: 100%;
}
.s-field textarea { padding: 12px 14px; resize: vertical; }
.s-field input:focus, .s-field select:focus, .s-field textarea:focus { outline: 2px solid var(--s-text); outline-offset: 2px; }
.s-field.is-invalid input, .s-field.is-invalid textarea, .s-field.is-invalid select { border-color: #c0392b; }
.s-field .invalid-feedback { display: block; color: #c0392b; font-weight: 400; }
.s-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border-radius: 50px; background: var(--s-chip); cursor: pointer; }
.s-form .s-chips__hint { margin: 16px 0 0; }
.s-chip:has(input:checked) { background:rgba(0, 122, 255, 0.3); }
/* Brief / message switch on /contact: a segmented control, the chosen version as a card on the chip track */
.s-switch { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 50px; background: var(--s-chip); }
.s-switch__option { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 50px; color: var(--s-muted); font-weight: 500; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.s-switch__option input { position: absolute; opacity: 0; pointer-events: none; }
.s-switch__option:has(input:checked) { background: var(--s-card); color: var(--s-text); box-shadow: var(--s-card-shadow); }
.s-switch__option:has(input:focus-visible) { outline: 2px solid var(--s-text); outline-offset: 2px; }
.site [hidden] { display: none !important; }
.s-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }

/* Alerts on the sales site - plain text in a card, no Bootstrap colours */
.site .alert { border: 0; border-radius: 14px; background: var(--s-chip); color: var(--s-text); font: inherit; padding: 14px 18px; margin-bottom: 24px; }

/* Text of pages from the panel (privacy policy): same size, distances between blocks */
.s-prose { max-width: 46rem; display: flex; flex-direction: column; gap: 14px; }
.s-prose h2 { margin-top: 32px; }
.s-prose h2:first-child { margin-top: 0; }
.s-prose ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.s-prose p, .s-prose li { color: var(--s-muted); font-weight: 400; }
.s-prose a { text-decoration: underline; text-underline-offset: 3px; }