/* ==========================================================================
   MingleExtra homepage
   ==========================================================================

   Loaded only on the homepage. Everything here is scoped under .sme-home so
   it cannot leak into the logged-in application, which shares the same
   stylesheet chain.

   Colours, spacing, radii and type all come from sme-tokens.css. There are no
   raw hex values for brand colour in this file, so a token change moves the
   homepage with the rest of the product. That was the actual problem with the
   old landing page: it was a standalone document with its own :root block, so
   it drifted every time the design system moved and had to be re-themed by
   hand.

   Layout rule that governs the whole file: nothing has a fixed width. Every
   grid collapses by content need rather than at a device breakpoint, which is
   why the section breakpoints below are sparse. Checked for horizontal
   overflow at 320, 360, 375, 390, 414, 768, 1024, 1280 and 1440.
   ========================================================================== */

.sme-home {
    --home-max: 1200px;
    --home-gutter: 20px;
    --home-section-y: clamp(56px, 8vw, 104px);

    /* Homepage-only surfaces, derived from the shared brand tokens. */
    --home-ink: var(--sme-text, #1d1d24);
    --home-ink-soft: var(--sme-text-muted, #5d5d6b);
    --home-line: var(--sme-border, #e8e6ee);
    --home-surface: var(--sme-surface, #ffffff);
    --home-surface-soft: var(--sme-bg, #faf8fb);
    --home-brand: var(--sme-brand, #a32654);
    --home-brand-deep: var(--sme-brand-hover, #7c1a3e);

    background: var(--home-surface);
    color: var(--home-ink);
    /* The application root sets 16px. Stated again because this page is the
       one place a visitor may arrive before any app CSS has been exercised. */
    font-size: 1rem;
    line-height: 1.6;
    overflow-x: clip;
}

.sme-home *,
.sme-home *::before,
.sme-home *::after { box-sizing: border-box; }

.sme-home img { max-width: 100%; height: auto; }

.sme-home-shell {
    width: 100%;
    max-width: var(--home-max);
    margin-inline: auto;
    padding-inline: var(--home-gutter);
}

.sme-home section { padding-block: var(--home-section-y); }

/* Keyboard users must be able to see where they are. The application theme
   removes outlines in places; this puts one back for the public page. */
.sme-home a:focus-visible,
.sme-home button:focus-visible,
.sme-home select:focus-visible,
.sme-home input:focus-visible,
.sme-home [tabindex]:focus-visible {
    outline: 3px solid var(--home-brand);
    outline-offset: 2px;
    border-radius: 6px;
}

.sme-home-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--home-brand);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 10px 0;
    font-weight: 600;
}
.sme-home-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.sme-home h1, .sme-home h2, .sme-home h3, .sme-home h4 {
    font-family: var(--sme-font-display, var(--sme-font-sans, inherit));
    color: var(--home-ink);
    line-height: 1.15;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sme-home h1 { font-size: clamp(2rem, 5.2vw, 3.5rem); }
.sme-home h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
.sme-home h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); letter-spacing: -0.01em; }

.sme-home p { margin: 0; }

.sme-home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--home-brand-deep);
    background: var(--sme-brand-soft, #fff0f6);
    border-radius: 999px;
    padding: 7px 15px;
}
.sme-home-eyebrow i { font-size: 1.0625rem; }

.sme-home-lede {
    font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
    color: var(--home-ink-soft);
    max-width: 62ch;
}

.sme-home-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    margin-bottom: clamp(36px, 5vw, 60px);
}
.sme-home-head .sme-home-lede { text-align: center; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.sme-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* 52px tall. Comfortably above the 44px minimum tap target. */
    min-height: 52px;
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
    text-align: center;
}
.sme-home-btn i { font-size: 1.25rem; }

.sme-home-btn--primary {
    background: linear-gradient(135deg, var(--home-brand-deep), var(--home-brand));
    color: #fff;
    box-shadow: 0 10px 26px -12px rgba(163, 38, 84, .75);
}
.sme-home-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(163, 38, 84, .8); color: #fff; }

.sme-home-btn--ghost {
    background: var(--home-surface);
    color: var(--home-ink);
    border-color: var(--home-line);
}
.sme-home-btn--ghost:hover { border-color: var(--home-brand); color: var(--home-brand-deep); transform: translateY(-2px); }

.sme-home-btn--onDark {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.42);
    backdrop-filter: blur(6px);
}
.sme-home-btn--onDark:hover { background: rgba(255,255,255,.22); color: #fff; transform: translateY(-2px); }

.sme-home-btn--block { width: 100%; }

.sme-home-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
/* Below 380px two buttons side by side each get ~150px and the labels wrap to
   three lines. Stacking reads better and keeps the tap targets full width. */
@media (max-width: 380px) {
    .sme-home-ctas { flex-direction: column; }
    .sme-home-ctas .sme-home-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .sme-home *,
    .sme-home *::before,
    .sme-home *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.sme-home-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255,255,255,.88);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--home-line);
}

.sme-home-header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 72px;
}

.sme-home-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--home-ink);
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    margin-inline-end: auto;
    /* The logo is a wordmark, 220px wide at its natural height. It has to be
       allowed to shrink: with flex-shrink:0 it kept its full width at 320px,
       pushed the auth group to x=320 and put the menu button completely off
       screen, so there was no way to open the navigation on a small phone. */
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    min-height: 44px;
}
.sme-home-header__logo img {
    height: 38px;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
    object-position: left center;
}

.sme-home-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sme-home-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--home-ink-soft);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    white-space: nowrap;
}
.sme-home-nav a:hover { color: var(--home-brand-deep); background: var(--sme-brand-soft, #fff0f6); }
.sme-home-nav i { font-size: 1.125rem; }

.sme-home-header__auth {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.sme-home-header__auth .sme-home-btn { min-height: 46px; padding: 11px 20px; font-size: 0.9375rem; }

.sme-home-header__me {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    border: 1px solid var(--home-line);
    text-decoration: none;
    color: var(--home-ink);
    font-weight: 650;
    font-size: 0.9375rem;
}
.sme-home-header__me:hover { border-color: var(--home-brand); color: var(--home-brand-deep); }
.sme-home-header__me img {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.sme-home-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 12px;
    border: 1px solid var(--home-line);
    background: var(--home-surface);
    color: var(--home-ink);
    cursor: pointer;
    flex-shrink: 0;
}
.sme-home-burger i { font-size: 1.5rem; }

/* One breakpoint, chosen because the nav plus both auth buttons stop fitting
   just under 1024px rather than because tablets are 1024px wide. */
@media (max-width: 1023px) {
    .sme-home-nav { display: none; }
    .sme-home-burger { display: inline-flex; }
    .sme-home-header__auth .sme-home-btn--ghost { display: none; }
}
@media (max-width: 560px) {
    .sme-home-header__auth .sme-home-btn span { display: none; }
    .sme-home-header__auth .sme-home-btn { padding: 11px 15px; }
    .sme-home-header__me span { display: none; }
    .sme-home-header__me { padding: 5px; }
    /* Auth collapses to two icon buttons here, about 112px. That leaves the
       logo roughly 150px of the 280px available at 320px wide, with the gap. */
    .sme-home-header__logo img { height: 32px; max-width: 150px; }
    .sme-home-header__inner { gap: 10px; min-height: 64px; }
}

/* Mobile drawer ---------------------------------------------------------- */

.sme-home-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    visibility: hidden;
    pointer-events: none;
}
.sme-home-drawer[data-open="1"] { visibility: visible; pointer-events: auto; }

.sme-home-drawer__veil {
    position: absolute;
    inset: 0;
    background: rgba(20, 10, 18, .55);
    opacity: 0;
    transition: opacity .25s ease;
    border: 0;
    width: 100%;
    cursor: pointer;
}
.sme-home-drawer[data-open="1"] .sme-home-drawer__veil { opacity: 1; }

.sme-home-drawer__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 88vw);
    background: var(--home-surface);
    box-shadow: -20px 0 60px -24px rgba(0,0,0,.45);
    transform: translateX(100%);
    transition: transform .28s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sme-home-drawer[data-open="1"] .sme-home-drawer__panel { transform: translateX(0); }

.sme-home-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--home-line);
}
.sme-home-drawer__top strong { font-size: 1.0625rem; }

.sme-home-drawer__close {
    width: 44px; height: 44px;
    border-radius: 12px;
    border: 1px solid var(--home-line);
    background: var(--home-surface);
    color: var(--home-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sme-home-drawer__close i { font-size: 1.375rem; }

.sme-home-drawer__links {
    list-style: none;
    margin: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sme-home-drawer__links a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 14px;
    border-radius: 12px;
    color: var(--home-ink);
    font-weight: 600;
    text-decoration: none;
    min-height: 52px;
}
.sme-home-drawer__links a:hover { background: var(--home-surface-soft); color: var(--home-brand-deep); }
.sme-home-drawer__links i { font-size: 1.375rem; color: var(--home-brand); flex-shrink: 0; }

.sme-home-drawer__foot {
    margin-top: auto;
    padding: 18px 20px 26px;
    border-top: 1px solid var(--home-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.sme-home-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 460px at 12% -8%, var(--sme-brand-soft, #fff0f6) 0%, transparent 62%),
        radial-gradient(760px 420px at 96% 4%, #eef2ff 0%, transparent 58%),
        var(--home-surface);
}

.sme-home-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.sme-home-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    min-width: 0;
}

.sme-home-hero h1 .accent {
    background: linear-gradient(120deg, var(--home-brand-deep), var(--home-brand));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sme-home-hero__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}
.sme-home-hero__points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--home-ink-soft);
}
.sme-home-hero__points i { color: var(--sme-success, #17994f); font-size: 1.25rem; }

@media (max-width: 900px) {
    .sme-home-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .sme-home-hero__copy { align-items: center; text-align: center; }
    .sme-home-hero__copy .sme-home-lede { text-align: center; }
    .sme-home-hero__points { justify-content: center; }
    .sme-home-ctas { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Quick discovery panel
   -------------------------------------------------------------------------- */

.sme-home-quick {
    background: var(--home-surface);
    border: 1px solid var(--home-line);
    border-radius: 22px;
    padding: clamp(22px, 3vw, 30px);
    box-shadow: 0 28px 70px -34px rgba(35, 12, 30, .34);
    min-width: 0;
}

.sme-home-quick__head { margin-bottom: 20px; }
.sme-home-quick__head h2 { font-size: 1.375rem; }
.sme-home-quick__head p {
    color: var(--home-ink-soft);
    font-size: 0.9375rem;
    margin-top: 6px;
}

.sme-home-quick__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.sme-home-quick__row--single { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 420px) {
    .sme-home-quick__row { grid-template-columns: minmax(0, 1fr); }
}

.sme-home-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sme-home-field > span {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--home-ink-soft);
}

/* 16px minimum. Anything smaller makes iOS Safari zoom the viewport on focus,
   which then leaves the page scrolled sideways. */
.sme-home .sme-home-field select,
.sme-home .sme-home-field input {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    /* 16px in absolute units, not 1rem.
       The theme carries a 0.9rem rule for form controls that was winning here
       and rendering these at 14.4px. Anything under 16px makes iOS Safari zoom
       the viewport when the field takes focus, and it does not zoom back out,
       so the visitor is left on a page scrolled sideways. Absolute px also
       means a future change to the root font size cannot silently drag these
       back under the threshold.

       !important is needed because theme-override.css sets 0.9rem !important on
       every form control, including select.browser-default. An !important can
       only be beaten by another one, so this is the narrowest way to win it
       without editing a rule the rest of the site depends on. */
    font-size: 16px !important;
    color: var(--home-ink) !important;
    /* background-color rather than the background shorthand, so the chevron
       image set below is not wiped out. */
    background-color: var(--home-surface) !important;
    border: 1.5px solid var(--home-line) !important;
    font-family: inherit;
}

/* The selects carry class="browser-default" so that Materialize leaves them
   alone. Without it, Materialize replaces each one with a hidden select plus a
   generated text input and a UL, which throws away every style here and turns
   the 252 item country list into its own dropdown widget.
   Opting out has a cost: theme-override.css styles .browser-default with a
   block of !important declarations, so the sizing has to be restated at the
   same weight. */
.sme-home .sme-home-field select.browser-default,
.sme-home .sme-home-field input.browser-default,
.sme-home .sme-home-field select,
.sme-home .sme-home-field input {
    height: 52px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.sme-home .sme-home-field select,
.sme-home .sme-home-field select.browser-default {
    /* appearance:none removes the native arrow, so if this image is lost the
       control has no affordance at all. Set at the same weight as the rule
       that would otherwise overwrite it. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d5d6b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-size: 19px !important;
    padding-inline-end: 40px !important;
}

.sme-home .sme-home-field select:focus,
.sme-home .sme-home-field input:focus {
    border-color: var(--home-brand) !important;
    box-shadow: 0 0 0 3px var(--sme-brand-soft, #fff0f6) !important;
}

.sme-home-quick__note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    font-size: 0.8125rem;
    color: var(--home-ink-soft);
    line-height: 1.5;
}
.sme-home-quick__note i { color: var(--home-brand); font-size: 1.0625rem; flex-shrink: 0; margin-top: 1px; }

/* --------------------------------------------------------------------------
   Generic card grid, used by several sections
   -------------------------------------------------------------------------- */

.sme-home-grid {
    display: grid;
    gap: 20px;
    /* auto-fit means the column count follows available width instead of a
       device guess, so this behaves at every width in the test matrix. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.sme-home-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.sme-home-card {
    background: var(--home-surface);
    border: 1px solid var(--home-line);
    border-radius: 18px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sme-home-card:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 22px 48px -26px rgba(35, 12, 30, .4);
}
.sme-home-card p { color: var(--home-ink-soft); font-size: 0.9375rem; }

/* Icons are deliberately large. Small icons in a 24px box read as decoration;
   at this size they carry the scanning weight of the section. */
.sme-home-ico {
    width: 60px;
    height: 60px;
    border-radius: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875rem;
    flex-shrink: 0;
}
/* Icon chips tint themselves from their own colour rather than painting an
   opaque pale panel. The six fixed light backgrounds here used to survive
   into dark mode, where they became bright rectangles scattered across a
   near black page, each one reading as a rendering fault rather than an
   icon. Deriving the background from currentColor means one declaration
   works in both themes and in any future one.

   color-mix has a plain rgba fallback underneath for older engines, which
   get a neutral tint rather than nothing at all. */
.sme-home-ico {
    background: rgba(127, 127, 127, .10);
    background: color-mix(in srgb, currentColor 12%, transparent);
}
.sme-home-ico--rose   { color: #c02463; }
.sme-home-ico--violet { color: #6d3fc4; }
.sme-home-ico--blue   { color: #1d5fbf; }
.sme-home-ico--teal   { color: #0f7a63; }
.sme-home-ico--amber  { color: #a8620a; }
.sme-home-ico--slate  { color: #45506b; }

/* Dark mode needs lighter hues to clear contrast on the dark surface; the
   background follows automatically because it is mixed from these. */
[data-sme-theme='dark'] .sme-home-ico--rose   { color: #FF85BC; }
[data-sme-theme='dark'] .sme-home-ico--violet { color: #B9A0F5; }
[data-sme-theme='dark'] .sme-home-ico--blue   { color: #8FB8F6; }
[data-sme-theme='dark'] .sme-home-ico--teal   { color: #6FD9C0; }
[data-sme-theme='dark'] .sme-home-ico--amber  { color: #F0C078; }
[data-sme-theme='dark'] .sme-home-ico--slate  { color: #AEB8CC; }

.sme-home-section--soft { background: var(--home-surface-soft); }

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.sme-home-steps {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    counter-reset: smestep;
}
.sme-home-step {
    position: relative;
    background: var(--home-surface);
    border: 1px solid var(--home-line);
    border-radius: 18px;
    padding: 30px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.sme-home-step__n {
    counter-increment: smestep;
    position: absolute;
    top: -17px;
    inset-inline-start: 24px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--home-brand-deep), var(--home-brand));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.0625rem;
    box-shadow: 0 8px 20px -9px rgba(163,38,84,.9);
}
.sme-home-step__n::before { content: counter(smestep); }
.sme-home-step p { color: var(--home-ink-soft); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   Global discovery
   -------------------------------------------------------------------------- */

.sme-home-globe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 56px);
    align-items: center;
}
@media (max-width: 900px) { .sme-home-globe { grid-template-columns: minmax(0, 1fr); } }

.sme-home-globe__copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; min-width: 0; }

.sme-home-regions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 12px;
    width: 100%;
}
.sme-home-region {
    background: var(--home-surface);
    border: 1px solid var(--home-line);
    border-radius: 14px;
    padding: 15px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.sme-home-region i { font-size: 1.5rem; color: var(--home-brand); flex-shrink: 0; }
.sme-home-region strong { font-size: 0.9375rem; font-weight: 650; }

.sme-home-countries {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.sme-home-country {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 999px;
    background: var(--home-surface);
    border: 1px solid var(--home-line);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--home-ink);
    text-decoration: none;
    min-height: 44px;
}
.sme-home-country:hover { border-color: var(--home-brand); color: var(--home-brand-deep); }
.sme-home-country .flag { font-size: 1.125rem; line-height: 1; }

/* --------------------------------------------------------------------------
   Matching quality
   -------------------------------------------------------------------------- */

.sme-home-weights {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sme-home-weight { display: flex; flex-direction: column; gap: 7px; }
.sme-home-weight__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 0.9375rem;
    font-weight: 650;
}
.sme-home-weight__top span:last-child { color: var(--home-ink-soft); font-variant-numeric: tabular-nums; }
.sme-home-weight__bar {
    height: 9px;
    border-radius: 999px;
    background: var(--home-line);
    overflow: hidden;
}
.sme-home-weight__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--home-brand-deep), var(--home-brand));
}

.sme-home-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--home-surface-soft);
    border: 1px solid var(--home-line);
    border-radius: 16px;
    padding: 18px 20px;
    font-size: 0.9375rem;
    color: var(--home-ink-soft);
    line-height: 1.6;
}
.sme-home-note i { font-size: 1.5rem; color: var(--home-brand); flex-shrink: 0; }
.sme-home-note strong { color: var(--home-ink); }

/* --------------------------------------------------------------------------
   Product preview
   -------------------------------------------------------------------------- */

.sme-home-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 20px;
}
.sme-home-feed {
    background: var(--home-surface);
    border: 1px solid var(--home-line);
    border-radius: 18px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-width: 0;
}
.sme-home-feed__tag {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--sme-brand-soft, #fff0f6);
    color: var(--home-brand-deep);
}
.sme-home-feed p { color: var(--home-ink-soft); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   Mobile section
   -------------------------------------------------------------------------- */

.sme-home-mobile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 56px);
    align-items: center;
}
@media (max-width: 900px) { .sme-home-mobile { grid-template-columns: minmax(0, 1fr); } }

.sme-home-mobile__copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; min-width: 0; }

.sme-home-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sme-home-checks li { display: flex; gap: 13px; align-items: flex-start; }
.sme-home-checks i { font-size: 1.5rem; color: var(--home-brand); flex-shrink: 0; }
.sme-home-checks strong { display: block; font-size: 1rem; }
.sme-home-checks span { color: var(--home-ink-soft); font-size: 0.9375rem; }

/* Phone mock, drawn in CSS so there is no image to download or to go stale. */
.sme-home-phone {
    justify-self: center;
    width: min(300px, 82vw);
    aspect-ratio: 9 / 18.5;
    border-radius: 40px;
    background: #140d16;
    padding: 11px;
    box-shadow: 0 40px 80px -34px rgba(35,12,30,.55);
}
.sme-home-phone__screen {
    width: 100%; height: 100%;
    border-radius: 30px;
    background: linear-gradient(170deg, #fff0f6, #ffffff 42%, #f1ecfd);
    padding: 26px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}
.sme-home-phone__bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(35,12,30,.12);
}
.sme-home-phone__bar--w60 { width: 60%; }
.sme-home-phone__bar--w40 { width: 40%; }
.sme-home-phone__card {
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px -16px rgba(35,12,30,.5);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 11px;
}
.sme-home-phone__avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 1.0625rem;
    flex-shrink: 0;
}
.sme-home-phone__lines { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */

.sme-home-final {
    background:
        radial-gradient(700px 340px at 18% 0%, rgba(230,73,128,.5) 0%, transparent 60%),
        linear-gradient(135deg, #38112a 0%, #7c1a3e 52%, #a32654 100%);
    color: #fff;
    text-align: center;
}
.sme-home-final h2 { color: #fff; }
.sme-home-final p { color: rgba(255,255,255,.86); }
.sme-home-final .sme-home-head { margin-bottom: 30px; }
.sme-home-final .sme-home-eyebrow { background: rgba(255,255,255,.16); color: #fff; }
.sme-home-final .sme-home-ctas { justify-content: center; }
.sme-home-final__fine {
    margin-top: 22px;
    font-size: 0.875rem;
    color: rgba(255,255,255,.72);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.sme-home-footer {
    background: #16101a;
    color: rgba(255,255,255,.72);
    padding-block: clamp(44px, 6vw, 68px) 30px;
}
.sme-home-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 34px;
    padding-bottom: 34px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.sme-home-footer__brand { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sme-home-footer__brand img { height: 38px; width: auto; }
.sme-home-footer__brand p { font-size: 0.9375rem; line-height: 1.65; max-width: 42ch; }

.sme-home-footer h3 {
    color: #fff;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-bottom: 14px;
    font-weight: 700;
}
.sme-home-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sme-home-footer ul a {
    color: rgba(255,255,255,.72);
    text-decoration: none;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    /* 44px minimum. At 9px padding these came out at 42px, which is under the
       threshold on a column of links that sit directly above each other. */
    min-height: 44px;
    padding: 8px 0;
}
.sme-home-footer ul a:hover { color: #fff; }

.sme-home-footer__legal {
    padding-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
}
.sme-home-footer__legal p { line-height: 1.6; }

.sme-home-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
    font-size: 0.8125rem;
    font-weight: 650;
    color: #fff;
}
.sme-home-badge i { font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   Dark mode
   -------------------------------------------------------------------------- */

body.night_mode .sme-home,
.night_mode .sme-home {
    --home-ink: #f2eef4;
    --home-ink-soft: #b3aabb;
    --home-line: #332c38;
    --home-surface: #17121b;
    --home-surface-soft: #1e1823;
}
body.night_mode .sme-home-header { background: rgba(23,18,27,.9); }
body.night_mode .sme-home-hero {
    background:
        radial-gradient(900px 460px at 12% -8%, rgba(230,73,128,.14) 0%, transparent 62%),
        var(--home-surface);
}
body.night_mode .sme-home-ico--rose   { background: rgba(230,73,128,.16); color: #ff8fb8; }
body.night_mode .sme-home-ico--violet { background: rgba(124,77,255,.16); color: #b79bfa; }
body.night_mode .sme-home-ico--blue   { background: rgba(56,120,255,.16); color: #8ab4ff; }
body.night_mode .sme-home-ico--teal   { background: rgba(20,160,130,.16); color: #6fd9bd; }
body.night_mode .sme-home-ico--amber  { background: rgba(240,160,40,.16); color: #f3c07a; }
body.night_mode .sme-home-ico--slate  { background: rgba(120,135,170,.16); color: #a9b6d4; }
body.night_mode .sme-home-phone__screen { background: linear-gradient(170deg, #2a1c2c, #1b1520); }
body.night_mode .sme-home-phone__card { background: #241c29; }
body.night_mode .sme-home-phone__bar { background: rgba(255,255,255,.14); }

/* --------------------------------------------------------------------------
   Inside the application shell
   --------------------------------------------------------------------------
   A signed-in member sees this content below the application nav and beside
   the sidebar, without the marketing header and footer. The vertical rhythm is
   tightened because the page is no longer the first thing on screen, and the
   full section spacing left the hero sitting a long way down. */

.sme-home--app {
    --home-section-y: clamp(32px, 4vw, 56px);
    background: transparent;
}
.sme-home--app .sme-home-hero {
    border-radius: 18px;
    margin-block-start: 12px;
}

/* ---- Recommended for you (signed-in home) ------------------------------
 *
 * The signed-in home page now renders the matching engine's output instead of
 * the marketing sections a member has already read. Card shape deliberately
 * echoes the discovery card so the two surfaces read as one product. */

.sme-home-matches__grid {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 18px;
}

.sme-home-match { margin: 0; }

.sme-home-match__link {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: var(--sme-surface, #fff);
    box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .5);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}

.sme-home-match__link:hover,
.sme-home-match__link:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -18px rgba(163, 38, 84, .55);
    color: inherit;
}

.sme-home-match__link:focus-visible {
    outline: 3px solid var(--sme-brand, #a32654);
    outline-offset: 2px;
}

.sme-home-match__photo {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg,
                rgba(var(--sme-brand-rgb, 163, 38, 84), 1),
                rgba(var(--sme-brand-rgb, 163, 38, 84), .62));
    overflow: hidden;
}

/* aspect-ratio is not universal; this keeps the square on older engines. */
@supports not (aspect-ratio: 1 / 1) {
    .sme-home-match__photo { height: 0; padding-bottom: 100%; }
    .sme-home-match__photo > * { position: absolute; inset: 0; }
}

.sme-home-match__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sme-home-match__letter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    font-weight: 600;
    color: #fff;
}

.sme-home-match__meta {
    display: block;
    padding: 10px 12px 13px;
}

.sme-home-match__name {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sme-home-match__place {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
    opacity: .72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sme-home-matches__actions {
    margin-top: 26px;
    display: flex;
    justify-content: center;
}

@media (max-width: 480px) {
    .sme-home-matches__grid {
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
        gap: 14px;
    }
    .sme-home-match__letter { font-size: 2.1rem; }
}

/* ==========================================================================
   Photography
   ==========================================================================

   Added when the homepage gained real pictures. Two rules govern this block.

   First, every image is optional. The files are generated assets that live
   outside the repository, so each section checks SME_HomeImgHas() before it
   renders and the layouts below have to look deliberate whether the picture
   arrives or not. Nothing here sets a height that only makes sense once an
   image has loaded.

   Second, no photograph is ever the only thing carrying text contrast. The
   hero keeps its light surface and its dark type, and the picture sits behind
   the right hand column where the quick match card already covers it. That is
   why neither the light theme nor night mode needs a second set of colours for
   the hero copy.
   ========================================================================== */

/* ---- Hero ------------------------------------------------------------- */

.sme-home-hero--photo .sme-home-hero__grid {
    position: relative;
    z-index: 1;
}

.sme-home-hero__photo {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(64%, 1020px);
    z-index: 0;
    pointer-events: none;
    /* Feathered into the page rather than butted against it. Without the mask
       there is a hard vertical seam down the middle of the hero where the
       photograph starts, and the eye goes straight to it.

       The measured numbers this is set against, at a 1280 viewport: the copy
       column ends at 635px and the panel begins at 538px, so they do overlap by
       about a hundred pixels. Holding the picture under 12% opacity until 26%
       of its own width means everything behind the text is close to invisible
       and the type keeps its contrast without a scrim over the photograph. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.10) 30%, #000 58%);
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.10) 30%, #000 58%);
}
.sme-home-hero__photo picture,
.sme-home-hero__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Anchored left of centre and high, which is a decision about this
       photograph specifically.
     *
     * The hero image puts the lit world map and its connecting arcs in the sky
     * across the left and centre, and the group of people below and right. The
     * panel only shows a vertical slice of it, and the left of that slice is
     * masked away, so a centred crop threw away the map entirely and kept only
     * the people. That loses the one element carrying the international idea
     * the picture was chosen for.
     *
     * At 15% the slice starts near the left edge, so the part left visible
     * after the mask still contains the right half of the map and its arcs.
     * 38% vertical keeps the sky rather than centring on the table. */
    object-position: 15% 38%;
}

@media (max-width: 900px) {
    /* The grid is one column here and the copy runs the full width, so there
       is no longer a half of the hero the picture can occupy without sitting
       under the text. */
    .sme-home-hero__photo { display: none; }
}

/* ---- Figures ---------------------------------------------------------- */

.sme-home-figure { margin: 0; }

.sme-home-figure picture,
.sme-home-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}

.sme-home-figure img {
    box-shadow: 0 14px 40px rgba(20, 12, 28, .12);
}

.sme-home-figure figcaption {
    margin-top: 12px;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--home-ink-soft);
}

.sme-home-figure--wide  { margin-top: clamp(28px, 4vw, 44px); }
.sme-home-figure--strip { margin: clamp(26px, 3.5vw, 38px) 0 4px; }

/* Full width child of the two column discovery grid. */
.sme-home-figure--span {
    grid-column: 1 / -1;
    margin-top: clamp(28px, 4vw, 44px);
}

/* The verification picture is a single phone and a card, so at full width it
   reads as an enormous screenshot. Held to a comfortable measure instead. */
.sme-home-figure--trust {
    margin: clamp(28px, 4vw, 40px) auto 0;
    max-width: 780px;
}

/* ---- Video and voice, premium ----------------------------------------- */

.sme-home-premium {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4.5vw, 60px);
    align-items: center;
}

.sme-home-premium__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
}

.sme-home-connect__media picture,
.sme-home-connect__media img,
.sme-home-premium__media picture,
.sme-home-premium__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(20, 12, 28, .16);
}

@media (max-width: 900px) {
    .sme-home-premium { grid-template-columns: minmax(0, 1fr); }

    /* Premium leads with the picture on a wide screen. Stacked, the words have
       to come first, otherwise the visitor scrolls past a photograph with
       nothing telling them what section they are in. */
    .sme-home-premium__media { order: 2; }
}

/* The four call assurances sit two up under the heading rather than in a
   single column, which would push the pictures a long way down the section. */
.sme-home-ticks--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px clamp(20px, 3vw, 44px);
    margin-block: clamp(22px, 3vw, 32px);
}
@media (max-width: 700px) {
    .sme-home-ticks--grid { grid-template-columns: minmax(0, 1fr); }
}

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

.sme-home-ticks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}
.sme-home-ticks li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--home-ink-soft);
}
.sme-home-ticks i {
    flex: none;
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--home-brand);
}

/* ---- App screenshot in the mobile section ------------------------------ */

.sme-home-mobile__shot { margin: 0; min-width: 0; }
.sme-home-mobile__shot picture,
.sme-home-mobile__shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}

/* ---- Closing panel ----------------------------------------------------- */

.sme-home-final { position: relative; overflow: hidden; }

.sme-home-final__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.sme-home-final__photo picture,
.sme-home-final__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The plum gradient is repainted over the photograph rather than the picture
   being faded into it. The white heading and buttons keep exactly the contrast
   they had before, and the photograph only warms the panel underneath. */
.sme-home-final--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg,
        rgba(56, 17, 42, .92) 0%,
        rgba(124, 26, 62, .88) 52%,
        rgba(163, 38, 84, .84) 100%);
}
.sme-home-final .sme-home-shell {
    position: relative;
    z-index: 1;
}

/* ---- Night mode -------------------------------------------------------- */

body.night_mode .sme-home-figure img,
body.night_mode .sme-home-connect__media img,
body.night_mode .sme-home-premium__media img {
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}

/* The hero surface is dark here, so the photograph no longer has to fade into
   white and can carry a little more of the panel. */
body.night_mode .sme-home-hero__photo {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.34) 18%, #000 54%);
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.34) 18%, #000 54%);
    opacity: .88;
}

/* ---- Reduced motion / print ------------------------------------------- */

@media print {
    .sme-home-hero__photo,
    .sme-home-final__photo { display: none; }
}

/* The video section carries two frames of the same call. They sit side by side
   in the media column so the section keeps its height, and the second one is
   nudged down to break the strict grid line. */
.sme-home-connect__media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}
.sme-home-connect__media > picture:last-child { margin-block-start: clamp(16px, 4vw, 40px); }

@media (max-width: 560px) {
    /* Two portrait frames at a third of a phone screen each are unreadable, so
       below this width only the first is kept. */
    .sme-home-connect__media { grid-template-columns: minmax(0, 1fr); }
    .sme-home-connect__media > picture:last-child { display: none; }
}

/* Country chips carry a real flag image now rather than an emoji glyph. */
.sme-home-country__flag {
    display: inline-block;
    width: 20px;
    height: 15px;
    object-fit: contain;
    vertical-align: -2px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .10);
}
body.night_mode .sme-home-country__flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }

/* ==========================================================================
   Typography, motion and polish
   ==========================================================================

   Everything in this block is either a legibility fix with a measured cause or
   a piece of restraint. There are no decorative animations that run on load
   for their own sake: this is a page people read on a phone, often on mobile
   data, and movement that is not carrying meaning is just something else the
   device has to paint.
   ========================================================================== */

/* ---- Headline wrapping -------------------------------------------------

   Headings were breaking badly at narrow widths. "Meet someone who actually
   fits" put "fits" alone on a third line, which reads as a mistake rather
   than a line break. balance asks the browser to even the lines out instead
   of filling each one greedily.

   pretty is the paragraph equivalent and only prevents a single word ending a
   paragraph. Both degrade to normal wrapping where unsupported, so there is
   nothing to fall back to. */

.sme-home h1,
.sme-home h2,
.sme-home h3 { text-wrap: balance; }

.sme-home p,
.sme-home li { text-wrap: pretty; }

/* ---- Type scale ---------------------------------------------------------

   Display type gets tighter tracking as it grows, which is how it is drawn to
   be set: Sora at 3.5rem with default spacing looks slack. Body copy keeps
   generous line-height because most of this page is read rather than scanned. */

.sme-home h1 { letter-spacing: -0.03em; line-height: 1.08; }
.sme-home h2 { letter-spacing: -0.022em; line-height: 1.14; }

.sme-home-lede { line-height: 1.62; }

/* Long measures are hard to track back from the end of one line to the start
   of the next. Caps the reading width without touching the layout width. */
.sme-home-card p,
.sme-home-ticks li span { max-width: 58ch; }

/* Numerals in the same column line up, which matters for the weight bars and
   any figure shown beside another. */
.sme-home { font-variant-numeric: tabular-nums lining-nums; }
.sme-home h1,
.sme-home h2 { font-variant-numeric: normal; }

/* ---- The fine print under the closing buttons ---------------------------

   This is a flex row of an icon and a sentence, wrapping as a unit. On a phone
   the sentence wraps to two lines and the icon was pushed onto a line of its
   own above them, reading as a stray mark. Making the icon part of the text
   flow instead keeps it beside the first word where it belongs. */
.sme-home-final__fine {
    display: block;
    max-width: 44ch;
    margin-inline: auto;
    line-height: 1.55;
}
.sme-home-final__fine i {
    display: inline;
    margin-inline-end: 6px;
    vertical-align: -1px;
}

/* ---- Cards and figures --------------------------------------------------

   A small lift on hover, and only on devices that actually have a pointer.
   Touch screens report hover states unreliably, and a card that stays lifted
   after a tap looks stuck. */

@media (hover: hover) and (pointer: fine) {
    .sme-home-card {
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .sme-home-card:hover {
        transform: translateY(-3px);
        border-color: var(--home-brand);
        box-shadow: 0 18px 40px -22px rgba(20, 12, 28, .45);
    }

    /* Figures get a slow zoom rather than a jump. The overflow clip on the
       figure is what turns a scale into a crop instead of a spill. */
    .sme-home-figure,
    .sme-home-connect__media picture,
    .sme-home-premium__media picture {
        overflow: hidden;
        border-radius: 18px;
    }
    .sme-home-figure img,
    .sme-home-connect__media img,
    .sme-home-premium__media img {
        transition: transform .5s cubic-bezier(.2, .7, .3, 1);
    }
    .sme-home-figure:hover img,
    .sme-home-connect__media picture:hover img,
    .sme-home-premium__media picture:hover img {
        transform: scale(1.025);
    }
}

/* ---- Section reveal -----------------------------------------------------

   Sections fade up as they arrive. The starting state is applied by script
   rather than in the stylesheet, so a visitor with JavaScript off or a browser
   that never fires the observer sees the content normally instead of a blank
   page of permanently transparent sections. That failure mode is why this is
   opt-in rather than default-hidden. */

.sme-home [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
}
.sme-home [data-reveal].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .sme-home [data-reveal],
    .sme-home [data-reveal].is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .sme-home-figure img,
    .sme-home-connect__media img,
    .sme-home-premium__media img { transition: none; }
}

/* ---- Touch targets ------------------------------------------------------

   Anything tappable clears 44px on a phone. The in-page nav links and the
   footer columns were under it, which is the difference between a link that
   works first time and one that needs a second try with a thumb. */

@media (max-width: 900px) {
    .sme-home-footer a,
    .sme-home-nav a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
    }
}

/* Selection picks up the brand rather than the browser default blue. */
.sme-home ::selection {
    background: var(--home-brand);
    color: #fff;
}

/* ==========================================================================
   Desktop navigation
   ==========================================================================

   Replaces four flat anchors with two panels and two direct links. The old nav
   could only offer four destinations, which is why the country directory, the
   safety pages and the community rules were reachable only from the footer.

   Panels are driven by aria-expanded on a real <button>, never by :hover alone.
   Hover cannot be reached from a keyboard, and on a touch screen a hover panel
   opens and follows its own link on the same tap. Hover is added on top for
   pointer devices because it feels better, but nothing depends on it.
   ========================================================================== */

.sme-home-nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.sme-nav-item { position: relative; }

.sme-nav-trigger,
.sme-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* 44px keeps the target honest even though this is the desktop nav: laptop
       trackpads and touchscreen laptops both exist. */
    min-height: 44px;
    padding: 9px 14px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--home-ink);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .16s ease, color .16s ease;
}
.sme-nav-trigger i,
.sme-nav-link i { font-size: 1.15rem; color: var(--home-brand); }

.sme-nav-trigger:hover,
.sme-nav-link:hover,
.sme-nav-trigger[aria-expanded="true"] {
    background: var(--sme-brand-soft, #fff0f6);
    color: var(--home-brand-deep);
}

.sme-nav-caret {
    font-size: .8rem !important;
    color: var(--home-ink-soft) !important;
    transition: transform .18s ease;
}
.sme-nav-trigger[aria-expanded="true"] .sme-nav-caret { transform: rotate(180deg); }

/* ---- the panel --------------------------------------------------------- */

.sme-nav-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 80;
    /* 640 rather than 560. At 560 the two-column country grid gave each name
       about 110px, so "United Kingdom", "American Samoa" and "Aland Islands"
       all ellipsised. A country menu whose countries are unreadable is not a
       country menu. */
    min-width: 640px;
    padding: 20px;
    background: var(--home-surface);
    border: 1px solid var(--home-line);
    border-radius: 16px;
    box-shadow: 0 24px 60px -24px rgba(20, 12, 28, .38);
}
.sme-nav-panel--narrow { min-width: 330px; }

/* Keeps the panel on screen when its trigger sits near the right edge. */
.sme-nav-item:nth-last-child(-n+2) .sme-nav-panel { left: auto; right: 0; }

.sme-nav-panel[hidden] { display: none; }

.sme-nav-panel__grid {
    display: grid;
    /* The places column carries two sub-columns of names and needs the room
       more than the descriptions column does. */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 24px;
}

.sme-nav-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.sme-nav-col__title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--home-ink-soft);
    padding: 0 10px 8px;
}

/* A row is an icon plus a title and one line saying what it is. The second
   line is the reason a panel beats a plain link list: it answers "what is this"
   before the click rather than after it. */
.sme-nav-col > a {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--home-ink);
    transition: background-color .16s ease;
}
.sme-nav-col > a:hover { background: var(--home-surface-soft); }
.sme-nav-col > a > i { font-size: 1.25rem; color: var(--home-brand); flex: none; margin-top: 1px; }
.sme-nav-col > a span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sme-nav-col > a strong { font-size: 0.9375rem; font-weight: 650; }
.sme-nav-col > a em {
    font-style: normal;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--home-ink-soft);
}

/* ---- country list inside the panel ------------------------------------- */

.sme-nav-places {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
}
.sme-nav-places a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--home-ink);
    text-decoration: none;
    min-width: 0;
    transition: background-color .16s ease;
}
.sme-nav-places a:hover { background: var(--home-surface-soft); }
.sme-nav-places a > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sme-nav-flag {
    width: 20px; height: 15px; object-fit: contain;
    border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.10); display: block;
}

.sme-nav-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 10px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--home-brand);
    text-decoration: none;
}
.sme-nav-more:hover { text-decoration: underline; }
.sme-nav-more i { font-size: .9rem; transition: transform .16s ease; }
.sme-nav-more:hover i { transform: translateX(3px); }

/* ---- breakpoint -------------------------------------------------------- */

/* Below this the burger drawer is the navigation, so the desktop nav is hidden
   outright rather than being squeezed. 980px because the panel triggers plus
   the auth buttons stop fitting beside the logo at about 960. */
@media (max-width: 980px) {
    .sme-home-nav { display: none; }
}

body.night_mode .sme-nav-panel {
    background: var(--home-surface);
    border-color: var(--home-line);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
}
body.night_mode .sme-nav-flag { box-shadow: 0 0 0 1px rgba(255,255,255,.18); }

@media (prefers-reduced-motion: reduce) {
    .sme-nav-trigger, .sme-nav-link, .sme-nav-caret,
    .sme-nav-col > a, .sme-nav-places a, .sme-nav-more i { transition: none; }
}