/* ==========================================================================
   Wise Bed Manager — site stylesheet
   Single stylesheet for the whole marketing site.
   Sections:  1 tokens · 2 reset · 3 layout · 4 header · 5 hero · 6 blocks
              7 gallery + lightbox · 8 forms · 9 footer · 10 responsive
   ========================================================================== */

/* -- 1. design tokens ------------------------------------------------------ */
:root
{
    /* brand - the Wise CRM identity: ember orange #E8630A on warm neutrals.  */
    /* The scale is deliberately dark at the top so the same token can carry  */
    /* both a near-black panel and a readable orange link.                    */
    --brand-950: #14110E;
    --brand-900: #1F1A15;
    --brand-800: #7A3407;
    --brand-700: #96410A;
    --brand-600: #B04A06;
    --brand-500: #E8630A;
    --brand-200: #F1C7A4;
    --brand-100: #FBE9DC;
    --brand-050: #FDF6F0;

    /* accent - the bright end of the same ember, darkened just enough that   */
    /* white button text clears 4.5:1.                                        */
    --accent-700: #8A3B05;
    --accent-600: #B04A06;
    --accent-500: #D25705;
    --accent-100: #FCE7D5;
    --accent-bright: #E8630A;

    /* ink - warmed towards the paper identity of the first Wise CRM page.    */
    --ink-900: #221F1B;
    --ink-800: #302B25;
    --ink-700: #4A443B;
    --ink-600: #635B4F;
    --ink-500: #7E7566;
    --ink-400: #A79D8D;
    --ink-300: #D5CCBD;
    --ink-200: #E7E0D5;
    --ink-100: #F3EFE7;
    --ink-050: #FAF8F3;
    --white: #ffffff;

    --warn-bg: #FDF3E3;
    --warn-bd: #EFD7AC;

    /* type */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-head: var(--font-sans);

    /* spacing / shape */
    --wrap: 1180px;
    --wrap-narrow: 800px;
    --gap: 24px;
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .04);
    --shadow-lg: 0 18px 40px rgba(15, 23, 42, .10), 0 4px 12px rgba(15, 23, 42, .05);
    --shadow-xl: 0 30px 70px rgba(15, 23, 42, .16);

    --header-h: 68px;
}

/* -- 2. reset -------------------------------------------------------------- */
*, *::before, *::after
{
    box-sizing: border-box;
}

html
{
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
}

body
{
    margin: 0;
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-700);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

img
{
    max-width: 100%;
    height: auto;
    display: block;
}

a
{
    color: var(--brand-600);
    text-decoration: none;
}

a:hover
{
    color: var(--brand-800);
    text-decoration: underline;
}

h1, h2, h3, h4
{
    font-family: var(--font-head);
    color: var(--ink-900);
    line-height: 1.2;
    margin: 0 0 .5em;
    letter-spacing: -.015em;
    font-weight: 700;
}

h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

hr
{
    border: 0;
    border-top: 1px solid var(--ink-200);
    margin: 48px 0;
}

:focus-visible
{
    outline: 3px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 4px;
}

.visually-hidden
{
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link
{
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 200;
    background: var(--brand-800);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    transition: top .15s ease;
}

.skip-link:focus
{
    top: 0;
    color: #fff;
}

/* -- 3. layout ------------------------------------------------------------- */
.wrap
{
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}

.wrap-narrow
{
    max-width: var(--wrap-narrow);
}

/* Section rhythm. The /bm figures (72 / 48) were tuned for a site whose
   sections are mostly one paragraph tall. Wise CRM's sections carry cards and
   grids that already have generous internal padding, so the outer figure was
   reading as a gap rather than as separation. Tightened once, here, so every
   page moves together.                                                        */
.section
{
    padding: 56px 0;
}

.section--tight { padding: 40px 0; }

.section--alt
{
    background: var(--ink-050);
    border-top: 1px solid var(--ink-200);
    border-bottom: 1px solid var(--ink-200);
}

.section--brand
{
    background: linear-gradient(160deg, var(--brand-900), var(--brand-700));
    color: var(--brand-100);
}

.section--brand h2, .section--brand h3 { color: #fff; }

/* The icon sits BESIDE the heading, not above it. Two columns: the icon in
   column one of row one, everything else (h2, and the optional paragraph) in
   column two. When there is no icon the first column collapses to zero, so a
   head without an icon needs no separate rule.                                */
.section-head
{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    max-width: 760px;
    margin-bottom: 28px;
}

.section-head > * { grid-column: 2; }

.section-head > .head__icon
{
    grid-column: 1;
    grid-row: 1;
}

.section-head p
{
    font-size: 1.08rem;
    color: var(--ink-600);
    margin-bottom: 0;
}

.eyebrow
{
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-600);
    margin-bottom: 12px;
}

.lead
{
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--ink-600);
    max-width: 780px;
}

/* buttons */
.btn
{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease,
                border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary
{
    background: var(--brand-700);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.btn--primary:hover { background: var(--brand-800); color: #fff; }

.btn--accent
{
    background: var(--accent-600);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.btn--accent:hover { background: var(--accent-700); color: #fff; }

.btn--ghost
{
    background: transparent;
    border-color: var(--ink-300);
    color: var(--ink-800);
}

.btn--ghost:hover
{
    border-color: var(--brand-500);
    color: var(--brand-800);
    background: var(--brand-050);
}

.btn--on-dark
{
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.btn--on-dark:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.btn--sm { padding: 9px 18px; font-size: .9rem; }

.arrow-link
{
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.arrow-link::after
{
    content: "\2192";
    transition: transform .15s ease;
}

.arrow-link:hover::after { transform: translateX(3px); }

/* -- 4. header ------------------------------------------------------------- */
.site-header
{
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ink-200);
}

.site-header__inner
{
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--header-h);
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}

.brand
{
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

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

.brand:hover { text-decoration: none; }

.nav
{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav a, .nav .nav__toggle
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: .93rem;
    font-weight: 500;
    color: var(--ink-700);
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.nav a:hover, .nav .nav__toggle:hover
{
    background: var(--ink-100);
    color: var(--brand-800);
    text-decoration: none;
}

.nav a[aria-current="page"]
{
    color: var(--brand-800);
    font-weight: 600;
    background: var(--brand-050);
}

/* dropdown */
.dropdown { position: relative; }

.dropdown__caret
{
    width: 9px; height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}

.dropdown[data-open="true"] .dropdown__caret
{
    transform: rotate(-135deg) translate(-2px, -2px);
}

.dropdown__menu
{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    display: none;
}

.dropdown[data-open="true"] .dropdown__menu { display: block; }

.dropdown__menu a
{
    display: block;
    padding: 9px 12px;
    width: 100%;
    font-size: .93rem;
}

.dropdown__menu a small
{
    display: block;
    font-size: .8rem;
    font-weight: 400;
    color: var(--ink-500);
}

/* language switcher */
.langswitch { position: relative; margin-left: 4px; }

.langswitch__btn
{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid var(--ink-300);
    border-radius: var(--r-sm);
    background: #fff;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink-700);
    cursor: pointer;
    text-transform: uppercase;
}

.langswitch__btn:hover { border-color: var(--brand-500); color: var(--brand-800); }

.langswitch__menu
{
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    display: none;
    max-height: 70vh;
    overflow-y: auto;
}

.langswitch[data-open="true"] .langswitch__menu { display: block; }

.langswitch__menu a
{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: .92rem;
    color: var(--ink-700);
}

.langswitch__menu a:hover { background: var(--ink-100); text-decoration: none; }

.langswitch__menu a[aria-current="true"]
{
    background: var(--brand-050);
    color: var(--brand-800);
    font-weight: 600;
}

.langswitch__code
{
    font-size: .76rem;
    text-transform: uppercase;
    color: var(--ink-400);
    letter-spacing: .05em;
}

/* mobile burger */
.burger
{
    display: none;
    margin-left: auto;
    width: 42px; height: 42px;
    border: 1px solid var(--ink-300);
    border-radius: var(--r-sm);
    background: #fff;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.burger span
{
    position: absolute;
    left: 11px;
    width: 18px; height: 2px;
    background: var(--ink-800);
    transition: transform .2s ease, opacity .2s ease;
}

.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 26px; }

body.nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -- 5. hero --------------------------------------------------------------- */
.hero
{
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 460px at 12% -10%, rgba(232, 99, 10, .13), transparent 60%),
        radial-gradient(900px 520px at 88% 0%, rgba(176, 74, 6, .14), transparent 62%),
        linear-gradient(180deg, var(--brand-050), #fff 78%);
    border-bottom: 1px solid var(--ink-200);
    padding: 68px 0 118px;   /* room for the stat card to overlap the edge */
}

.hero__grid
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
}

.hero h1
{
    margin-bottom: .35em;
}

.hero__text
{
    font-size: 1.16rem;
    color: var(--ink-600);
    max-width: 33em;
}

.hero__actions
{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* The note under the hero. It used to carry an ember dot as a ::before marker,
   which worked while the note was one short line: the dot read as an accent.
   Since the Store move the note is longer and wraps, and a vertically centred
   dot beside a two-line paragraph reads as a one-item bullet list with a
   hanging indent - which is what it looked like. No marker; the badge above it
   is anchor enough.                                                           */
.hero__note
{
    margin-top: 14px;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--ink-500);
    max-width: 40em;
}

.hero__shot
{
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--ink-200);
    background: #fff;
    transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg);
}

.hero__shot img { width: 100%; }

/* page hero (inner pages) */
.pagehead
{
    background:
        radial-gradient(800px 320px at 85% -30%, rgba(232, 99, 10, .14), transparent 60%),
        linear-gradient(180deg, var(--brand-050), #fff);
    border-bottom: 1px solid var(--ink-200);
    padding: 56px 0 44px;
}

.breadcrumb
{
    font-size: .85rem;
    color: var(--ink-500);
    margin-bottom: 12px;
}

.breadcrumb a { color: var(--ink-500); }
.breadcrumb span { margin: 0 7px; color: var(--ink-300); }

/* -- 6. content blocks ----------------------------------------------------- */

/* stat strip
   When it follows the hero it is lifted so the card straddles the boundary
   between the hero gradient and the white page. Floating it in the white gap
   underneath made it read as an orphan. */
.stats-band
{
    padding: 0;
}

.stats-band--overlap
{
    position: relative;
    z-index: 5;
    margin-top: -66px;
}

.stats
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.stats__item
{
    position: relative;
    padding: 30px 26px 32px;
    text-align: center;
}

/* hairline between cells, inset top and bottom so it reads as a divider
   rather than as a table gridline */
.stats__item + .stats__item::before
{
    content: "";
    position: absolute;
    left: 0;
    top: 26px;
    bottom: 26px;
    width: 1px;
    background: var(--ink-200);
}

.stats__value
{
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--brand-800);
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

/* short accent rule under each figure, in the logo green */
.stats__value::after
{
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: var(--accent-500);
}

.stats__label
{
    margin-top: 12px;
    font-size: .87rem;
    color: var(--ink-500);
    line-height: 1.45;
    max-width: 20ch;
    margin-left: auto;
    margin-right: auto;
}

/* card grid */
.grid
{
    display: grid;
    gap: var(--gap);
}

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

.card
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.card:hover
{
    box-shadow: var(--shadow-md);
    border-color: var(--brand-200);
    transform: translateY(-2px);
}

.card h3 { margin-bottom: .4em; }

.card p:last-child { margin-bottom: 0; }

/* icon system
   One shape, four containers. Every icon is decorative — the heading beside
   it already carries the meaning — so none of them is announced. */
.icon
{
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 11px;
    border-radius: 13px;
    background: var(--brand-050);
    color: var(--brand-700);
    margin-bottom: 18px;
}

.card:hover .card__icon
{
    background: var(--brand-100);
}

.numlist__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 11px;
    background: var(--brand-050);
    color: var(--brand-600);
    flex: 0 0 auto;
}

.steps__icon
{
    position: absolute;
    right: 24px;
    top: 22px;
    width: 42px;
    height: 42px;
    padding: 9px;
    border-radius: 12px;
    background: var(--ink-050);
    color: var(--brand-500);
}

.rolecard__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    flex: 0 0 auto;
}

.usecase__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 12px;
    background: var(--accent-100);
    color: var(--accent-700);
    flex: 0 0 auto;
}

.usecase__head
{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.usecase__head h3 { margin: 0; }

.card__num
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--brand-050);
    color: var(--brand-700);
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 14px;
}

/* numbered list (benefits) */
.numlist
{
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: num;
    display: grid;
    gap: 2px;
    background: var(--ink-200);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.numlist li
{
    background: #fff;
    display: grid;
    grid-template-columns: 46px 40px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    padding: 24px 26px;
    margin: 0;
    counter-increment: num;
}

.numlist li::before
{
    content: counter(num, decimal-leading-zero);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand-200);
    line-height: 1.1;
    letter-spacing: -.03em;
}

.numlist h3 { margin-bottom: .25em; font-size: 1.08rem; }
.numlist p { margin: 0; color: var(--ink-600); }

/* split image + text */
.split
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    align-items: center;
}

.split--reverse .split__media { order: 2; }

.split__media img
{
    border-radius: var(--r-md);
    border: 1px solid var(--ink-200);
    box-shadow: var(--shadow-lg);
    width: 100%;
}

/* a drawn illustration is not a screenshot: no frame, no drop shadow */
.split__media--illus img
{
    border: 0;
    box-shadow: none;
    background: none;
}

.split__body p:last-of-type { margin-bottom: 0; }

/* steps */
.steps
{
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 20px;
}

.steps li
{
    counter-increment: step;
    position: relative;
    padding: 24px 84px 24px 84px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    margin: 0;
}

.steps li::before
{
    content: counter(step);
    position: absolute;
    left: 26px; top: 24px;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--brand-700);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

.steps h3 { margin-bottom: .3em; font-size: 1.1rem; }
.steps p { margin: 0; color: var(--ink-600); }

/* checklist */
.checklist
{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.checklist li
{
    position: relative;
    padding-left: 34px;
    margin: 0;
}

.checklist li::before
{
    content: "";
    position: absolute;
    left: 0; top: .42em;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--accent-100);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%238A3B05' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 100%;
}

/* role cards */
.rolecard
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.rolecard__head
{
    background: linear-gradient(140deg, var(--brand-800), var(--brand-600));
    color: #fff;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.rolecard__head h3 { color: #fff; margin: 0; }

.rolecard__head p
{
    margin: 4px 0 0;
    font-size: .88rem;
    color: var(--brand-100);
}

.rolecard ul
{
    list-style: none;
    padding: 22px 26px;
    margin: 0;
    display: grid;
    gap: 11px;
}

.rolecard li
{
    position: relative;
    padding-left: 26px;
    margin: 0;
    font-size: .96rem;
    color: var(--ink-600);
}

.rolecard li::before
{
    content: "";
    position: absolute;
    left: 4px; top: .62em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-500);
}

/* use cases */
.usecase
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-left: 4px solid var(--brand-600);
    border-radius: var(--r-md);
    padding: 28px 30px;
    box-shadow: var(--shadow-sm);
}

.usecase ul
{
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    gap: 9px;
}

.usecase li
{
    position: relative;
    padding-left: 26px;
    margin: 0;
    font-size: .94rem;
    color: var(--ink-600);
}

.usecase li::before
{
    content: "";
    position: absolute;
    left: 2px; top: .55em;
    width: 8px; height: 8px;
    border-radius: 2px;
    background: var(--accent-500);
}

/* courses */
.course
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 26px;
    box-shadow: var(--shadow-sm);
}

.course__meta
{
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--brand-700);
    background: var(--brand-050);
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 12px;
}

.course ul { padding-left: 1.2em; margin: 14px 0 0; }
.course li { font-size: .94rem; color: var(--ink-600); }

/* prose sections */
.prose h3 { margin-top: 1.8em; }
.prose h3:first-child { margin-top: 0; }
.prose > p { max-width: 74ch; }

.prose-block + .prose-block { margin-top: 40px; }

/* specs table */
.specs
{
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    overflow: hidden;
    background: #fff;
}

.specs__title
{
    background: var(--ink-050);
    padding: 14px 22px;
    font-weight: 700;
    color: var(--ink-900);
    border-bottom: 1px solid var(--ink-200);
}

.specs dl
{
    margin: 0;
    display: grid;
    grid-template-columns: minmax(160px, 34%) minmax(0, 1fr);
}

.specs dt, .specs dd
{
    margin: 0;
    padding: 13px 22px;
    border-bottom: 1px solid var(--ink-100);
    font-size: .96rem;
}

.specs dt { font-weight: 600; color: var(--ink-800); }
.specs dd { color: var(--ink-600); }

.specs dl > :nth-last-child(1),
.specs dl > :nth-last-child(2) { border-bottom: 0; }

/* architecture diagram
   Built from HTML boxes rather than one SVG so it reflows on a phone and the
   labels stay readable at any width — and so translations just flow. */
.arch
{
    max-width: 900px;
    margin: 0 auto;
}

.arch__tier
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 30px 32px 28px;
    text-align: center;
}

.arch__tier--server
{
    border-color: var(--brand-200);
    background: linear-gradient(180deg, var(--brand-050), #fff 60%);
}

.arch__tier-label
{
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-700);
    background: var(--brand-050);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 22px;
}

.arch__tier--server .arch__tier-label { background: #fff; }

.arch__devices
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.arch__device
{
    flex: 1 1 130px;
    max-width: 170px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 18px 12px 14px;
    background: var(--ink-050);
}

.arch__device svg
{
    width: 34px;
    height: 34px;
    margin: 0 auto 10px;
    display: block;
    fill: none;
    stroke: var(--brand-600);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.arch__device span
{
    display: block;
    font-size: .84rem;
    font-weight: 600;
    color: var(--ink-700);
}

.arch__chips
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.arch__chip
{
    border: 1px solid var(--brand-200);
    background: #fff;
    color: var(--brand-800);
    border-radius: 999px;
    padding: 9px 20px;
    font-size: .92rem;
    font-weight: 600;
}

.arch__note
{
    margin: 20px auto 0;
    max-width: 60ch;
    font-size: .93rem;
    color: var(--ink-600);
}

/* the connector between the two tiers: one vertical line running from the
   client box down into the server box, with the network label sitting on it */
.arch__link
{
    position: relative;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arch__link::before
{
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ink-300);
    transform: translateX(-50%);
}

/* arrowhead, pointing into the server */
.arch__link::after
{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--ink-400);
    border-bottom: 2px solid var(--ink-400);
    transform: translate(-50%, 0) rotate(45deg);
}

.arch__link-label
{
    position: relative;
    z-index: 1;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink-500);
    background: var(--ink-050);
    padding: 4px 16px;
    text-align: center;
}

.arch__options
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.arch__option
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 22px 24px;
}

.arch__option--primary
{
    border-color: var(--accent-500);
    border-width: 2px;
    padding: 21px 23px;
}

.arch__option h4
{
    font-size: 1rem;
    margin-bottom: .4em;
    display: flex;
    align-items: center;
    gap: 9px;
}

.arch__option--primary h4::before
{
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent-100);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%238A3B05' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 100%;
}

.arch__option p
{
    margin: 0;
    font-size: .92rem;
    color: var(--ink-600);
}

@media (max-width: 680px)
{
    .arch__tier { padding: 24px 18px; }
    .arch__link { height: 66px; }
    .arch__link-label { font-size: .78rem; padding: 4px 10px; }
    .arch__options { grid-template-columns: 1fr; }
    .arch__device { flex: 1 1 45%; }
}

/* callout */
.callout
{
    background: var(--warn-bg);
    border: 1px solid var(--warn-bd);
    border-radius: var(--r-md);
    padding: 26px 30px;
}

.callout h3 { margin-bottom: .6em; }
.callout ul { margin: 0; padding-left: 1.2em; }
.callout li { color: var(--ink-700); }

.note
{
    font-size: .92rem;
    color: var(--ink-500);
    background: var(--ink-050);
    border: 1px dashed var(--ink-300);
    border-radius: var(--r-sm);
    padding: 14px 18px;
}

/* quote */
.quote
{
    border-left: 4px solid var(--accent-500);
    padding: 6px 0 6px 28px;
    margin: 0;
    max-width: 800px;
}

.quote p
{
    font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem);
    line-height: 1.4;
    color: var(--ink-900);
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: .5em;
}

.quote cite
{
    font-style: normal;
    font-size: .88rem;
    color: var(--ink-500);
}

/* FAQ */
.faq
{
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    overflow: hidden;
    background: #fff;
}

.faq details
{
    border-bottom: 1px solid var(--ink-200);
}

.faq details:last-child { border-bottom: 0; }

.faq summary
{
    cursor: pointer;
    list-style: none;
    padding: 20px 56px 20px 24px;
    font-weight: 600;
    color: var(--ink-900);
    position: relative;
    transition: background .15s ease;
}

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

.faq summary:hover { background: var(--ink-050); }

.faq summary::after
{
    content: "";
    position: absolute;
    right: 24px; top: 27px;
    width: 10px; height: 10px;
    border-right: 2px solid var(--ink-400);
    border-bottom: 2px solid var(--ink-400);
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }

.faq__answer
{
    padding: 0 24px 22px;
    color: var(--ink-600);
}

.faq__answer p:last-child { margin-bottom: 0; }

/* CTA band */
.cta
{
    background: linear-gradient(150deg, var(--brand-900) 0%, var(--brand-700) 55%, var(--brand-600) 100%);
    color: var(--brand-100);
    border-radius: var(--r-xl);
    padding: 52px 56px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    gap: 36px;
    align-items: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.cta::after
{
    content: "";
    position: absolute;
    right: -80px; top: -120px;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: rgba(232, 99, 10, .22);
    pointer-events: none;
}

.cta h2 { color: #fff; margin-bottom: .4em; }
.cta p { margin: 0; max-width: 52ch; }

.cta__actions
{
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.cta__actions .btn { justify-content: center; }

/* contact block */
.contactcard
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 28px 30px;
    box-shadow: var(--shadow-sm);
}

.contactcard dl { margin: 0; display: grid; gap: 16px; }
.contactcard dt
{
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-400);
    font-weight: 700;
}
.contactcard dd { margin: 4px 0 0; white-space: pre-line; color: var(--ink-800); }

/* -- 7. gallery + lightbox ------------------------------------------------- */
.gallery
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

.shot
{
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    overflow: hidden;
    padding: 0;
    cursor: zoom-in;
    font-family: inherit;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.shot:hover
{
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--brand-200);
}

.shot__img
{
    position: relative;
    /* the thumbnails are letterboxed onto white at exactly 8:5, so nothing is
       ever cropped - a cropped corner does not show a screen              */
    background: #fff;
    border-bottom: 1px solid var(--ink-200);
}

.shot__img img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }

.shot__zoom
{
    position: absolute;
    right: 12px; bottom: 12px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .62);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .18s ease;
}

.shot:hover .shot__zoom { opacity: 1; }

.shot__zoom svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2; }

.shot__body { padding: 18px 20px 22px; }
.shot__body h3 { font-size: 1.02rem; margin-bottom: .35em; }
.shot__body p { margin: 0; font-size: .9rem; color: var(--ink-600); }

.gallery-hint
{
    font-size: .88rem;
    color: var(--ink-500);
    margin-bottom: 22px;
}

/* lightbox */
.lightbox
{
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(8, 15, 28, .93);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.lightbox[data-open="true"] { display: flex; }

.lightbox__figure
{
    margin: 0;
    max-width: 1200px;
    width: 100%;
    text-align: center;
}

.lightbox__figure img
{
    max-height: 74vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-xl);
    background: #fff;
}

.lightbox__caption
{
    color: #e2e8f0;
    margin-top: 18px;
    font-size: .95rem;
}

.lightbox__caption strong { display: block; color: #fff; font-size: 1.05rem; margin-bottom: 4px; }

.lightbox__count
{
    display: block;
    margin-top: 10px;
    font-size: .8rem;
    color: #94a3b8;
    letter-spacing: .05em;
}

.lightbox__btn
{
    position: absolute;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    width: 46px; height: 46px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}

.lightbox__btn:hover { background: rgba(255, 255, 255, .22); }

.lightbox__close { top: 20px; right: 20px; font-size: 1.4rem; line-height: 1; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }

.lightbox__btn svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.2; }

/* -- 8. forms -------------------------------------------------------------- */
.form
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    padding: 32px;
    box-shadow: var(--shadow-md);
}

.form__grid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide { grid-column: 1 / -1; }

.field label
{
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink-800);
}

.field .req { color: #c2410c; }

.field input, .field select, .field textarea
{
    font-family: inherit;
    font-size: .98rem;
    color: var(--ink-900);
    padding: 11px 14px;
    border: 1px solid var(--ink-300);
    border-radius: var(--r-sm);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}

.field input:focus, .field select:focus, .field textarea:focus
{
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(232, 99, 10, .22);
}

.field textarea { min-height: 130px; resize: vertical; }

.field .error
{
    font-size: .82rem;
    color: #b91c1c;
}

.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]
{
    border-color: #dc2626;
}

.field--check
{
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.field--check input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; }
.field--check label { font-weight: 400; font-size: .9rem; color: var(--ink-600); }

/* honeypot — hidden from humans, visible to naive bots */
.hp
{
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.form__actions
{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.form__privacy
{
    font-size: .84rem;
    color: var(--ink-500);
    max-width: 44ch;
    margin: 0;
}

.alert
{
    border-radius: var(--r-sm);
    padding: 14px 18px;
    margin-bottom: 22px;
    font-size: .95rem;
}

.alert--ok { background: var(--accent-100); border: 1px solid #b7d79b; color: #2f5c1d; }
.alert--err { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }

/* -- 9. footer ------------------------------------------------------------- */
.site-footer
{
    background: var(--brand-950);
    color: #94a3b8;
    padding: 56px 0 28px;
    font-size: .92rem;
}

.site-footer a { color: #cbd5e1; }
.site-footer a:hover { color: #fff; }

.footer__grid
{
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 40px;
}

/* No filter here. The Bed Manager footer used a dark single-colour mark and
   turned it white with brightness(0) invert(1); Wise CRM ships a purpose-made
   light wordmark instead, so the same filter flattened the ember badge and the
   white W into one white square. */
.footer__brand img
{
    height: 32px;
    margin-bottom: 16px;
}

.footer__brand p { max-width: 34ch; color: #94a3b8; }

.site-footer h4
{
    color: #fff;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-bottom: 14px;
}

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }

.footer__bottom
{
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .85rem;
    color: #64748b;
}

/* -- 10. responsive -------------------------------------------------------- */
@media (max-width: 1024px)
{
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__grid { grid-template-columns: repeat(2, 1fr); }
    .hero__grid { gap: 36px; }
}

@media (max-width: 900px)
{
    /* THE MOBILE PANEL AND THE BACKDROP FILTER
       -----------------------------------------------------------------
       .nav below is position: fixed, and a fixed element is positioned
       against the viewport ONLY while no ancestor establishes a
       containing block for it. backdrop-filter does establish one - the
       same rule that applies to transform, filter and perspective. With
       the blur left on .site-header, "inset: var(--header-h) 0 0 0"
       resolved against the 69 px header instead of the screen: the panel
       opened 61 px tall, so a phone showed the first item (Products) and
       nothing else, and its dropdown expanded outside the clipped box and
       looked dead. That is the whole of the "menus do not work on a
       phone" fault, on this site and on /bm, which shares this sheet.
       A blur behind a header nobody scrolls past on a phone buys nothing,
       so below 900 px the header simply goes opaque. Keep it that way:
       putting the filter back re-breaks the menu, silently. */
    .site-header
    {
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .burger { display: block; }

    .nav
    {
        position: fixed;
        inset: var(--header-h) 0 0 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 20px 24px 40px;
        overflow-y: auto;
        display: none;
        border-top: 1px solid var(--ink-200);
    }

    body.nav-open { overflow: hidden; }
    body.nav-open .nav { display: flex; }

    .nav > a, .nav .nav__toggle
    {
        padding: 14px 12px;
        font-size: 1.02rem;
        border-bottom: 1px solid var(--ink-100);
        border-radius: 0;
        justify-content: space-between;
    }

    .dropdown { position: static; }

    .dropdown__menu
    {
        position: static;
        box-shadow: none;
        border: 0;
        border-bottom: 1px solid var(--ink-100);
        border-radius: 0;
        padding: 4px 0 12px 12px;
        min-width: 0;
    }

    .langswitch { margin: 18px 0 0; }
    .langswitch__btn { width: 100%; justify-content: space-between; }
    .langswitch__menu { position: static; box-shadow: none; margin-top: 8px; }

    .nav .btn { margin-top: 16px; justify-content: center; }

    .hero { padding: 44px 0 92px; }
    .hero__grid { grid-template-columns: 1fr; }
    .hero__shot { transform: none; }

    .stats-band--overlap { margin-top: -52px; }
    .stats__item { padding: 24px 18px 26px; }
    .stats__value { font-size: 2.1rem; }

    /* on two columns the divider has to run horizontally as well */
    .stats__item:nth-child(3)::after,
    .stats__item:nth-child(4)::after
    {
        content: "";
        position: absolute;
        left: 26px;
        right: 26px;
        top: 0;
        height: 1px;
        background: var(--ink-200);
    }

    .stats__item:nth-child(3)::before { display: none; }

    .split, .split--reverse { grid-template-columns: 1fr; gap: 32px; }
    .split--reverse .split__media { order: 0; }

    .stats { grid-template-columns: repeat(2, 1fr); }

    .cta { grid-template-columns: 1fr; padding: 40px 32px; }
}

@media (max-width: 680px)
{
    body { font-size: 16px; }
    .section { padding: 44px 0; }
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: 1fr; }
    .stats-band--overlap { margin-top: -40px; }
    .hero { padding: 36px 0 76px; }
    .footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .form { padding: 24px 20px; }
    .form__grid { grid-template-columns: 1fr; }
    .specs dl { grid-template-columns: 1fr; }
    .specs dt { padding-bottom: 0; border-bottom: 0; }
    .numlist li { grid-template-columns: 40px minmax(0, 1fr); gap: 6px 14px; }
    .numlist li::before { font-size: 1.15rem; grid-column: 1; }
    .numlist__icon { display: none; }
    .numlist li > div { grid-column: 2; }
    .steps li { padding: 22px 20px 22px 20px; }
    .steps li::before { position: static; margin-bottom: 12px; }
    .steps__icon { top: 18px; right: 18px; width: 36px; height: 36px; }
    .lightbox__prev { left: 8px; }
    .lightbox__next { right: 8px; }
    .cta { padding: 32px 22px; }
}

@media (prefers-reduced-motion: reduce)
{
    html { scroll-behavior: auto; }
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print
{
    .site-header, .site-footer, .cta, .lightbox, .btn { display: none !important; }
    body { font-size: 12pt; color: #000; }
}

/* ==========================================================================
   11. icons in running text
   Small drawn marks placed beside headings, list rows and prose blocks, so a
   long page of specification is broken up by something other than paragraphs.
   All of them are decorative and hidden from assistive technology.
   ========================================================================== */

.head__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    /* No bottom margin: the icon is a grid cell beside the heading now, so a
       margin here would only push the heading row down.                       */
    margin-bottom: 0;
    border-radius: 12px;
    background: var(--brand-050);
    color: var(--brand-600);
}

.prose__icon
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 7px;
    margin-right: 11px;
    vertical-align: -9px;
    border-radius: 9px;
    background: var(--ink-100);
    color: var(--brand-600);
}

.specs__title
{
    display: flex;
    align-items: center;
    gap: 12px;
}

.specs__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 9px;
    background: var(--brand-050);
    color: var(--brand-600);
    flex: 0 0 auto;
}

.callout__icon
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 6px;
    margin-right: 10px;
    vertical-align: -8px;
    border-radius: 8px;
    background: #fdefd5;
    color: #a86a1c;
}

/* checklist rows swap the generic tick for a subject-specific mark */
.checklist__item--icon
{
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.checklist__item--icon::before { display: none; }

.checklist__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 10px;
    background: var(--accent-100);
    color: var(--accent-700);
    flex: 0 0 auto;
    margin-top: -3px;
}

.contactcard dt
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 8px;
    background: var(--brand-050);
    color: var(--brand-600);
    flex: 0 0 auto;
}

/* the quotation mark on the pull quote */
.quote { position: relative; }

.quote__mark
{
    width: 40px;
    height: 30px;
    fill: var(--accent-100);
    stroke: none;
    margin-bottom: 10px;
}

@media (max-width: 680px)
{
    .head__icon { width: 38px; height: 38px; padding: 9px; }
    .prose__icon { width: 28px; height: 28px; padding: 6px; vertical-align: -7px; }
}


/* ==========================================================================
   11. Wise CRM additions
   Components the Bed Manager site does not have: the "no third tool needed"
   badge, the horizontal flow with arrows, the licence code block and the
   price cards.
   ========================================================================== */

/* -- badge: the small "No Mailchimp" pill above a feature card headline ---- */
.badge
{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-700);
    background: var(--accent-100);
    border-radius: 999px;
    padding: 5px 13px;
    margin-bottom: 14px;
}

.badge::before
{
    content: "";
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent-500);
    /* a small strike-through mark: this is the thing you do NOT need */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 100%;
}

/* -- flow: boxes joined by arrows -----------------------------------------
   Horizontal on a wide screen, vertical on a phone - the arrow rotates with
   it, so the reading order and the arrow always agree.                      */
.flow
{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
}

.flow__step
{
    position: relative;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: 24px 22px;
    margin-right: 26px;
}

.flow__step:last-child { margin-right: 0; }

.flow__step + .flow__step::before
{
    /* the arrow sitting in the gap to the left of this box */
    content: "";
    position: absolute;
    left: -22px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border-right: 2.5px solid var(--brand-500);
    border-bottom: 2.5px solid var(--brand-500);
    transform: rotate(-45deg);
}

.flow__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 10px;
    border-radius: 12px;
    background: var(--brand-050);
    color: var(--brand-700);
    margin-bottom: 14px;
}

.flow__step h3 { font-size: 1.02rem; margin-bottom: .35em; }
.flow__step p { margin: 0; font-size: .92rem; color: var(--ink-600); }

/* -- licence code: the demo GUID, meant to be selected and copied ---------- */
.codeblock
{
    background: var(--brand-950);
    border-radius: var(--r-md);
    padding: 22px 24px;
    box-shadow: var(--shadow-md);
}

.codeblock__label
{
    display: block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-200);
    margin-bottom: 10px;
}

.codeblock code
{
    display: block;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
                 Consolas, "Liberation Mono", monospace;
    font-size: clamp(.85rem, .6rem + .7vw, 1.1rem);
    color: #ffd9b8;
    word-break: break-all;
    user-select: all;
    letter-spacing: .02em;
}

.codeblock p
{
    margin: 14px 0 0;
    font-size: .88rem;
    color: var(--ink-300);
}

/* -- price cards ----------------------------------------------------------- */
.price
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    padding: 30px 32px 32px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.price--featured
{
    border: 2px solid var(--accent-500);
    padding: 29px 31px 31px;
    box-shadow: var(--shadow-md);
}

.price__tag
{
    display: inline-block;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand-700);
    background: var(--brand-050);
    border-radius: 999px;
    padding: 5px 13px;
    margin-bottom: 16px;
    align-self: flex-start;
}

.price__amount
{
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--ink-900);
    line-height: 1.05;
    letter-spacing: -.03em;
    margin: 4px 0 2px;
}

.price__per
{
    font-size: .9rem;
    color: var(--ink-500);
    margin-bottom: 20px;
}

.price ul
{
    list-style: none;
    padding: 0;
    margin: 4px 0 24px;
    display: grid;
    gap: 11px;
}

.price li
{
    position: relative;
    padding-left: 30px;
    margin: 0;
    font-size: .95rem;
    color: var(--ink-600);
}

.price li::before
{
    content: "";
    position: absolute;
    left: 0;
    top: .3em;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--accent-100);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%238A3B05' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 100%;
}

.price .btn { margin-top: auto; justify-content: center; }

/* the bank details under "buy us a coffee" */
.bank
{
    margin: 0 0 22px;
    display: grid;
    grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
    gap: 8px 18px;
    font-size: .93rem;
}

.bank dt { color: var(--ink-500); font-weight: 600; }
.bank dd
{
    margin: 0;
    color: var(--ink-900);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
    word-break: break-word;
}

/* -- brand wordmark in the header ----------------------------------------- */
.brand img { height: 38px; width: auto; }

/* -- responsive additions -------------------------------------------------- */
@media (max-width: 900px)
{
    .flow { grid-template-columns: 1fr; }

    .flow__step { margin-right: 0; margin-bottom: 34px; }

    .flow__step:last-child { margin-bottom: 0; }

    .flow__step + .flow__step::before
    {
        left: 50%;
        top: -26px;
        margin-top: 0;
        margin-left: -9px;
        transform: rotate(45deg);
    }
}

/* -- fixes on top of the shared components --------------------------------- */

/* Inside the ember CTA band an orange button disappears into the gradient,
   so the primary action there is white instead.                             */
.cta .btn--accent
{
    background: #fff;
    color: var(--brand-800);
}

.cta .btn--accent:hover
{
    background: var(--brand-050);
    color: var(--brand-900);
}

/* The badge used as a plain category tag (Tracked / Found / Logged / Filed)
   rather than as a "you do not need this" mark.                             */
.badge--tag
{
    background: var(--brand-050);
    color: var(--brand-700);
}

.badge--tag::before
{
    background: var(--brand-500);
    background-image: none;
    width: 8px;
    height: 8px;
}

/* The demo-licence panel sits next to a taller card; centre it rather than
   leaving a field of black under the text.                                  */
.codeblock
{
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* -- the Microsoft Store badge ---------------------------------------------
   Microsoft's own artwork. Its rules forbid redrawing, recolouring, stretching
   or adding effects, so nothing here touches the image itself: no filter, no
   shadow, no border-radius, no width that would change its aspect ratio. The
   only thing this rule does is give the link a sane box and a visible focus
   ring, and guarantee the clear space Microsoft asks for around the badge.  */
.storebadge
{
    display: inline-block;
    line-height: 0;
    border-radius: 8px;
    outline-offset: 3px;
}

.storebadge img
{
    display: block;
    height: 44px;
    width: auto;
    max-width: 100%;
}

/* -- Google's Play badge ----------------------------------------------------
   Google's own artwork, under the same rules as Microsoft's: no redrawing, no
   recolouring, no stretching, no effects. Nothing here touches the image.

   The PNG is 646x250 and that box already contains the clear space Google asks
   for - which is why a 60 px-tall Play badge sits level with a 44 px-tall
   Microsoft badge instead of towering over it. Do not "fix" the difference by
   matching the numbers; the two vendors measure their badges differently.   */
.playbadge
{
    display: inline-block;
    line-height: 0;
    border-radius: 8px;
    outline-offset: 3px;
}

.playbadge img
{
    display: block;
    height: 60px;
    width: auto;
    max-width: 100%;
}

/* The two badges side by side. Wraps on a narrow screen rather than shrinking
   either one - a squeezed badge would breach both vendors' rules.            */
.badgerow
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    line-height: 0;
}

/* The badge row under the hero buttons. The margin is the badges' clear space,
   not decoration - they must not be crowded by the buttons above them.       */
.hero__badge
{
    margin-top: 30px;
    margin-bottom: 4px;
}

/* Inside a card the badge follows a paragraph, so it needs its own air.      */
.card__badge
{
    margin-top: 22px;
    margin-bottom: 0;
}

/* A grid whose columns are of very different heights - a short card beside a
   tall portrait screenshot. Stretching the card to the picture's height leaves
   a large empty box below the text; centring reads as deliberate.            */
.grid--middle
{
    align-items: center;
}

/* The phone screenshot beside the mobile-app card. Constrained and centred,
   because at full grid width a portrait phone shot reads as a mistake.       */
.phoneshot
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.phoneshot img
{
    width: auto;
    max-width: 100%;
    max-height: 560px;
    border-radius: var(--r-lg);
    border: 1px solid var(--ink-200);
    box-shadow: var(--shadow-lg);
}


/* ===========================================================================
   THE MODULE PAGES (rev 9, 2026-08-22)
   Nine pages, one per working area of the program. They reuse .split,
   .section--alt, .checklist and the lightbox; what is new is the picture with
   a caption under it, the hotkey list, and the second, wider dropdown that
   carries the nine of them in the header.
   =========================================================================== */

/* -- the branched menu ------------------------------------------------------
   Nine entries in one column is a menu nobody reads to the bottom, so the
   MODULES menu is two columns and each entry carries a descriptor.
   It hangs from the LEFT edge of its trigger. Pinning it to the right edge
   was tried first and is wrong: at 1024 the whole bar shifts left, the
   trigger sits around x=420, and a 620 px menu measured leftwards from it
   started at -200 - the entire first column off the screen. From the left
   edge the menu ends around x=960 at that width and around x=1230 at 1440,
   because the trigger is followed by four links, the language button and the
   call to action, all of which keep it well away from the right edge.       */
.dropdown--wide { position: relative; }

.dropdown__menu--grid
{
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 6px;
    width: 620px;
    max-width: calc(100vw - 40px);
    left: 0;
    right: auto;
}

.dropdown--wide[data-open="true"] .dropdown__menu--grid { display: grid; }

/* THIS SITE IS NOT border-box. Nothing resets box-sizing globally, so a
   `width: 100%` with padding on it measures 100% PLUS the padding - and the
   dropdown menu has both: 12 px on the menu, 12 px each side on every
   anchor. On a desktop the overflow disappears under the panel's own shadow
   and nobody notices. In the mobile panel it is 24 px past the right edge of
   a 390 px screen, which is why the current page's highlight ran off the
   phone. Both boxes are made border-box here, and only here - changing it
   globally on a 2 700-line stylesheet written content-box would move every
   padded element on the site. */
.dropdown__menu--grid,
.dropdown__menu--grid a
{
    box-sizing: border-box;
}

.dropdown__menu--grid a { width: 100%; border-radius: var(--r-sm); }

.dropdown__menu--grid a:hover { background: var(--ink-100); text-decoration: none; }

/* -- a screenshot with its caption -----------------------------------------
   A <button>, not a <figure>: it opens the lightbox, so it is a control and
   has to be reachable from the keyboard. Everything that makes a button look
   like a button is removed, and the cursor says what it does.                */
.figshot
{
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: zoom-in;
}

/* Landscape captures fill the column; PORTRAIT dialogs are capped by height
   instead and centred, because a 868x1220 dialog drawn at 560 px wide is
   nearly 800 px tall and pushes its own explanation off the screen. width:auto
   with a max-width of 100% lets one rule do both.                            */
.figshot img
{
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 620px;
    height: auto;
    margin: 0 auto;
    border-radius: var(--r-md);
    border: 1px solid var(--ink-200);
    box-shadow: var(--shadow-md);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.figshot:hover img,
.figshot:focus-visible img
{
    border-color: var(--brand-500);
    box-shadow: var(--shadow-lg);
}

.figshot__cap
{
    display: block;
    margin-top: 12px;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--ink-500);
}

/* The one picture that opens a module page, before anything is explained.
   Capped because a 1280 px screenshot stretched across a 1200 px content
   column is enormous, and the reader has to scroll past it to reach a word. */
.figshot--wide
{
    max-width: 940px;
    margin: 0 auto;
}

.figshot--wide .figshot__cap { text-align: center; }

/* -- the hotkeys ------------------------------------------------------------
   Two columns: the key, and what it does. The <dt>/<dd> pairs are laid out by
   the grid, so the markup stays a real definition list for anything reading
   the page without the stylesheet.                                           */
.keys
{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 18px;
    margin: 0;
    align-items: baseline;
}

.keys dt { margin: 0; }
.keys dd { margin: 0; color: var(--ink-700); }

.keys kbd
{
    display: inline-block;
    min-width: 34px;
    padding: 4px 9px;
    border: 1px solid var(--ink-300);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(16, 24, 40, .04);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-800);
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 900px)
{
    /* In the mobile panel the whole nav is one column already, so the grid
       has to collapse with it - two 310 px columns inside a 390 px screen is
       the same overflow the panel itself used to have.                       */
    .dropdown--wide,
    .dropdown__menu--grid
    {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .dropdown__menu--grid { grid-template-columns: 1fr; }

    /* THE PANEL'S CHILDREN ARE ABOUT 24 px TOO WIDE, AND ALWAYS HAVE BEEN.
       Measured with _probe2.py, which paints each box a solid colour: in the
       open panel EVERY child - the plain Download link as much as this new
       menu - is drawn from x=24 to the right edge of a 390 px screen, i.e.
       through the panel's own right padding. It scales with the viewport
       (at 600 px it is correct, at 500 it is 17 px out, at 390 it is 24) and
       it survives width, max-width, min-width, box-sizing, margin and even
       padding-right: 100px !important on the panel, so it is not any of
       those. It predates the module pages by months; nothing had a
       background inside the panel before, and an item separator running
       24 px too far reads as a full-width rule.
       overflow-x: hidden keeps it off the screen edge until the cause is
       found. Do not "fix" it by taking the padding off the panel - that
       moves the text, which is the part that is currently right.            */
    .nav { overflow-x: hidden; }

    .figshot--wide { max-width: 100%; }
}

@media (max-width: 680px)
{
    /* At this width the key column and its explanation stop fitting side by
       side without hyphenating every second word.                            */
    .keys { grid-template-columns: 1fr; gap: 4px 0; }
    .keys dd { margin-bottom: 12px; }
}