/* ============================================================================
   WIDECOMMERCE — warm-stone product-marketing template for MultilanguageCms
   ----------------------------------------------------------------------------
   The design language comes from weaveos.com, read from its shipped CSS and
   server-rendered markup rather than from screenshots:

     surfaces  #fbf9f9 · #f5f3f2 (page) · #eeecea · #e4e0dd · #d6d1cd · #bcb6b1
               and a warm near-black ramp #96918c · #64605d · #393633 · #161412
     ink       #1c1513 ink · #2a2a2a body · #460914 headings (a deep maroon,
               not black — the single most distinctive choice on the page)
     brand     #fb4f1f orange, #b93c22 rust on hover, #fabda5 / #f9e4db tints,
               and a violet side accent #380a8c / #e0dffe
     type      Geist, weight 500 for display: 64px/1 at -.035em (h1),
               48px/1.1 at -.04em (section), 24px/1.25 at -.02em (step);
               body 16/1.5
     shape     8px buttons (min-height 44), 12px chips, 18px windows,
               24px panels, 32px section cards; grids of tiles separated by
               2–3px gaps that let the surface show through as hairlines
     chrome    a sticky bar that undocks into a floating rounded bar on scroll,
               mac-window product mockups, a masked logo marquee

   What is deliberately NOT carried over: Weave's wordmark, illustrations and
   copy, and two of its colour pairings. Cream text on #fb4f1f measures 3.0:1
   and orange eyebrow text on the page surface 3.05:1 — both fail WCAG AA for
   text this size, and this site advertises Israeli Standard 5688. So the
   vivid orange stays for graphics (bars, dots, rings — 3:1 is the bar there)
   and text and button fills use measured, darker steps of the same hue:
     --wd-brand-strong #d4441c  white text 4.53:1   (primary button)
     --wd-brand-text   #c2391a  on #eeecea 4.57:1   (eyebrows, small numbers)
     --wd-mute         #64605d  on #f5f3f2 5.6:1    (secondary text)

   NOTE: --wc-navy / --wc-accent are read by ThemesController for the admin
   swatch, so keep them defined here.
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
    /* Surfaces, brightest to darkest. The page sits on --wd-bg; panels step
       down to --wd-sand, and tiles inside a panel step back UP to --wd-bg so
       the 2px gaps between them read as lines without drawing any. */
    --wd-white:  #ffffff;
    --wd-bg-hi:  #fbf9f9;
    --wd-bg:     #f5f3f2;
    --wd-sand:   #eeecea;
    --wd-stone:  #e4e0dd;
    --wd-line:   #d6d1cd;
    --wd-line-2: #bcb6b1;
    --wd-mute-2: #96918c;   /* decorative / on dark only — 2.9:1 on --wd-bg */
    --wd-mute:   #64605d;
    --wd-coal:   #393633;
    --wd-night:  #161412;

    --wd-ink:    #1c1513;
    --wd-text:   #2a2a2a;
    --wd-head:   #460914;
    --wd-tile:   #54251f;
    --wd-step:   #4a4038;

    --wd-brand:        #fb4f1f;
    --wd-brand-strong: #d4441c;
    --wd-brand-text:   #c2391a;
    --wd-rust:         #b93c22;
    --wd-peach:        #fabda5;
    --wd-blush:        #f9e4db;

    --wd-violet:   #380a8c;
    --wd-lilac:    #e0dffe;
    --wd-lilac-hi: #f3f2fd;
    --wd-periwinkle: #9e9cff;

    /* The dark window (terminal / sync panel) and its rule colour. */
    --wd-term:      #1c1513;
    --wd-term-line: #4a4038;

    --wd-r-sm:  8px;
    --wd-r:     12px;
    --wd-r-md:  18px;
    --wd-r-lg:  24px;
    --wd-r-xl:  32px;

    /* One gap between cards everywhere: the side-by-side panels (.wd-stack),
       the feature grid (.wd-bento), the badge tiles and the stat pair. */
    --wd-card-gap: clamp(14px, 2vw, 22px);

    /* Geist does not carry Hebrew; Heebo (loaded by _Head) picks it up. */
    --wd-font:         'Geist', 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --wd-font-display: 'Geist', 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --wd-font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Heebo', monospace;

    /* Both curves are the reference's own: the long expo-out drives the
       header's undocking, the cubic-out every colour change. */
    --wd-ease:     cubic-bezier(.16, 1, .3, 1);
    --wd-ease-out: cubic-bezier(.33, 1, .68, 1);

    --wd-nav-h: 58px;
    --wd-gutter: clamp(20px, 4.2vw, 60px);

    /* CMS bridge tokens (admin swatch + Bootstrap fallback mapping). */
    --wc-navy:   #1c1513;
    --wc-navy2:  #393633;
    --wc-accent: #fb4f1f;

    --bs-primary:          #d4441c;
    --bs-primary-rgb:      212, 68, 28;
    --bs-link-color:       #b93c22;
    --bs-link-color-rgb:   185, 60, 34;
    --bs-link-hover-color: #460914;
    --bs-body-font-family: var(--wd-font);
    --bs-body-color:       var(--wd-text);
    --bs-body-bg:          var(--wd-bg);
    --bs-border-color:     var(--wd-line);

    /* Page-template tokens (see _Head). The shared default is a navy
       gradient; here a page hero is a sand panel with maroon type, which is
       how the reference opens every inner page. */
    --page-hero-bg: var(--wd-sand);
    --page-hero-fg: var(--wd-head);
    --page-soft-bg: var(--wd-sand);
    --page-measure: 860px;

    /* Header tokens (see _Head). The reference's bar is the page surface with
       ink type — a light header — so every shared dark default is repointed.
       --header-accent must stay dark enough for white text: _Head paints the
       active language chip with it (ink, like the header's primary button). */
    --header-bg:         var(--wd-bg);
    --header-fg:         var(--wd-ink);
    --header-fg-muted:   var(--wd-mute);
    --header-border:     var(--wd-line);
    --header-accent:     var(--wd-ink);
    --header-panel-bg:   var(--wd-white);
    --header-panel-soft: var(--wd-sand);
}

/* ── 2. Base ─────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
    background: var(--wd-bg);
    color: var(--wd-text);
    font-family: var(--wd-font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* site.css keeps the ASP.NET scaffold's 60px bottom margin, which would
       show as a strip of page colour under the dark footer. */
    margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--wd-font-display);
    font-weight: 500;
    color: var(--wd-head);
    text-wrap: balance;
}
h1, .h1 { font-size: clamp(2.5rem, 5.2vw, 4rem);    line-height: 1;    letter-spacing: -.035em; }
h2, .h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.1;  letter-spacing: -.035em; }
h3, .h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem);  line-height: 1.25; letter-spacing: -.02em; }
h4, .h4 { font-size: 1.2rem;  line-height: 1.3; letter-spacing: -.015em; }
h5, .h5 { font-size: 1.05rem; line-height: 1.35; }
h6, .h6 { font-size: .95rem;  line-height: 1.4; }

/* Negative tracking is tuned for Geist's Latin. Heebo's Hebrew is already
   compact, and at -.035em its letters start to touch. */
:lang(he) :is(h1, h2, h3, .h1, .h2, .h3, .wd-display, .wd-title, .wd-section-title, .wd-num) { letter-spacing: -.012em; }

p { text-wrap: pretty; }
.lead { font-size: 1.125rem; line-height: 1.55; color: var(--wd-text); font-weight: 400; }
small, .small { font-size: .875rem; }
.text-muted { color: var(--wd-mute) !important; }

a {
    color: var(--wd-rust);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: color .24s var(--wd-ease-out);
}
a:hover { color: var(--wd-head); }
.navbar a, .btn, .card a, footer a, .wd-sec a { text-decoration: none; }

::selection { background: var(--wd-peach); color: var(--wd-ink); }

/* One focus ring for the whole theme: the reference's rust, offset off the
   element. _Head sets an amber ring site-wide and a WHITE one inside any
   .navbar — on this light bar that white ring is invisible, so both are
   overruled here, which takes !important and one more selector than theirs. */
body :focus-visible,
body .navbar :focus-visible {
    outline: 2px solid var(--wd-rust) !important;
    outline-offset: 3px !important;
    border-radius: 6px;
}
body .wd-footer :focus-visible,
body .wd-term :focus-visible { outline-color: var(--wd-peach) !important; }

/* ── 3. Layout primitives ────────────────────────────────────────────────── */
/* The reference's one container: 1400px with a fluid gutter. Header and
   footer use it too, so section edges line up with the chrome. */
.wd-stage {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: var(--wd-gutter);
}

/* Every homepage block carries .wd-sec. Its children are spaced by flex/grid
   gaps, never by margins, so the resets below take margins off entirely —
   and they have to outrank the inline <style> in Views/Home/Index.cshtml,
   which gives .cms-homepage-content h2/h3 a 1.5rem top margin and its <p>s a
   1.8 line-height (that block loads after this file, so a tie loses). */
.wd-sec :is(h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote, dl) { margin: 0; }
.cms-homepage-content .wd-sec :is(h1, h2, h3, h4) { margin-top: 0; }
.cms-homepage-content .wd-sec p { line-height: 1.55; }
.wd-sec ul, .wd-sec ol { padding: 0; list-style: none; }

/* Section spacing — half the reference's (Ran, 2026-10-28): adjacent
   sections each pad their block ends, so the gap between two is twice this. */
.wd-pad    { padding-block: clamp(18px, 2.5vw, 32px); }
.wd-pad-sm { padding-block: clamp(7px, 1vw, 11px); }
.wd-pb     { padding-block-end: clamp(18px, 2.5vw, 32px); }
/* Spacing between a section head and what follows it. Classes rather than
   inline styles so pasted content carries no layout values of its own. */
.wd-mt     { margin-block-start: clamp(24px, 4vw, 44px) !important; }
.wd-mt-lg  { margin-block-start: clamp(18px, 2.5vw, 32px) !important; }
.wd-mb     { margin-block-end: clamp(20px, 3vw, 32px) !important; }

/* ── 4. Type roles ───────────────────────────────────────────────────────────
   Named after what they do on the page rather than h-levels, because the
   reference reuses one size at several outline levels (a stat number and an
   h2 share a size; a quote is set at heading size). */
.wd-display {
    font-family: var(--wd-font-display);
    font-size: clamp(2.5rem, 5.2vw, 4rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--wd-head);
    text-wrap: balance;
}
.wd-section-title {
    font-family: var(--wd-font-display);
    font-size: clamp(1.75rem, 3.6vw, 3rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.04em;
    color: var(--wd-head);
    text-wrap: balance;
}
.wd-title {
    font-family: var(--wd-font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.03em;
    color: var(--wd-head);
    text-wrap: balance;
}
.wd-step-title {
    font-family: var(--wd-font-display);
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--wd-step);
}
/* The eyebrow: sentence case, brand colour, medium weight. The reference
   never uppercases or letter-spaces it — the colour alone sets it apart. */
.wd-eyebrow {
    display: block;
    font-size: clamp(.9rem, 1vw, 1rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--wd-brand-text);
}
.wd-body-lg { font-size: 1rem; line-height: 1.55; color: var(--wd-text); max-width: 60ch; }
.wd-label   { font-size: clamp(.75rem, .9vw, .875rem); font-weight: 500; line-height: 1.4; color: var(--wd-text); }
.wd-caption { font-size: .8125rem; font-weight: 500; line-height: 1.5; color: var(--wd-mute); }
.wd-num {
    font-family: var(--wd-font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--wd-head);
    font-variant-numeric: tabular-nums;
}
.wd-mono { font-family: var(--wd-font-mono); }

/* ── 5. Buttons ──────────────────────────────────────────────────────────────
   Two shapes in the reference, both 8px-radius and 44px tall with 14px type
   at weight 400: a stone "secondary" that floods orange on hover, and an
   orange primary that deepens to rust. Bootstrap's variants are mapped onto
   them so a button an editor drops in follows the theme. */
.btn,
.wd-btn {
    --bs-btn-border-radius: var(--wd-r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 11px 16px;
    font-family: var(--wd-font);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    border-radius: var(--wd-r-sm);
    border: 1px solid transparent;
    box-shadow: none !important;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .24s var(--wd-ease-out), color .24s var(--wd-ease-out),
                border-color .24s var(--wd-ease-out), transform .16s var(--wd-ease-out);
}
/* A small press, so a click registers before the page changes. */
.btn:active, .wd-btn:active { transform: scale(.97); }

.wd-btn--primary,
.btn-primary {
    background: var(--wd-brand-strong) !important;
    border-color: var(--wd-brand-strong) !important;
    color: var(--wd-white) !important;
}
.wd-btn--primary:hover, .btn-primary:hover,
.wd-btn--primary:focus-visible, .btn-primary:focus-visible {
    background: var(--wd-rust) !important;
    border-color: var(--wd-rust) !important;
    color: var(--wd-white) !important;
}

.wd-btn--secondary,
.btn-secondary,
.btn-light {
    background: var(--wd-stone) !important;
    border-color: transparent !important;
    color: var(--wd-ink) !important;
}
.wd-btn--secondary:hover, .btn-secondary:hover, .btn-light:hover,
.wd-btn--secondary:focus-visible, .btn-secondary:focus-visible, .btn-light:focus-visible {
    background: var(--wd-brand-strong) !important;
    color: var(--wd-white) !important;
}

/* The violet side accent — the reference's "Ask about Enterprise". */
.wd-btn--violet {
    background: var(--wd-lilac);
    color: var(--wd-violet);
}
.wd-btn--violet:hover, .wd-btn--violet:focus-visible { background: var(--wd-violet); color: var(--wd-white); }

.wd-btn--ghost,
.btn-outline-primary,
.btn-outline-dark,
.btn-outline-secondary {
    background: transparent !important;
    border-color: var(--wd-line-2) !important;
    color: var(--wd-ink) !important;
}
.wd-btn--ghost:hover, .btn-outline-primary:hover, .btn-outline-dark:hover, .btn-outline-secondary:hover {
    background: var(--wd-ink) !important;
    border-color: var(--wd-ink) !important;
    color: var(--wd-white) !important;
}

.btn-dark { background: var(--wd-ink) !important; border-color: var(--wd-ink) !important; color: var(--wd-white) !important; }
.btn-dark:hover { background: var(--wd-coal) !important; }
.btn-outline-light { border-color: rgba(255, 255, 255, .5) !important; color: var(--wd-white) !important; }
.btn-outline-light:hover { background: var(--wd-white) !important; color: var(--wd-ink) !important; }

.btn-lg, .wd-btn--lg { min-height: 52px; padding: 13px 22px; font-size: 1rem; }
.btn-sm, .wd-btn--sm { min-height: 34px; padding: 6px 12px; font-size: .8125rem; }

.wd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ── 6. Surfaces ─────────────────────────────────────────────────────────── */
.wd-panel {
    background: var(--wd-sand);
    border-radius: var(--wd-r-lg);
    padding: clamp(18px, 3vw, 34px);
}
/* A card that opens a section: rounded top only, running into the next. */
.wd-panel--top { border-radius: var(--wd-r-xl) var(--wd-r-xl) 0 0; }

/* The mac window — the reference's container for every product mockup. */
.wd-window {
    background: var(--wd-bg);
    border-radius: var(--wd-r-md);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(84, 37, 31, .04), 0 24px 48px -28px rgba(84, 37, 31, .28);
}
.wd-window__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    border-block-end: 2px solid var(--wd-sand);
}
/* The traffic lights are physical-left on a real Mac whatever the language,
   so the bar keeps LTR order inside RTL pages. */
.wd-window__bar { direction: ltr; }
.wd-window__bar > span { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; flex: none; }
.wd-window__bar > span:nth-child(2) { background: #febc2e; }
.wd-window__bar > span:nth-child(3) { background: #28c840; }
.wd-window__url {
    margin-inline: auto;
    width: auto !important;
    height: auto !important;
    border-radius: 6px !important;
    background: var(--wd-sand) !important;
    padding: 3px 14px;
    font-family: var(--wd-font-mono);
    font-size: .6875rem;
    color: var(--wd-mute);
}
.wd-window__body { padding: clamp(16px, 2.4vw, 24px); display: flex; flex-direction: column; gap: 20px; }
.wd-window--white { background: var(--wd-white); }

/* A silent video's text version (WCAG 1.2.1): a disclosure under the video,
   inside the same window, listing what each scene shows. */
.wd-vtext { border-block-start: 2px solid var(--wd-sand); padding: 10px 18px; font-size: .875rem; color: var(--wd-text); text-align: start; }
.wd-vtext > summary { cursor: pointer; color: var(--wd-mute); font-weight: 500; text-align: center; }
.wd-vtext > summary:hover { color: var(--wd-ink); }
.wd-vtext ol { display: grid; gap: 6px; margin: 10px 0 4px; padding-inline-start: 1.25em; }
.wd-vtext p { margin: 10px 0 0; color: var(--wd-mute); }

/* ── 7. Header ───────────────────────────────────────────────────────────────
   Measured on weaveos.com in a browser (1440 wide):
     bar      58px. Docked on the page colour at the top of the page, its
              content aligned with the 1280px pill it becomes.
     undock   a 1280px pill 12px from the top, 28px radius, #fbf9f9, shadow
              0 10px 40px rgba(63,39,28,.08), 500ms on cubic-bezier(.16,1,.3,1).
     links    15px REGULAR weight in #2a2a2a, 8px-radius sand wash on hover
              and while a menu is open; chevrons, not carets, on dropdowns.
     actions  a muted meta link, then 32px buttons — white, and ink #1c1513.
     menus    open INSIDE the pill: it squares its bottom corners and grows a
              panel of rows (44px icon tile + label).
     phone    the pill is there from the start; the menu is a full-screen
              sheet with hairline rows and two buttons pinned to the bottom.
   The header box keeps a fixed height and the bar overflows it, so undocking
   never shifts the page. */
.wd-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--wd-nav-h);
    pointer-events: none;
}
.wd-header .wd-nav {
    pointer-events: auto;
    padding: 0;
    max-width: 100%;
    margin-inline: auto;
    transition: max-width .5s var(--wd-ease), padding .5s var(--wd-ease);
}
.wd-nav__bar {
    position: relative;   /* anchors the dropdown panels */
    flex: 1 1 100%;       /* .navbar is itself a flex row */
    display: flex;
    align-items: center;
    gap: 4px 28px;
    min-height: var(--wd-nav-h);
    /* Docked, the content sits exactly where it will sit in the 1280px pill
       (pill inset + 20px), so undocking moves the frame, never the links. */
    padding-inline: max(var(--wd-gutter), calc((100% - 1280px) / 2 + 20px));
    background: transparent;
    border-radius: 0;
    transition: border-radius .5s var(--wd-ease), box-shadow .5s var(--wd-ease),
                background-color .5s var(--wd-ease), padding .5s var(--wd-ease);
}
.wd-header.is-floating .wd-nav {
    max-width: min(1280px, calc(100% - 32px));
    padding-top: 12px;
}
.wd-header.is-floating .wd-nav__bar {
    background: var(--wd-bg-hi);
    border-radius: 28px;
    padding-inline: 20px;
    box-shadow: 0 10px 40px rgba(63, 39, 28, .08);
}
/* A menu lives inside the pill, so opening one at the top of the page
   undocks the bar too — otherwise the panel would span the whole window. */
@media (min-width: 992px) {
    .wd-header:has(.wd-nav .dropdown-menu.show) .wd-nav {
        max-width: min(1280px, calc(100% - 32px));
        padding-top: 12px;
    }
    .wd-header:has(.wd-nav .dropdown-menu.show) .wd-nav__bar {
        background: var(--wd-bg-hi);
        border-radius: 28px;
        padding-inline: 20px;
        box-shadow: 0 10px 40px rgba(63, 39, 28, .08);
    }
}
/* Bootstrap 5.3 paints a blue focus box-shadow on .nav-link; the theme's
   own outline (§2) is the focus indicator here. */
.wd-nav .nav-link:focus, .wd-nav .nav-link:focus-visible { box-shadow: none; }

.wd-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    margin: 0;
    padding: 0;
    font-family: var(--wd-font-display);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -.035em;
    color: var(--wd-ink) !important;
    text-decoration: none;
}
.wd-brand img { display: block; max-height: 30px; width: auto; }
/* A small orange square beside the name when the site has no logo uploaded. */
.wd-brand__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--wd-brand); flex: none; }

/* Compact header buttons — the reference's 32px "Sign in" / "Book a demo". */
.wd-hbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--wd-r-sm);
    font: 400 .875rem/1 var(--wd-font);
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .24s var(--wd-ease-out), color .24s var(--wd-ease-out), transform .16s var(--wd-ease-out);
}
.wd-hbtn:active { transform: scale(.97); }
.wd-hbtn--white { background: var(--wd-white); color: var(--wd-ink) !important; }
.wd-hbtn--white:hover { background: var(--wd-stone); }
.wd-hbtn--ink { background: var(--wd-ink); color: #f3f1eb !important; }
.wd-hbtn--ink:hover { background: var(--wd-brand-strong); color: var(--wd-white) !important; }
.wd-hbtn--lg { height: 44px; padding: 0 16px; font-size: 1rem; }

/* Links. The CMS menu renderer stamps .fw-semibold (600, !important) on
   every top-level link; the reference sets them in a regular weight. */
.wd-nav .navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    color: var(--wd-text);
    font-size: .9375rem;
    font-weight: 400 !important;
    line-height: 1;
    padding: 8px 12px;
    border-radius: var(--wd-r-sm);
    transition: background-color .24s var(--wd-ease-out), color .24s var(--wd-ease-out);
}
.wd-nav .navbar-nav .nav-link:hover,
.wd-nav .navbar-nav .nav-link:focus-visible,
.wd-nav .navbar-nav .show > .nav-link { background: var(--wd-sand); color: var(--wd-ink); }
.wd-nav .navbar-nav .nav-link.active:not(.btn) { color: var(--wd-ink); font-weight: 500 !important; }

/* Chevron in place of Bootstrap's caret; it turns over while open. Physical
   borders on purpose — rotated, they draw the same "v" in both directions. */
.wd-nav .dropdown-toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    border: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    margin-inline-start: 7px;
    vertical-align: middle;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .3s var(--wd-ease);
}
.wd-nav .show > .dropdown-toggle::after { transform: translateY(1px) rotate(-135deg); }

.wd-nav__links { gap: 4px; }
.wd-nav__actions { margin-inline-start: auto; gap: 12px; align-items: center; flex-direction: row; }
.wd-nav__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--wd-mute);
    white-space: nowrap;
    text-decoration: none;
}
.wd-nav__meta:hover { color: var(--wd-ink); }
/* The language switcher arrives as .nav-link.btn — as white 32px chips. The
   current language is painted with --header-accent by _Head (ink here). */
.wd-nav .navbar-nav .nav-link.btn,
.wd-sheet__langs .nav-link.btn {
    height: 32px;
    min-height: 32px;
    padding: 0 10px;
    font-size: .875rem;
    font-weight: 400 !important;
    background: var(--wd-white);
    border: 0;
    border-radius: var(--wd-r-sm);
    color: var(--wd-ink);
}
.wd-nav .navbar-nav .nav-link.btn:hover { background: var(--wd-stone); }
.wd-nav__search {
    min-height: 32px;
    height: 32px;
    width: 170px;
    border-radius: var(--wd-r-sm);
    border: 0;
    background: var(--wd-white);
    font-size: .875rem;
}

@media (min-width: 992px) {
    .wd-nav .navbar-nav .nav-link { white-space: nowrap; }

    /* Dropdowns open inside the bar: each panel spans the bar (the item is
       taken out of positioning) and the bar squares its bottom corners to
       join it. The selector carries [dir] and [data-bs-popper] to outrank
       _Head's RTL rule, which pins a navbar dropdown to its trigger's edge. */
    .wd-nav .nav-item.dropdown { position: static; }
    html[dir] .wd-nav .navbar-nav .dropdown-menu,
    html[dir] .wd-nav .navbar-nav .dropdown-menu[data-bs-popper] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 8px 20px 24px;
        border: 0;
        border-radius: 0 0 28px 28px;
        background: var(--wd-bg-hi);
        box-shadow: 0 30px 40px -14px rgba(63, 39, 28, .14);
        translate: none;
    }
    .wd-nav .dropdown-menu.show:not(.mega-panel) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 4px 24px;
    }
    .wd-nav .dropdown-menu.show { animation: wd-menu-in .3s var(--wd-ease) both; }
    /* A strip over the gap between the trigger and the panel, so the
       pointer can cross it without the hover-open script closing the menu. */
    .wd-nav .dropdown-menu::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 10px; }
    /* Hover-open (shared _Scripts) calls Bootstrap's show(), which focuses
       the trigger — so a mouse user got a focus ring on every hover. While
       the pointer is over the item the sand wash already marks it; keyboard
       focus without hover still gets the ring. */
    body .wd-nav .nav-item.dropdown:hover > .dropdown-toggle:focus-visible { outline: none !important; }
    /* .wd-header in front so this outranks the undock rule's 28px radius. */
    .wd-header .wd-nav__bar:has(.dropdown-menu.show) {
        background: var(--wd-bg-hi);
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }

    /* Panel rows: a 44px sand tile and the label, as in the reference. */
    .wd-nav .dropdown-item,
    .wd-nav .mega-link {
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 10px;
        border-radius: var(--wd-r);
        font-size: 1rem;
        line-height: 1.3;
        color: var(--wd-ink);
        white-space: normal;
        background: none;
    }
    .wd-nav .dropdown-item::before,
    .wd-nav .mega-link::before {
        content: "\f38b";               /* bi-file-earmark-text */
        font-family: bootstrap-icons;
        display: grid;
        place-items: center;
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: var(--wd-r-sm);
        background: var(--wd-sand);
        color: var(--wd-step);
        font-size: 1.05rem;
        transition: background-color .24s var(--wd-ease-out), color .24s var(--wd-ease-out);
    }
    .wd-nav .dropdown-item:hover, .wd-nav .dropdown-item:focus,
    .wd-nav .mega-link:hover, .wd-nav .mega-link:focus { background: var(--wd-sand); color: var(--wd-ink); }
    .wd-nav .dropdown-item:hover::before, .wd-nav .dropdown-item:focus::before,
    .wd-nav .mega-link:hover::before, .wd-nav .mega-link:focus::before { background: var(--wd-white); color: var(--wd-brand-text); }
    .wd-nav .dropdown-item.active, .wd-nav .mega-link.active { background: var(--wd-sand); font-weight: 500; }
}
@keyframes wd-menu-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }

/* The reference's Platform panel: titled columns of rows, each a 44px sand
   tile with a line icon, a 16px title and a 13px description; a muted "see
   all" link under the last column. The tile, not a generic glyph, carries
   the icon here, so the generic ::before tile of plain dropdown rows is off. */
.wd-mega__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wd-sec .wd-mega__head, .wd-mega__head {
    margin: 14px 10px 6px;
    font: 500 .8125rem/1.4 var(--wd-font);
    color: var(--wd-mute);
}
.wd-nav .wd-mega__item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: var(--wd-r);
    white-space: normal;
    color: var(--wd-ink);
    background: none;
}
.wd-nav .wd-mega__item::before, .wd-nav .wd-mega__more::before { content: none !important; display: none !important; }
.wd-mega__tile {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--wd-r-sm);
    background: var(--wd-sand);
    transition: background-color .24s var(--wd-ease-out);
}
.wd-nav .wd-mega__tile img { width: 26px; height: 26px; object-fit: contain; mix-blend-mode: multiply; opacity: .85; }
.wd-mega__tile i { font-size: 1.15rem; color: var(--wd-step); }
.wd-mega__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wd-mega__t { font-size: 1rem; line-height: 1.3; color: var(--wd-ink); }
.wd-mega__d { font-size: .8125rem; line-height: 1.4; color: var(--wd-mute); }
.wd-nav .wd-mega__item:hover, .wd-nav .wd-mega__item:focus { background: var(--wd-sand); color: var(--wd-ink); }
.wd-nav .wd-mega__item:hover .wd-mega__tile, .wd-nav .wd-mega__item:focus .wd-mega__tile { background: var(--wd-white); }
.wd-nav .wd-mega__more {
    display: inline-flex !important;
    gap: 4px;
    margin: 8px 0 0;
    padding: 6px 10px;
    width: auto;
    font-size: .8125rem;
    color: var(--wd-mute);
    background: none;
}
.wd-nav .wd-mega__more:hover, .wd-nav .wd-mega__more:focus { color: var(--wd-ink); background: none; }
@media (min-width: 992px) {
    .wd-nav .dropdown-menu.wd-mega.show {
        display: grid;
        /* As many columns as the panel has groups (Platform has four,
           Resources one) — set from the markup's column count. */
        grid-template-columns: repeat(var(--wd-mega-cols, 3), minmax(0, 1fr));
        gap: 0 24px;
        padding: 4px 20px 20px;
    }
}
@media (max-width: 991.98px) {
    /* In the sheet the columns stack under their headings. */
    .wd-nav .wd-mega__col + .wd-mega__col { margin-top: 6px; }
    .wd-sec .wd-mega__head, .wd-mega__head { margin: 6px 0 4px; }
    .wd-nav .wd-mega__item { padding: 8px 0; }
    .wd-mega__tile { width: 40px; height: 40px; }
    .wd-nav .wd-mega__item:hover, .wd-nav .wd-mega__item:focus { background: none; }
}

/* Two-row mode, set by _Layout when the menu does not fit one row: brand and
   actions stay on the first row, the links take a full-width second row.
   The collapse wrapper steps out of the layout (display: contents) so its
   lists become items of the bar itself and can be ordered separately. The
   header's fixed height cannot hold two rows, so here it sizes to the bar,
   and the 12px the bar drops by when it undocks is cancelled by an equal
   negative margin — the page still never shifts. */
@media (min-width: 992px) {
    .wd-header:has(.wd-nav--rows) { height: auto; }
    .wd-header.is-floating .wd-nav--rows { margin-bottom: -12px; max-width: calc(100% - 24px); }
    .wd-nav--rows .wd-nav__bar { flex-wrap: wrap; padding-block: 6px; }
    .wd-header.is-floating .wd-nav--rows .wd-nav__bar { border-radius: 24px; }
    .wd-nav--rows.navbar-expand-lg .navbar-collapse { display: contents !important; }
    .wd-nav--rows .wd-nav__actions { order: 1; }
    .wd-nav--rows .wd-nav__links { order: 2; flex-basis: 100%; flex-wrap: wrap; margin-inline-start: -12px; }
    .wd-nav--rows .dropdown-menu { border-radius: 0 0 24px 24px !important; }
}
/* Compact mode: tighter links. Always below 1400px, and above it whenever
   _Layout finds the menu too long for one row at full size — tried before
   falling back to two rows, since one row is what the reference looks like. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .wd-nav__bar { gap: 4px 16px; }
    .wd-nav .navbar-nav > .nav-item > .nav-link { padding-inline: 9px; font-size: .875rem; }
    .wd-nav__actions { gap: 8px; }
}
@media (min-width: 992px) {
    .wd-nav--compact .wd-nav__bar { gap: 4px 16px; }
    .wd-nav--compact .navbar-nav > .nav-item > .nav-link { padding-inline: 9px; font-size: .875rem; }
    .wd-nav--compact .wd-nav__actions { gap: 8px; }
}
@media (min-width: 992px) and (pointer: fine) {
    /* _Head forces 44px rows on every .nav-link (WCAG 2.5.5, AAA, touch).
       With a fine pointer 2.5.8's 24px applies; the reference's are 36px. */
    .wd-nav .navbar-nav > .nav-item > .nav-link:not(.btn) { min-height: 36px; }
}

/* Two rules that fold into an X — the reference's menu glyph. */
.wd-toggler {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--wd-r-sm);
    display: grid;
    place-content: center;
    gap: 7px;
    background: transparent;
}
.wd-toggler:focus { box-shadow: none; }
.wd-toggler span { display: block; width: 18px; height: 1.5px; background: var(--wd-ink); }

.wd-nav__mobile { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }

/* The shared mega panel in _Head carries a 3px blue top rule and blue hover
   tints from an older theme; repoint them. */
.wd-nav .mega-panel { border-top: 0; }
.wd-nav .mega-column-title { color: var(--wd-mute); letter-spacing: .02em; text-transform: none; font-weight: 500; }

/* ── Phone: the pill, and the full-screen sheet ── */
@media (max-width: 991.98px) {
    .wd-header { height: calc(var(--wd-nav-h) + 12px); }
    .wd-header .wd-nav { max-width: calc(100% - 32px); padding-top: 12px; }
    .wd-nav__bar,
    .wd-header.is-floating .wd-nav__bar {
        flex-wrap: nowrap;
        padding-inline: 20px 10px;
        background: var(--wd-bg-hi);
        border-radius: 28px;
        box-shadow: 0 10px 40px rgba(63, 39, 28, .08);
    }

    /* Bootstrap animates a collapse's height; a full-screen sheet has no
       height to animate, so the transition is dropped (Bootstrap then
       completes at once) and the sheet fades in on its own keyframes. */
    .wd-sheet.show,
    .wd-sheet.collapsing {
        position: fixed;
        inset: 0;
        z-index: 1060;
        display: flex !important;
        flex-direction: column;
        /* Bootstrap centres .navbar-collapse children (align-items: center),
           which in a column shrinks every row to its content width. */
        align-items: stretch;
        height: 100dvh !important;
        overflow-y: auto;
        background: var(--wd-bg-hi);
        transition: none;
    }
    .wd-sheet.show { animation: wd-sheet-in .28s var(--wd-ease) both; }
    html:has(.wd-sheet.show) { overflow: hidden; }

    .wd-sheet__head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 72px;
        padding: 0 20px;
        background: var(--wd-bg-hi);
        border-bottom: 1px solid var(--wd-stone);
    }
    .wd-sheet__close {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: var(--wd-r-sm);
        background: var(--wd-stone);
        color: var(--wd-ink);
        font-size: 1rem;
    }

    .wd-nav__links { flex-direction: column; gap: 0; padding: 12px 20px; }
    .wd-nav__links > .nav-item { border-bottom: 1px solid var(--wd-stone); }
    .wd-nav .navbar-nav .nav-link {
        display: flex;
        justify-content: space-between;
        padding: 22px 0;
        font-size: 1.125rem;
        border-radius: 0;
        background: none !important;
    }
    .wd-nav .dropdown-menu,
    .wd-nav .mega-panel {
        position: static;
        margin: 0;
        padding: 0 0 14px;
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .wd-nav .dropdown-item, .wd-nav .mega-link {
        padding: 10px 12px;
        border-radius: var(--wd-r-sm);
        font-size: 1rem;
        color: var(--wd-step);
        white-space: normal;
    }
    .wd-nav .dropdown-item:hover, .wd-nav .mega-link:hover { background: var(--wd-sand); color: var(--wd-ink); }

    .wd-sheet__foot {
        position: sticky;
        bottom: 0;
        margin-top: auto;
        display: grid;
        gap: 12px;
        padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
        background: var(--wd-bg-hi);
        border-top: 1px solid var(--wd-stone);
    }
    .wd-sheet__langs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .wd-sheet__langs:not(:has(li)) { display: none; }
    .wd-sheet__btns { display: flex; gap: 12px; }
    .wd-sheet__btns > * { flex: 1; }
    .wd-sheet__btns:empty { display: none; }
}
@keyframes wd-sheet-in { from { opacity: 0; } to { opacity: 1; } }

/* ── 8. Hero ─────────────────────────────────────────────────────────────────
   The reference leads with a product visual, then a centred maroon headline,
   one paragraph and two buttons. */
.wd-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: clamp(8px, 2vw, 20px) clamp(4px, 1vw, 10px);
    text-align: center;
}
.wd-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 1000px;
    padding-block: 20px;
}
.wd-hero__copy .wd-body-lg { text-align: center; }
.wd-hero__copy .wd-actions { justify-content: center; margin-top: 3px; }

/* The visual: the brand mark on a pedestal, with clusters of tokens circling
   it. Measured on the reference (its mascot hero): the centre piece rises 56px
   over 1s after a 0.1s pause on cubic-bezier(.22,1,.36,1); the clusters fade
   up 14px; then they travel a flat elliptical ring around the centre for as
   long as the page is open, shrinking and fading a little as they pass behind
   it. The ring is placed every frame by _Layout — CSS owns the look, the
   entrance, and a no-script fallback (the clusters simply sit in a row). */
.wd-hero__visual {
    position: relative;
    width: 100%;
    max-width: 1240px;
    height: clamp(200px, 48vw, 260px);
}
@media (min-width: 768px) { .wd-hero__visual { height: clamp(260px, 27vw, 380px); } }

/* The orbit never reaches the visual's bottom ~quarter, so the headline under
   it is pulled up by a share of the visual's height: half the empty band it
   used to leave (Ran, 2026-10-28). The copy's top edge now lies over that
   empty band, so it lets the pointer through to the clusters; its own
   children take the pointer back. */
.wd-hero__visual + .wd-hero__copy {
    margin-block-start: calc(clamp(200px, 48vw, 260px) * -.12);
    pointer-events: none;
}
.wd-hero__visual + .wd-hero__copy > * { pointer-events: auto; }
@media (min-width: 768px) {
    .wd-hero__visual + .wd-hero__copy { margin-block-start: calc(clamp(260px, 27vw, 380px) * -.15); }
}

.wd-ring__core {
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 5;
    display: grid;
    justify-items: center;
    transform: translate(-50%, -50%);
}
.wd-ring__puck {
    display: grid;
    place-items: center;
    /* A pill, not the reference's disc: it carries the one-line tagline, so
       it is as wide as the words plus its rounded ends. */
    height: clamp(52px, 5.6vw, 80px);
    padding-inline: clamp(20px, 2.4vw, 36px);
    border-radius: 999px;
    background: radial-gradient(ellipse at 34% 22%, #ffffff 0%, #f6f1ec 50%, #e6dcd1 100%);
    box-shadow: inset 0 -10px 18px rgba(120, 90, 50, .14), inset 0 3px 2px rgba(255, 255, 255, .9),
                0 34px 40px -24px rgba(84, 37, 31, .5);
    animation: wd-rise 1s .1s cubic-bezier(.22, 1, .36, 1) both;
}
.wd-ring__puck img { width: 50%; height: auto; }
/* The tagline on one line: 14px on a phone, 22px at full size. */
.wd-ring__puck-t {
    font-family: var(--wd-font-display);
    font-size: clamp(14px, 1.55vw, 22px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: var(--wd-head);
}
/* Ground shadow under the pedestal. */
.wd-ring__core:after {
    content: "";
    width: 120%;
    height: 26px;
    margin-top: 6px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(84, 37, 31, .16), transparent);
    animation: wd-fade 1s .1s both;
}

.wd-ring {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0 4%;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
/* Each cluster is a <button>: reset to a bare hit area. */
.wd-ring__item {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin: 0;
    padding: 6px;
    border: 0;
    border-radius: 18px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.wd-ring__item:focus-visible { outline: 2px solid var(--wd-rust) !important; outline-offset: 4px !important; }
/* Once _Layout drives the ring, every cluster is absolutely placed. */
.wd-hero__visual.is-ring .wd-ring { display: block; padding: 0; }
.wd-hero__visual.is-ring .wd-ring__item { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.wd-ring__item > * {
    animation: wd-panel-in .9s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(.35s + var(--i, 0) * 70ms);
    transition: scale .35s var(--wd-ease);
}
/* `scale`, not transform: the entrance keyframes own `translate` and the
   ring script owns the button's transform, so this is the free channel. */
@media (hover: hover) { .wd-ring__item:hover > * { scale: 1.06; } }

/* Click-to-zoom (measured on the reference): the scene sits in a camera
   layer that _Layout scales 2.2× and shifts so the chosen cluster lands
   beside its card, over .7s on cubic-bezier(.22,1,.36,1). The view clips the
   zoomed scene — only while zoomed, so resting clusters near the edges are
   never cut — and the card lives outside it, so it is never clipped. */
.wd-ring__view { position: absolute; inset: 0; }
.wd-ring__view.is-zoomed { overflow: hidden; }
.wd-ring__cam {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.wd-hero__visual.is-open .wd-ring__item { transition: opacity .5s var(--wd-ease); }

/* The card: the reference's 400px, #fffcf9, 20px radius, 28/28/30 padding,
   hairline border; contents slide in .45s after a .15s beat. Title and
   button use the theme's measured AA oranges, not the reference's #e1552e
   (3.4:1 on this card at 15–16px). */
.wd-ring__card {
    position: absolute;
    z-index: 20;
    width: 400px;
    max-width: calc(100% - 24px);
    transform: translate(-50%, -50%);
    padding: 28px 28px 30px;
    border: 1px solid rgba(60, 50, 40, .08);
    border-radius: 20px;
    background: #fffcf9;
    color: #3b2a20;
    text-align: start;
    animation: wd-fade .5s var(--wd-ease) both;
}
/* On a phone the card drops below the zoomed cluster and overlaps the
   headline; the reference's flat card would read as part of the text there,
   so this placement alone gets a lift. */
.wd-ring__card[data-place="below"] { transform: translateX(-50%); box-shadow: 0 24px 48px -20px rgba(63, 39, 28, .35); }
.wd-ring__card[hidden] { display: none; }
.wd-ring__card-in { animation: wd-panel-in .45s .15s cubic-bezier(.22, 1, .36, 1) both; }
.wd-sec .wd-ring__card-t {
    margin: 0 0 10px;
    font-family: var(--wd-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--wd-brand-text);
}
.wd-sec .wd-ring__card-x { margin: 0; font-size: 15px; line-height: 1.55; opacity: .72; }
.wd-ring__card-a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--wd-brand-strong);
    color: #fffcf9 !important;
    font: 600 14px/1 var(--wd-font);
    letter-spacing: -.01em;
    text-decoration: none;
    transition: background-color .24s var(--wd-ease-out);
}
.wd-ring__card-a:hover, .wd-ring__card-a:focus-visible { background: var(--wd-rust); }
.wd-ring__card-a span { font-size: 16px; line-height: 1; }

/* Anything the header menu or the cards link to clears the sticky header. */
.wd-bento > li[id], .wd-sec[id] { scroll-margin-top: 96px; }

/* A token: a soft, slightly embossed tile in the warm beige of the
   reference's 3D icons. The tilt uses the `rotate` property and the entrance
   the `translate` property, so neither overwrites the other. */
.wd-token {
    --s: 64px;
    display: grid;
    place-items: center;
    width: var(--s);
    height: var(--s);
    border-radius: calc(var(--s) * .26);
    background: linear-gradient(160deg, #f6eddd 0%, #e4d3b6 100%);
    color: #ad8d63;
    font-size: calc(var(--s) * .44);
    font-family: var(--wd-font-display);
    font-weight: 700;
    line-height: 1;
    rotate: var(--r, 0deg);
    box-shadow: inset 0 calc(var(--s) * -.08) 0 rgba(140, 104, 58, .24), inset 0 2px 1px rgba(255, 255, 255, .85),
                0 16px 22px -14px rgba(84, 37, 31, .5);
}
.wd-token i, .wd-token b { font-weight: inherit; text-shadow: 0 1px 0 rgba(255, 255, 255, .85), 0 -1px 0 rgba(120, 90, 50, .3); }
.wd-token--coin { border-radius: 50%; }
.wd-token--sm { --s: 44px; }
.wd-token--lg { --s: 80px; }
@media (max-width: 767.98px) {
    .wd-token { --s: 44px; }
    .wd-token--sm { --s: 30px; }
    .wd-token--lg { --s: 54px; }
}

@keyframes wd-rise     { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
@keyframes wd-panel-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes wd-fade     { from { opacity: 0; } to { opacity: 1; } }

/* Product thumbnails in the checkout mockup. */
.wd-store__img { aspect-ratio: 1; border-radius: 10px; background: var(--wd-sand); }

/* ── 9. Trust card: marquee ──────────────────────────────────────────────────
   A white card holding a line of social proof and a logo marquee. (The
   reference's strip of stat tiles below it was removed from the homepage.) */
.wd-trust { display: flex; flex-direction: column; gap: 2px; border-radius: var(--wd-r-xl); }
/* Kept low (≈112px on desktop, 40% under the earlier 186px) with the logos
   at full size: tight padding and gap, and the pause button moved off its
   own row into the card's top inline-end corner — clear of the marquee's
   edge mask, which is why it was put underneath in the first place. */
.wd-trust__top {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px clamp(20px, 2.4vw, 32px);
    background: var(--wd-white);
    border-radius: var(--wd-r-lg);
    text-align: center;
}
@media (max-width: 767.98px) { .wd-trust__top { padding-block: 23px; } }
.wd-trust__top > .wd-motion-btn--inline {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 12px;
}
.wd-trust__lead { font-size: 1rem; color: var(--wd-mute); max-width: 60ch; }

.wd-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}
.wd-marquee__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 40px;
}
/* _Layout clones the items once and adds .is-looping, so the row becomes one
   long strip translated by exactly half its width — the seam is invisible.
   Without script (or with reduced motion) the items simply wrap, centred. */
.wd-marquee.is-looping .wd-marquee__row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    animation: wd-marquee var(--wd-marquee-speed, 26s) linear infinite;
}
.wd-marquee.is-looping:hover .wd-marquee__row,
.wd-motion-paused .wd-marquee.is-looping .wd-marquee__row { animation-play-state: paused; }
/* In RTL the strip overflows to the LEFT, so it has to travel right. */
[dir="rtl"] .wd-marquee.is-looping .wd-marquee__row { animation-name: wd-marquee-rtl; }
@keyframes wd-marquee     { to { transform: translateX(-50%); } }
@keyframes wd-marquee-rtl { to { transform: translateX(50%); } }
.wd-marquee.is-looping .wd-marquee__row > * { padding-inline-end: 40px; }

/* The pause button _Layout gives every moving scene (WCAG 2.2.2): a small
   round button in the scene's top inline-end corner. The marquee's edge mask
   would fade it there, so its button sits on its own line underneath. */
.wd-motion-btn {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    z-index: 10;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--wd-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--wd-ink);
    font-size: .875rem;
    line-height: 1;
    cursor: pointer;
}
.wd-motion-btn:hover { background: var(--wd-white); border-color: var(--wd-line-2); }
.wd-motion-btn--inline { position: static; }

.wd-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--wd-font-display);
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--wd-ink);
    white-space: nowrap;
    opacity: .82;
}
.wd-logo i { font-size: 1.1em; }
.wd-logo img { height: clamp(28px, 4vw, 44px); width: auto; filter: grayscale(1) brightness(0); }

/* ── 10. Feature head ────────────────────────────────────────────────────────
   Eyebrow + headline on one side, the paragraph across from it — the
   reference's section opener. Stacks below 992px. */
.wd-head {
    display: grid;
    gap: 10px 24px;
    align-items: center;
}
@media (min-width: 992px) { .wd-head { grid-template-columns: 1fr minmax(0, 430px); } }
.wd-head__title { display: flex; flex-direction: column; gap: 6px; }
.wd-head__title .wd-title { max-width: 560px; }
.wd-head--stack { grid-template-columns: 1fr !important; max-width: 640px; }
.wd-head--center { justify-items: center; text-align: center; margin-inline: auto; }

/* Copy column of a split block: eyebrow, title, paragraph, buttons. */
.wd-copy { display: flex; flex-direction: column; gap: 10px; }
.wd-copy > .wd-actions { margin-top: 10px; }
.wd-copy p:not(.wd-eyebrow) { max-width: 52ch; }

/* ── 11. Flow ────────────────────────────────────────────────────────────────
   Measured on the reference: six mono chips at the edges of a 1280×302 field,
   each sitting on one of six nested figure-eight loops that all pass through
   a round mark in the middle, with dots travelling the loops continuously
   (a canvas there; SVG paths here, dots placed by _Layout). The reference
   drops the drawing below 768px; here a phone gets the same drawing turned on
   its side (.wd-flow__svg--m, 332×390: the left loops point up, the right ones
   down), with three chips above the mark and three below, still animated. */
.wd-flow {
    position: relative;
    max-width: 360px;
    margin-inline: auto;
    aspect-ratio: 332 / 390;
}
.wd-flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wd-flow__svg path { fill: none; stroke: var(--wd-line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wd-flow__svg circle { fill: var(--wd-ink); }
.wd-flow__svg--d { display: none; }
.wd-flow__chip {
    position: absolute;
    left: var(--mx);
    top: var(--my);
    transform: translate(-50%, -50%);
    border-radius: 999px;
    border: 1px solid var(--wd-line);
    background: var(--wd-sand);
    padding: 5px 12px;
    text-align: center;
    font-family: var(--wd-font-mono);
    font-size: .8125rem;
    line-height: 1.3;
    color: var(--wd-step);
    white-space: nowrap;
}
/* Each chip on its loop, as a share of the 332×390 phone drawing. */
.wd-flow__chip--l1 { --mx: 16.9%; --my: 7.7%; }
.wd-flow__chip--l2 { --mx: 50%;   --my: 21.8%; }
.wd-flow__chip--l3 { --mx: 83.1%; --my: 7.7%; }
.wd-flow__chip--r1 { --mx: 16.9%; --my: 92.3%; }
.wd-flow__chip--r2 { --mx: 50%;   --my: 78.2%; }
.wd-flow__chip--r3 { --mx: 83.1%; --my: 92.3%; }
.wd-flow__core {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid var(--wd-line-2);
    background: var(--wd-sand);
}
.wd-flow__core img { width: 50%; height: auto; }

@media (min-width: 768px) {
    .wd-flow {
        max-width: 1280px;
        aspect-ratio: 1280 / 302;
    }
    .wd-flow__svg--d { display: block; }
    .wd-flow__svg--m { display: none; }
    .wd-flow__chip {
        left: auto;
        top: var(--y);
        padding: 6px 16px;
        transform: translateY(-50%);
    }
    /* Physical sides on purpose: the drawing is the same in both languages.
       Outer chips hug the field's edges, inner ones centre on their loop. */
    .wd-flow__chip--l1 { --y: 17%; left: 0; }
    .wd-flow__chip--l3 { --y: 83%; left: 0; }
    .wd-flow__chip--r1 { --y: 17%; right: 0; }
    .wd-flow__chip--r3 { --y: 83%; right: 0; }
    .wd-flow__chip--l2 { --y: 50%; left: 24.6%; transform: translate(-50%, -50%); }
    .wd-flow__chip--r2 { --y: 50%; left: 75.4%; transform: translate(-50%, -50%); }
    .wd-flow__core { width: 96px; height: 96px; }
}

/* ── 12. Showcase panel: copy + dashboard window ─────────────────────────── */
.wd-showcase {
    display: grid;
    gap: 22px;
    align-items: center;
}
@media (min-width: 992px) { .wd-showcase { grid-template-columns: 1.3fr 2fr; gap: 32px; } }

.wd-window__head { display: flex; align-items: center; gap: 16px; }
.wd-window__head h3, .wd-window__head .wd-label { font-size: 1rem; font-weight: 500; color: var(--wd-ink); font-family: var(--wd-font); letter-spacing: 0; }
.wd-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--wd-sand);
    font-size: .75rem;
    font-weight: 500;
    color: var(--wd-step);
    white-space: nowrap;
}
.wd-window__head .wd-pill { margin-inline-start: auto; }

.wd-kpis {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 12px 32px;
    padding: 12px 16px;
    border-radius: var(--wd-r);
    background: var(--wd-sand);
}
.wd-kpis > li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wd-kpi {
    font-family: var(--wd-font-display);
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: 1.2;
    color: var(--wd-brand-text);
    font-variant-numeric: tabular-nums;
}

/* The data table scrolls sideways inside the window on a phone, with a hint
   the reference prints above it. */
.wd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wd-table-hint { display: none; margin-block-end: 6px; }
@media (max-width: 575.98px) { .wd-table-hint { display: block; } }
.wd-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .9375rem; }
.wd-table th, .wd-table td { padding: 12px 10px; text-align: start; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wd-table thead th { font-size: .8125rem; font-weight: 500; color: var(--wd-mute); border-block-end: 1px solid rgba(84, 37, 31, .1); }
.wd-table tbody tr + tr { border-block-start: 1px solid rgba(84, 37, 31, .07); }
.wd-table tbody th { font-weight: 400; color: var(--wd-ink); }
.wd-table .is-up { color: var(--wd-brand-text); font-weight: 500; }

/* Inline meter: a stone track with an orange fill set by --v (0–100). */
.wd-bar { display: inline-flex; align-items: center; gap: 12px; }
.wd-bar > span {
    position: relative;
    display: block;
    width: 72px;
    height: 6px;
    border-radius: 3px;
    background: var(--wd-line);
    overflow: hidden;
}
.wd-bar > span > i {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: calc(var(--v, 50) * 1%);
    border-radius: 3px;
    background: var(--wd-brand);
    transition: width 1.1s var(--wd-ease);
}
/* Bars grow in when their window is revealed. */
.wd-reveal-ready .wd-reveal:not(.is-in) .wd-bar > span > i { width: 0; }

/* ── 13. Split with stat pair ────────────────────────────────────────────── */
.wd-split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 992px) { .wd-split { grid-template-columns: 1fr 1fr; gap: 40px; } }
.wd-split--flip > :first-child { order: 2; }
@media (max-width: 991.98px) { .wd-split--flip > :first-child { order: 0; } }
.wd-split__copy { display: flex; flex-direction: column; gap: 28px; }

/* Two tiles that read as one rounded bar split by a 2px seam. */
.wd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wd-card-gap); }
.wd-pair > li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px;
    background: var(--wd-sand);
}
.wd-pair > li { border-radius: var(--wd-r-lg); }

/* Checkout mockup: a white order card. */
.wd-checkout { display: grid; gap: 14px; }
.wd-checkout__line { display: flex; align-items: center; gap: 12px; font-size: .9375rem; }
.wd-checkout__line .wd-store__img { width: 48px; flex: none; }
.wd-checkout__line > div { display: grid; gap: 2px; }
.wd-checkout__line > b, .wd-checkout__sum b { margin-inline-start: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.wd-checkout__sum { display: flex; align-items: center; gap: 12px; padding-block-start: 14px; border-block-start: 1px solid var(--wd-sand); font-size: 1.05rem; color: var(--wd-ink); }
.wd-checkout__perk {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--wd-r);
    background: var(--wd-blush);
    color: var(--wd-head);
    font-size: .875rem;
    font-weight: 500;
}
.wd-checkout__perk b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.wd-checkout__perk--violet { background: var(--wd-lilac-hi); color: var(--wd-violet); }
.wd-store__img--lilac { background: var(--wd-lilac-hi); }
.wd-checkout__pay {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    border-radius: var(--wd-r-sm);
    background: var(--wd-brand-strong);
    color: var(--wd-white);
    font-weight: 500;
}

/* ── 14. Bento — a grid of feature cards ─────────────────────────────────────
   Separate cards on the shared card gap (it was 2px hairlines showing the
   sand ground through, with the grid clipping the corners). Each card now
   carries its own radius and a hairline edge, since #fbf9f9 on the #f5f3f2
   page is too close to read as a card on its own. */
.wd-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wd-card-gap);
}
@media (min-width: 640px)  { .wd-bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .wd-bento { grid-template-columns: repeat(3, 1fr); } }
.wd-bento > li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: clamp(18px, 2.2vw, 26px);
    background: var(--wd-bg-hi);
    border: 1px solid var(--wd-sand);
    border-radius: var(--wd-r-lg);
    transition: background-color .3s var(--wd-ease-out), border-color .3s var(--wd-ease-out);
}
.wd-bento > li:hover { background: var(--wd-white); border-color: var(--wd-stone); }
.wd-bento__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-block-end: 10px;
    border-radius: var(--wd-r);
    background: var(--wd-blush);
    color: var(--wd-brand-text);
    font-size: 1.3rem;
    transition: background-color .3s var(--wd-ease-out), color .3s var(--wd-ease-out);
}
.wd-bento > li:hover .wd-bento__icon { background: var(--wd-brand-strong); color: var(--wd-white); }
.wd-bento h3 { font-size: 1.2rem; color: var(--wd-tile); letter-spacing: -.02em; }
.wd-bento p { color: var(--wd-mute); font-size: .9375rem; }

/* ── 15. Integrations row ────────────────────────────────────────────────────
   The homepage's integrations section: one sand panel (.wd-panel), as wide
   as the panel below it, holding one row on a wide screen — the title, the
   paragraph with the partner logos, then the ribbon drawing, which fans out
   towards the text. Below 1200px the three stack. */
.wd-band__row {
    display: grid;
    gap: 22px 40px;
    align-items: center;
}
@media (min-width: 1200px) {
    .wd-band__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .85fr); }
}

.wd-term {
    background: var(--wd-term);
    color: #e8e2dc;
    border-radius: 14px;
    overflow: hidden;
}
.wd-term .wd-window__bar { border-block-end: 1px solid var(--wd-term-line); }
.wd-term .wd-window__url { background: rgba(255, 255, 255, .06) !important; color: #b7aea6; }
.wd-term__body { padding: 22px clamp(16px, 2.4vw, 24px); display: grid; gap: 8px; }
.wd-term__row {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--wd-r-sm);
    border: 1px solid var(--wd-term-line);
    font-family: var(--wd-font-mono);
    font-size: .8125rem;
}
.wd-term__row > :last-child { color: #b7aea6; justify-self: end; }
.wd-term__row.is-hot { background: rgba(232, 85, 47, .44); border-color: transparent; color: var(--wd-white); }
.wd-term__row.is-hot > :last-child { color: var(--wd-white); }
.wd-term__row i { color: #7fd99a; margin-inline-end: 6px; }
.wd-term__row.is-hot i { color: var(--wd-white); }
.wd-term__caption { padding: 0 clamp(16px, 2.4vw, 24px) 20px; font-family: var(--wd-font-mono); font-size: .75rem; color: #9b928a; }
@media (max-width: 479.98px) {
    .wd-term__row { grid-template-columns: 1fr auto; }
    .wd-term__row > :nth-child(2) { display: none; }
}

/* Numbered steps: a title, a line of copy and a mono pill per step. */
.wd-steps { display: flex; flex-direction: column; gap: 44px; counter-reset: wd-step; }
.wd-steps > li { display: flex; flex-direction: column; gap: 12px; counter-increment: wd-step; }
.wd-steps .wd-step-title:before {
    content: counter(wd-step, decimal-leading-zero);
    display: block;
    margin-block-end: 6px;
    font-family: var(--wd-font-mono);
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--wd-brand-text);
}
.wd-steps p { color: var(--wd-text); }
.wd-code {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--wd-r-sm);
    background: var(--wd-bg);
    font-family: var(--wd-font-mono);
    font-size: .8125rem;
    color: var(--wd-step);
}
.wd-code i { color: var(--wd-brand-text); }

/* Ribbons through a puck — a flat take on the reference's WebGL router scene:
   one dark ribbon (the incoming order) runs straight in from the left into a
   disc carrying the brand mark, and the orange ribbons fan out straight to the
   right towards the channels, each with its label flowing along it (textPath
   offsets set by _Layout). The ribbons are drawn before the puck, so they read
   as passing through it. The viewBox starts 160 units before the puck, so the
   incoming label ("הזמנה חדשה") has room to slide in, and the drawing is
   cropped from the right (preserveAspectRatio="xMinYMid slice") rather than
   shrunk, so the labels stay legible in a narrow column. Stacked, it keeps
   the same modest size instead of spanning the panel. */
.wd-ribbons {
    position: relative;
    height: 180px;
    overflow: hidden;
}
@media (max-width: 1199.98px) { .wd-ribbons { width: min(100%, 460px); justify-self: center; } }
.wd-ribbons svg { display: block; width: 100%; height: 100%; }
.wd-ribbons .rb-in   { stroke: var(--wd-ink); }
.wd-ribbons .rb-out  { stroke: #e8552f; }
.wd-ribbons .rb-band { fill: none; stroke-width: 26; stroke-linecap: round; }
.wd-ribbons .rb-edge { fill: none; stroke: var(--wd-ink); stroke-width: 1.5; }
.wd-ribbons text {
    font-family: var(--wd-font-mono);
    font-size: 18px;
    font-weight: 500;
    fill: #fff;
    dominant-baseline: central;
    /* Under an RTL page the text would inherit direction:rtl, which anchors a
       textPath from its END and breaks the offset maths in _Layout. Hebrew
       words still read right-to-left inside an LTR run. */
    direction: ltr;
}
.wd-ribbons .rb-disc  { fill: var(--wd-white); stroke: var(--wd-ink); stroke-width: 1.5; }
.wd-ribbons .rb-side  { fill: #e8552f; }
.wd-ribbons .rb-ring  { fill: none; stroke: var(--wd-ink); stroke-width: 1; }

/* ── 16. Badges ──────────────────────────────────────────────────────────────
   The reference's compliance grid: six tiles on 2px gaps inside a rounded
   sand panel, each a short bold word over a caption. */
.wd-badges-wrap { display: flex; flex-direction: column; gap: 28px; }
.wd-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wd-card-gap);
}
@media (min-width: 768px)  { .wd-badges { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .wd-badges { grid-template-columns: repeat(6, 1fr); } }
.wd-badges > li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 20px 18px;
    background: var(--wd-bg);
    border-radius: var(--wd-r-md);
}
.wd-badges__t {
    font-family: var(--wd-font-display);
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--wd-tile);
}
.wd-badges-foot { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }

/* ── 17. Story: pull quote + result figures ─────────────────────────────── */
.wd-story { display: grid; gap: 40px; }
@media (min-width: 992px) { .wd-story { grid-template-columns: 1fr 1fr; gap: 64px; } }
.wd-story figure { display: flex; flex-direction: column; gap: 36px; }
.wd-story blockquote {
    font-family: var(--wd-font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--wd-head);
    text-wrap: balance;
}
.wd-story figcaption { display: flex; align-items: center; gap: 14px; }
.wd-story figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.wd-story figcaption span { display: block; }
.wd-story figcaption span + span { color: var(--wd-mute); font-size: .9375rem; }
.wd-results { display: grid; }
.wd-results > li { display: flex; flex-direction: column; gap: 6px; padding-block: 24px; border-block-end: 1px solid rgba(130, 130, 130, .2); }
.wd-results > li:first-child { padding-block-start: 0; }

/* ── 18. Pricing ─────────────────────────────────────────────────────────────
   A segmented control for the billing period and three plan cards; the
   middle one is the recommended plan. The toggle is wired in _Layout. */
.wd-pricing { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.wd-seg {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    border-radius: 12px;
    background: var(--wd-stone);
}
.wd-seg button, .wd-seg a {
    min-height: 36px;
    padding: 6px 16px;
    border: 0;
    border-radius: var(--wd-r-sm);
    background: transparent;
    color: var(--wd-step);
    font: 500 .875rem/1 var(--wd-font);
    cursor: pointer;
    transition: background-color .24s var(--wd-ease-out), color .24s var(--wd-ease-out), box-shadow .24s var(--wd-ease-out);
}
.wd-seg [aria-pressed="true"], .wd-seg [aria-current="page"] {
    background: var(--wd-white);
    color: var(--wd-ink);
    box-shadow: 0 1px 2px rgba(28, 21, 19, .1);
}
.wd-plans { display: grid; gap: 16px; width: 100%; }
@media (min-width: 992px) { .wd-plans { grid-template-columns: repeat(3, 1fr); } }
.wd-plan {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    border-radius: var(--wd-r-lg);
    background: var(--wd-bg-hi);
    border: 1px solid var(--wd-stone);
}
.wd-plan--featured { background: var(--wd-white); border-color: var(--wd-brand); box-shadow: 0 24px 48px -30px rgba(212, 68, 28, .5); }
.wd-plan__name { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; color: var(--wd-tile); }
.wd-plan__name .wd-pill { background: var(--wd-blush); color: var(--wd-head); }
.wd-plan__price { font-family: var(--wd-font-display); font-size: 2.5rem; font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--wd-head); }
.wd-plan ul { display: grid; gap: 10px; padding-block-start: 18px; border-block-start: 1px solid var(--wd-stone); }
.wd-plan li { display: flex; gap: 10px; font-size: .9375rem; }
.wd-plan li i { color: var(--wd-brand-text); }
.wd-plan .wd-btn { width: 100%; margin-top: auto; }

/* ── 19. Contact card / closing CTA ─────────────────────────────────────── */
.wd-contact {
    display: grid;
    gap: 14px;
    align-items: center;
    padding: clamp(18px, 2.2vw, 26px);
    border-radius: var(--wd-r-lg);
    background: var(--wd-white);
    border: 1px solid var(--wd-stone);
}
@media (min-width: 992px) { .wd-contact { grid-template-columns: auto 1fr auto; gap: 28px; } }
.wd-contact__phone {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--wd-font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--wd-head) !important;
}
.wd-contact__phone i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wd-blush);
    color: var(--wd-brand-text);
    font-size: 1.1rem;
}

.wd-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: clamp(32px, 5vw, 60px) clamp(20px, 3vw, 36px);
    border-radius: var(--wd-r-xl);
    background: var(--wd-night);
    color: #e8e2dc;
    text-align: center;
    isolation: isolate;
}
/* A warm glow from below — the one gradient in the theme. */
.wd-cta:before {
    content: "";
    position: absolute;
    inset: auto -20% -60% -20%;
    height: 120%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(251, 79, 31, .35), transparent);
}
.wd-cta .wd-section-title { color: var(--wd-white); max-width: 22ch; }
.wd-cta p { color: #c9c1ba; max-width: 56ch; }

/* ── 20. Cards, forms, tables, alerts (CMS pages) ────────────────────────── */
.card {
    --bs-card-title-color: var(--wd-head);
    --bs-card-color: var(--wd-text);
    background: var(--wd-bg-hi);
    border: 1px solid var(--wd-stone);
    border-radius: var(--wd-r-lg);
    box-shadow: none;
    overflow: hidden;
    transition: border-color .3s var(--wd-ease-out), background-color .3s var(--wd-ease-out);
}
.card:hover { border-color: var(--wd-line-2); background: var(--wd-white); }
.card-header, .card-footer { background: var(--wd-sand); border-color: var(--wd-stone); }
.card-title { font-family: var(--wd-font-display); font-weight: 500; letter-spacing: -.02em; color: var(--wd-head); }
.card-text { color: var(--wd-mute); }

.list-group-item { background: transparent; border-color: var(--wd-stone); color: var(--wd-text); }
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--wd-sand); }

.badge { font-weight: 500; border-radius: 6px; }
.badge.bg-primary { background: var(--wd-brand-strong) !important; }
.badge.bg-light { background: var(--wd-sand) !important; color: var(--wd-step); }

.form-control, .form-select {
    min-height: 44px;
    background: var(--wd-white);
    border: 1px solid var(--wd-line);
    border-radius: var(--wd-r-sm);
    color: var(--wd-ink);
    font-family: var(--wd-font);
    box-shadow: none;
    transition: border-color .2s var(--wd-ease-out), box-shadow .2s var(--wd-ease-out);
}
.form-control::placeholder { color: var(--wd-mute); }   /* --wd-mute-2 is 2.9:1, under WCAG 1.4.3 */
.form-control:focus, .form-select:focus {
    border-color: var(--wd-brand-strong);
    box-shadow: 0 0 0 3px rgba(251, 79, 31, .16);
}
.form-label, .col-form-label { color: var(--wd-ink); font-weight: 500; font-size: .9375rem; }
.form-check-input:checked { background-color: var(--wd-brand-strong); border-color: var(--wd-brand-strong); }
.form-check-input:focus { border-color: var(--wd-brand-strong); box-shadow: 0 0 0 3px rgba(251, 79, 31, .16); }
.input-group-text { background: var(--wd-sand); border-color: var(--wd-line); color: var(--wd-mute); }

.table { --bs-table-color: var(--wd-text); --bs-table-bg: transparent; --bs-table-border-color: var(--wd-stone); }
.table thead th { font-weight: 500; color: var(--wd-mute); font-size: .875rem; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--wd-bg-hi); }

.alert { border-radius: var(--wd-r); border-width: 1px; }
.alert-success { background: #eef6ef; border-color: #cfe3d2; color: #1f4d2b; }
.alert-danger  { background: var(--wd-blush); border-color: var(--wd-peach); color: var(--wd-head); }
.alert-info    { background: var(--wd-lilac-hi); border-color: var(--wd-lilac); color: var(--wd-violet); }

.pagination { --bs-pagination-color: var(--wd-ink); --bs-pagination-active-bg: var(--wd-brand-strong); --bs-pagination-active-border-color: var(--wd-brand-strong); --bs-pagination-border-radius: var(--wd-r-sm); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--wd-mute-2); font-size: .875rem; }
.breadcrumb a { color: var(--wd-mute); }

/* The body an editor writes in the admin, rendered on a page. */
.cms-content { font-size: 1.0625rem; line-height: 1.7; }
.cms-content h2 { margin-block: 2.4rem 1rem; }
.cms-content h3 { margin-block: 1.8rem .7rem; }
.cms-content img { border-radius: var(--wd-r-md); }
.cms-content blockquote {
    margin: 2rem 0;
    padding: 1.4rem 1.6rem;
    border-radius: var(--wd-r-lg);
    background: var(--wd-sand);
    font-family: var(--wd-font-display);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--wd-head);
}
.cms-content table { width: 100%; border-collapse: collapse; }
.cms-content th, .cms-content td { border-block-end: 1px solid var(--wd-stone); padding: .75rem .8rem; text-align: start; }
.cms-content th { font-weight: 500; color: var(--wd-mute); font-size: .9rem; }
.cms-content code { font-family: var(--wd-font-mono); background: var(--wd-sand); color: var(--wd-step); border-radius: 6px; padding: .1em .4em; font-size: .9em; }
/* Pasted sections still get the .wd-sec reset when they sit inside page copy. */
.cms-content .wd-sec :is(h1, h2, h3, h4) { margin-block: 0; }

/* ── 21. Footer ──────────────────────────────────────────────────────────────
   Measured on weaveos.com in a browser: #161412 with a #4a4038 rule on top;
   an aside ruled off on its inline-end side (#393633), then a 4-column grid,
   60px apart. Group headings 13px/500 at 50% of the cream ink #f3f1eb, links
   16px/500 at 72%, 28px apart. The wordmark spans the content width at a
   faint tint; the bottom row is 13px at 60% with no rule above it. On a phone
   every group flows into one two-column grid and links drop to 14px. */
.wd-footer {
    --wd-cream: 243, 241, 235;
    background: var(--wd-night);
    color: rgba(var(--wd-cream), .72);
    border-block-start: 1px solid var(--wd-term-line);
    padding-block-start: 36px;
}
.wd-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 16px;
}
.wd-footer__aside, .wd-footer__cols { display: contents; }
.wd-footer__meta {
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(var(--wd-cream), .9) !important;
    text-decoration: none;
}
.wd-fgroup h2 {
    margin: 0 0 12px;
    font-family: var(--wd-font);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    color: rgba(var(--wd-cream), .5);
}
.wd-fgroup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wd-fgroup a,
.wd-fgroup span {
    font-size: .875rem;
    font-weight: 500;
    line-height: 20px;
    color: rgba(var(--wd-cream), .72);
    text-decoration: none;
    transition: color .2s var(--wd-ease-out);
}
/* _Head pins footer a:hover to #fff !important — on this band that is the
   hover we want anyway. */
.wd-fgroup a:hover { color: rgb(var(--wd-cream)); }

@media (min-width: 768px) {
    .wd-fgroup a, .wd-fgroup span { font-size: 1rem; }
    .wd-fgroup ul { gap: 6px; }
    .wd-footer__grid { grid-template-columns: minmax(180px, .9fr) minmax(0, 4fr); gap: 44px; }
    .wd-footer__aside {
        display: flex;
        flex-direction: column;
        gap: 26px;
        padding-inline-end: 32px;
        border-inline-end: 1px solid var(--wd-coal);
    }
    .wd-footer__cols {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
        align-content: start;
    }
}
@media (min-width: 992px) { .wd-footer__cols { grid-template-columns: repeat(4, 1fr); } }

/* The reference's giant stretched site name sat between the columns and this
   bar; it was removed, so the bar takes over its spacing and a hairline. */
.wd-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-block-start: clamp(26px, 3.5vw, 40px);
    border-block-start: 1px solid rgba(var(--wd-cream), .12);
    padding-block: 18px 28px;
    font-size: .8125rem;
    font-weight: 500;
    color: rgba(var(--wd-cream), .6);
}
.wd-footer__bottom a { color: rgba(var(--wd-cream), .6); text-decoration: none; }

/* ── 21b. WideCommerce content in the reference's components ─────────────────
   The live widecommerce.com content (its logo, client logos, line icons,
   screenshots, partner logos and long Hebrew paragraphs) placed in the
   components above. Everything here adapts a real asset to the design:
   logos go monochrome as the reference's do, icons sit in its tiles, and the
   footer's paragraphs get the footer's link colour. */

/* Brand: the orange W alone, in the place of Weave's wordmark, at 88px
   (the generic 30px cap on .wd-brand img is lifted for it). */
.wd-brand .wd-brand__w { display: block; height: 88px; max-height: none; width: auto; }

/* The ink primary — the reference's current "Book a demo". */
.wd-btn--ink { background: var(--wd-ink); color: #f3f1eb !important; }
.wd-btn--ink:hover, .wd-btn--ink:focus-visible { background: var(--wd-brand-strong); color: var(--wd-white) !important; }

/* "בין לקוחותינו" is a heading on the live site; it keeps the reference's
   quiet trust-line look rather than a section-title size. */
.wd-trust__lead { font-family: var(--wd-font); font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--wd-mute); }
/* .wd-sec in front: Views/Home/Index.cshtml sets `.cms-homepage-content img
   { height: auto }` in a <style> that loads after this file, and at equal
   specificity that reset the logos to their full natural size. */
.wd-sec .wd-logo img { height: clamp(26px, 3.4vw, 40px); width: auto; max-width: 150px; object-fit: contain; }
/* The reference knocks its logos out to black with brightness(0) — fine for
   transparent PNGs, but several of these client files sit on a solid ground
   (Floralis became a black square). Greyscale multiplied onto the white card
   gives the same monochrome strip and keeps every logo's shape. */
.wd-sec .wd-logo img { filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; }

/* Hero tokens carry the site's own line icons, multiplied into the beige so
   the black line art reads as an embossed print. */
.wd-token img { width: 64%; height: auto; mix-blend-mode: multiply; opacity: .78; }

/* Product tour: the live hero's six tabs as the reference's segmented control. */
.wd-tour { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.wd-tour__tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.wd-tour__tabs::-webkit-scrollbar { display: none; }
.wd-tour__tabs button { white-space: nowrap; flex: none; }
.wd-seg [aria-selected="true"] { background: var(--wd-white); color: var(--wd-ink); box-shadow: 0 1px 2px rgba(28, 21, 19, .1); }
.wd-tour__panel { width: 100%; }
.wd-tour__panel[hidden] { display: none; }

/* The chosen tab's pill, slid into place by _Layout (it replaces the
   selected button's own white fill). */
.wd-seg.has-pill { position: relative; }
.wd-seg__pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 0;
    border-radius: var(--wd-r-sm);
    background: var(--wd-white);
    box-shadow: 0 1px 2px rgba(28, 21, 19, .1);
    transition: transform .5s var(--wd-ease), width .5s var(--wd-ease);
    pointer-events: none;
}
.wd-seg.has-pill > button { position: relative; z-index: 1; }
.wd-seg.has-pill > [aria-selected="true"] { background: transparent; box-shadow: none; }

/* With script, the panels ride one strip that slides to the chosen panel (a
   carousel), clipped to the card's width. Every panel stays laid out, so the
   strip keeps the tallest panel's height and switching never moves the page.
   Hidden panels are invisible (out of the tab order) except while the strip
   is moving (.is-moving), so every panel it passes is seen sliding by. */
.wd-tour__view { width: 100%; overflow: hidden; overflow: clip; border-radius: var(--wd-r-lg); }
.wd-tour__track {
    --wd-tour-gap: 24px;
    display: flex;
    gap: var(--wd-tour-gap);
    transition: transform .75s var(--wd-ease);
    will-change: transform;
}
.wd-tour__track > .wd-tour__panel { flex: 0 0 100%; min-width: 0; }
/* !important: Bootstrap's reboot sets [hidden] { display: none !important }. */
.wd-tour__track > .wd-tour__panel[hidden] { display: grid !important; visibility: hidden; }
.wd-tour__track.is-moving > .wd-tour__panel[hidden] { visibility: visible; }
.wd-window__shot {
    display: block;
    width: 100%;
    height: auto;
    background: var(--wd-white);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 5px;
    padding-left: 5px;
    border-radius:30px;
}

/* Feature tiles with the site's 64px line icons. */
.wd-sec .wd-bento__img { display: block; width: 56px; height: 56px; object-fit: contain; margin-block-end: 8px; }
.wd-bento--icons h3 { font-size: 1.1rem; line-height: 1.3; }
.wd-bento__badge { display: inline-block; width: 20px; height: 20px; vertical-align: -3px; margin-inline-start: 4px; }
.wd-bento__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px !important; }
.wd-sec .wd-bento__logos img { height: 30px; width: auto; }
.wd-sec .wd-bento__logos img[src*="konimbo"] { height: 18px; }
.wd-sec .wd-bento__badge { height: 20px; }

/* Partner logos (zap, SAP, Priority) as a quiet monochrome row. */
.wd-partners, .wd-flogos { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin: 6px 0 0; padding: 0; list-style: none; }
.wd-sec .wd-partners img { height: 28px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .3s var(--wd-ease-out), opacity .3s var(--wd-ease-out); }
.wd-partners img:hover { filter: none; opacity: 1; }

/* Eight conversion points: four tiles a row on desktop. */
@media (min-width: 1200px) { .wd-badges--4 { grid-template-columns: repeat(4, 1fr); } }
.wd-badges--4 .wd-caption { color: var(--wd-step); font-size: .875rem; line-height: 1.5; }

/* Footer: three content groups beside the aside; paragraphs in link colour;
   partner logos knocked out to the cream ink, as the reference's are. */
@media (min-width: 992px) { .wd-footer__cols--3 { grid-template-columns: 1fr 1.3fr 1fr; } }
.wd-fgroup__text { margin: 0 0 12px; font-size: .9375rem; font-weight: 400; line-height: 1.65; color: rgba(var(--wd-cream), .72); }
.wd-fgroup ul li a i { margin-inline-end: 4px; }
/* Links inside a paragraph keep its type, marked by a faint underline. */
.wd-fgroup__text a { font: inherit; text-decoration: underline; text-decoration-color: rgba(var(--wd-cream), .3); text-underline-offset: 3px; }
.wd-fgroup__text a:hover { text-decoration-color: currentColor; }
/* The eight-point list is plain text, not links: a notch below the "אודות"
   paragraph, set tight, so the long column reads as one compact list. */
.wd-fgroup .wd-fgroup__points { gap: 4px; }
.wd-fgroup .wd-fgroup__points span { display: block; font-size: max(.8125rem, 12px); font-weight: 400; line-height: 1.4; }
.wd-fgroup .wd-flogos { display: flex; gap: 20px; }   /* outranks .wd-fgroup ul's grid */
.wd-flogos img { height: 24px; width: auto; filter: grayscale(1) brightness(0) invert(1); opacity: .55; }
@media (max-width: 767.98px) {
    /* Long Hebrew lines need the full width on a phone. */
    .wd-footer__cols--3 > .wd-fgroup { grid-column: 1 / -1; }
}

/* ── 21c. Inner pages built from the homepage's sections ─────────────────────
   A page on the "full-width" template whose body is .wd-sec sections (e.g.
   /זירת-מסחר-מערכת-b2b): the sections bring their own .wd-stage gutter, so
   the template's px-3 wrapper would indent them past the header's edges, and
   its inline h2/h3 margins and 1.8 line-height would undo the .wd-sec reset. */
.px-3:has(> .fw-content > .wd-sec) { padding-inline: 0 !important; }
.fw-content .wd-sec :is(h1, h2, h3, h4) { margin-block: 0; }
.fw-content .wd-sec p { line-height: 1.55; }

/* Page head: the homepage hero's centred copy, then the page's video in a
   mac window in place of the ring. */
.wd-page-hero { gap: clamp(20px, 3vw, 36px); padding-block: clamp(28px, 4vw, 52px) clamp(8px, 2vw, 20px); }
.wd-page-hero__media { width: 100%; max-width: 1000px; }
.wd-page-hero__media .wd-window__shot { aspect-ratio: 16 / 9; object-fit: cover; padding: 0; border-radius: 0; background: #000; }

/* Showcase panels, two to a row on desktop: the mockup on top, its copy below.
   An odd last panel spans the row with its copy beside the mockup. The live
   mockups already carry their own device frame, so they sit bare on the panel. */
.wd-stack { display: grid; gap: var(--wd-card-gap); }
.wd-showcase--bare > .wd-showcase__img { order: -1; }
@media (min-width: 992px) {
    .wd-stack { grid-template-columns: 1fr 1fr; }
    .wd-showcase--bare { grid-template-columns: 1fr; align-content: start; gap: 24px; padding: clamp(24px, 2.6vw, 36px); }
    .wd-showcase--bare .wd-title { font-size: clamp(1.4rem, 2vw, 1.875rem); }
    .wd-showcase--bare > .wd-showcase__img { height: clamp(220px, 22vw, 300px); }
    .wd-stack > .wd-showcase--bare:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
        align-content: center;
        gap: clamp(32px, 4vw, 56px);
        padding-inline: clamp(28px, 4vw, 56px);
    }
    .wd-stack > .wd-showcase--bare:last-child:nth-child(odd) > .wd-showcase__img { order: 0; height: auto; max-height: 360px; }
    .wd-stack > .wd-showcase--flip:last-child:nth-child(odd) > .wd-copy { order: 2; }
}
.wd-showcase__img { display: block; width: 100%; max-height: 420px; height: auto; object-fit: contain; }

/* A short list of points: an orange check, then the line. */
.wd-sec .wd-ticks { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.wd-ticks > li { position: relative; padding-inline-start: 28px; color: var(--wd-text); line-height: 1.5; }
.wd-ticks > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .2em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--wd-blush) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23d4441c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* A section head whose description is a single paragraph: the paragraph runs
   just after the title, on its last baseline, taking the rest of the row (one
   line where it fits) instead of wrapping in a 430px column at the far edge. */
@media (min-width: 992px) {
    .wd-head:not(.wd-head--stack, .wd-head--center):has(> .wd-head__title + p:last-child) {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: last baseline;
        column-gap: clamp(40px, 5vw, 72px);
    }
}

/* Compact feature cards: the live site's layout — icon on the title's line,
   the text beneath — on the bento's hairline grid. Five across on a wide
   screen, so the fifteen B2B features fill three even rows. */
@media (min-width: 1200px) { .wd-bento--compact { grid-template-columns: repeat(5, 1fr); } }
/* The homepage's eighteen stay three across: six rows even, and its longer
   titles wrap to three or four lines in a sixth of the 1400px stage. */
@media (min-width: 1200px) { .wd-bento--three { grid-template-columns: repeat(3, 1fr); } }
.wd-bento--compact > li {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto 1fr;
    align-content: start;
    gap: 12px;
    padding: clamp(16px, 1.6vw, 20px);
}
.wd-feat__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--wd-r-sm);
    background: var(--wd-sand);
    transition: background-color .3s var(--wd-ease-out);
}
/* The icons are black line art on white: multiplied, the white takes the tile's colour. */
.wd-sec .wd-feat__icon img { width: 26px; height: 26px; object-fit: contain; mix-blend-mode: multiply; }
.wd-bento--compact > li:hover .wd-feat__icon { background: var(--wd-blush); }
.wd-sec .wd-bento--compact h3 {
    align-self: center;
    font-family: var(--wd-font);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--wd-tile);
}
.wd-sec .wd-bento--compact p { grid-column: 1 / -1; font-size: .8125rem; line-height: 1.55; color: var(--wd-mute); }

/* A wide feature card: spans the whole row at every breakpoint, so a grid
   that divides evenly (18 = 3×6 = 2×9) gains one closing card instead of an
   orphan in a half-empty last row. The text keeps a reading measure, and a
   row of tags names the parts of the feature. */
.wd-bento > li.wd-feat--wide { grid-column: 1 / -1; }
.wd-sec .wd-bento--compact .wd-feat--wide p { max-width: 90ch; font-size: .875rem; }
.wd-sec .wd-feat__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; grid-column: 1 / -1; }
.wd-feat__tags li {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--wd-sand);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--wd-step);
}

/* Long-form copy — the articles, the terms, the accessibility statement — on a
   white panel at a reading measure. .wd-sec takes every margin and list marker
   away, so the flow spacing comes back here, between siblings only. */
.wd-prose {
    max-width: 880px;
    margin-inline: auto;
    background: var(--wd-white);
    border: 1px solid var(--wd-stone);
    padding: clamp(22px, 4.4vw, 60px);
    font-size: 1.0625rem;
    color: var(--wd-text);
}
.wd-sec .wd-prose > * + * { margin-block-start: 1em; }
.wd-sec .wd-prose p { line-height: 1.8; }
.wd-sec .wd-prose h2 {
    margin-block-start: 2.1em;
    font-family: var(--wd-font-display);
    font-size: clamp(1.25rem, 1.9vw, 1.5rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--wd-head);
    text-wrap: balance;
}
.wd-sec .wd-prose > h2:first-child { margin-block-start: 0; }
.wd-sec .wd-prose h2 + * { margin-block-start: .6em; }
.wd-prose strong { font-weight: 600; color: var(--wd-ink); }
.wd-prose a:not(.wd-btn) { color: var(--wd-brand-text); text-decoration: underline; text-underline-offset: 3px; }
.wd-prose a:not(.wd-btn):hover { color: var(--wd-head); }
.wd-prose .wd-ticks > li { line-height: 1.7; }
.wd-prose kbd {
    display: inline-block;
    padding: .05em .45em;
    border: 1px solid var(--wd-line);
    border-block-end-width: 2px;
    border-radius: 6px;
    background: var(--wd-bg-hi);
    color: var(--wd-ink);
    font-family: var(--wd-font-mono);
    font-size: .85em;
    line-height: 1.5;
    white-space: nowrap;
}
.wd-sec .wd-prose .wd-ticks { gap: 8px; }
/* Numbered lists: the number in a blush disc, where .wd-ticks has its check. */
.wd-sec .wd-prose ol { display: flex; flex-direction: column; gap: 10px; counter-reset: wd-ol; }
.wd-prose ol > li { position: relative; padding-inline-start: 36px; line-height: 1.7; counter-increment: wd-ol; }
.wd-prose ol > li::before {
    content: counter(wd-ol);
    position: absolute;
    inset-inline-start: 0;
    top: .2em;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--wd-blush);
    color: var(--wd-brand-text);
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.wd-sec .wd-prose .wd-prose__lead { font-size: 1.125rem; line-height: 1.7; color: var(--wd-ink); }
.wd-prose__note {
    padding: 1.1em 1.3em;
    border-radius: var(--wd-r);
    background: var(--wd-sand);
    color: var(--wd-ink);
    font-weight: 500;
}
.wd-sec .wd-prose .wd-prose__related {
    margin-block-start: 2.4em;
    padding-block-start: 1.4em;
    border-block-start: 1px solid var(--wd-stone);
}
.wd-prose__related ul { display: flex; flex-direction: column; gap: 6px; margin-block-start: 8px; }
.wd-prose__related a::after { content: " ←"; }
[dir="ltr"] .wd-prose__related a::after { content: " →"; }

/* The contact page: the form beside the phone, address and hours. */
.wd-contact-page { display: grid; gap: clamp(14px, 2vw, 22px); }
@media (min-width: 992px) {
    .wd-contact-page { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
}
.wd-contact-page__form { background: var(--wd-white); border: 1px solid var(--wd-stone); }
.wd-contact-page__form .wc-contact-form { margin-block: 0 !important; max-width: none !important; }
.wd-contact-page__info { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.wd-contact-page__mail {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    color: var(--wd-ink) !important;
}
.wd-contact-page__mail i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wd-white);
    color: var(--wd-brand-text);
    font-size: 1.1rem;
}
.wd-contact-page__info .wd-contact__phone i { background: var(--wd-white); }
.wd-contact-page__info bdi { white-space: nowrap; }  /* keep "09:00 - 18:00" on one line */

/* ── 21d. Supermarket page: storefront mockups ───────────────────────────────
   /supermarket opens on a screenshot of a grocery store built on the platform
   (/assets/supermarket/storefront.webp, 1280×800 at 2x: a fictional store,
   real product photos, docked cart). The panels below it redraw the rest of
   the platform's interface as live markup in the theme's surfaces: the
   product page with its units / kg switch, the delivery-slot picker, the J5
   checkout, the picker's phone app, promotions in the cart and the customer-
   intelligence board. Their layout follows svmarket.co.il, the platform's
   live store; their product photos are 192px thumbnails of svmarket's own
   unbranded produce shots in /assets/supermarket/products. The homepage's
   "חדש בפלטפורמה" section (#new) reuses the card, KPI and note pieces for its
   Customer Intelligence and Ad Optimizer mockups. */
.wd-sm { font-size: .875rem; color: var(--wd-text); text-align: start; }
.wd-sm b { font-weight: 600; color: var(--wd-ink); }

/* The page hero crops its media to 16:9 for the B2B video; the storefront
   shot is 16:10 and keeps its own proportions. */
.wd-page-hero__media img.wd-window__shot { aspect-ratio: auto; height: auto; }

/* The promo video (Video/supermarket-promo, rendered with Remotion) in the
   same mac window as the B2B page's hero video. */
.wd-sm-video { max-width: 1000px; margin-inline: auto; }
.wd-sm-video .wd-window__shot { aspect-ratio: 16 / 9; object-fit: cover; padding: 0; border-radius: 0; background: #000; }

/* Product photo tile, price line, stepper and add button — svmarket's box.
   Every thumbnail in the mockups (product page, cross-sell rows, cart lines,
   picking rows) is a white tile with the photo contained in it, the way a
   store shows its white-ground pack shots. */
.wd-sm-card__img,
.wd-sm .wd-store__img,
.wd-sm-row > span:first-child,
.wd-sm-pick > span:first-child {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--wd-stone);
    background: var(--wd-white);
}
.wd-sm :is(.wd-sm-card__img, .wd-store__img, .wd-sm-row > span:first-child, .wd-sm-pick > span:first-child) img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.wd-sm-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; font-variant-numeric: tabular-nums; }
.wd-sm-price b { font-size: 1rem; }
.wd-sm-price small { color: var(--wd-mute); font-size: .75rem; }

/* Quantity stepper: round minus / value / plus, as on the live store. */
.wd-sm-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    background: var(--wd-bg);
    font-variant-numeric: tabular-nums;
}
.wd-sm-step > i {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--wd-white);
    color: var(--wd-ink);
    font-style: normal;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(28, 21, 19, .12);
}
.wd-sm-step > span { font-weight: 600; color: var(--wd-ink); font-size: .8125rem; }
.wd-sm-step > span small { font-weight: 400; color: var(--wd-mute); }
.wd-sm-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    border-radius: var(--wd-r-sm);
    background: var(--wd-ink);
    color: var(--wd-white);
    font-size: .8125rem;
    font-weight: 500;
}

/* The showcase grid's single column is implicitly `auto`, so the CI table's
   480px min-width would stretch the panel past a phone screen; minmax(0, 1fr)
   lets the table shrink inside its .wd-table-wrap instead. */
.wd-showcase--bare:has(> .wd-sm) { grid-template-columns: minmax(0, 1fr); }

/* A mockup is a picture (role="img"), so nothing inside it can take keyboard
   focus — a table that scrolled there could be scrolled only with a mouse or
   a finger (WCAG 2.1.1). It wraps and tightens to fit instead. */
.wd-sm-shot .wd-table-wrap { overflow: visible; }
.wd-sm-shot .wd-table { min-width: 0; }
@media (max-width: 575.98px) {
    .wd-sm-shot .wd-table { font-size: .75rem; }
    .wd-sm-shot .wd-table th, .wd-sm-shot .wd-table td { padding: 8px 4px; white-space: normal; }
}

/* A mockup that sits in a showcase panel instead of an image: a white card. */
.wd-sm-shot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: clamp(14px, 2vw, 22px);
    border-radius: var(--wd-r-md);
    background: var(--wd-white);
    box-shadow: 0 1px 0 rgba(84, 37, 31, .04), 0 24px 48px -28px rgba(84, 37, 31, .28);
}
.wd-showcase--bare > .wd-sm-shot { order: -1; }
.wd-sm-shot__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wd-sm-shot__head h3 { font: 500 1rem/1.3 var(--wd-font); color: var(--wd-ink); letter-spacing: 0; }

/* Product page row: photo, details, the units / kg switch. */
.wd-sm-pdp { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; }
.wd-sm-pdp .wd-sm-card__img { aspect-ratio: 1; }
.wd-sm-pdp__info { display: flex; flex-direction: column; gap: 6px; }
.wd-sm-pdp__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-sm-pdp__tags .wd-pill { font-size: .6875rem; }
.wd-sm-pdp__tags .wd-pill--brand { background: var(--wd-blush); color: var(--wd-head); }
.wd-sm-buy { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.wd-sm-buy .wd-seg { padding: 3px; }
.wd-sm-buy .wd-seg span { padding: 5px 12px; border-radius: 6px; font-size: .8125rem; font-weight: 500; color: var(--wd-step); }
.wd-sm-buy .wd-seg .is-on { background: var(--wd-white); color: var(--wd-ink); box-shadow: 0 1px 2px rgba(28, 21, 19, .1); }
.wd-sm-buy .wd-sm-add { padding-inline: 16px; }
.wd-sm-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--wd-r);
    background: var(--wd-sand);
    color: var(--wd-step);
    font-size: .8125rem;
}
.wd-sm-note i { color: var(--wd-brand-text); }
.wd-sm-note--violet { background: var(--wd-lilac-hi); color: var(--wd-violet); }
.wd-sm-note--violet i { color: var(--wd-violet); }
@media (max-width: 479.98px) {
    .wd-sm-buy { grid-template-columns: 1fr 1fr; }
    .wd-sm-buy .wd-sm-add { grid-column: 1 / -1; }
}

/* Cross-sell rows ("אולי יעניין אותך גם?"). */
.wd-sm-rows { display: grid; gap: 6px; }
.wd-sm-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 10px;
    background: var(--wd-bg-hi);
}
.wd-sm-row > span:first-child { width: 40px; height: 40px; border-radius: 8px; }
.wd-sm-row .wd-sm-step { min-width: 108px; }

/* Delivery slots: the day strip and the hour grid with its four states. */
.wd-sm-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wd-sm-days > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7px 4px;
    border-radius: 10px;
    background: var(--wd-bg);
    font-size: .75rem;
    color: var(--wd-mute);
    line-height: 1.3;
}
.wd-sm-days > span b { font-size: .875rem; }
.wd-sm-days > .is-on { background: var(--wd-ink); color: #d6cfc9; }
.wd-sm-days > .is-on b { color: var(--wd-white); }
.wd-sm-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.wd-sm-slots > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 9px 12px;
    border: 1px solid var(--wd-stone);
    border-radius: 10px;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}
.wd-sm-slots small { font-size: .6875rem; color: var(--wd-mute); }
.wd-sm-slots .is-few small { color: var(--wd-brand-text); font-weight: 600; }
.wd-sm-slots .is-full { background: var(--wd-bg); color: var(--wd-mute); text-decoration: line-through; }
.wd-sm-slots .is-full small { text-decoration: none; }
.wd-sm-slots .is-on { border-color: var(--wd-brand-strong); background: var(--wd-blush); color: var(--wd-head); font-weight: 600; }
.wd-sm-meter { display: grid; gap: 6px; font-size: .8125rem; color: var(--wd-step); }
.wd-sm-meter > span:last-child {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--wd-stone);
    overflow: hidden;
}
.wd-sm-meter > span:last-child > i {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: calc(var(--v, 50) * 1%);
    border-radius: 4px;
    background: var(--wd-brand);
    transition: width 1.1s var(--wd-ease);
}
.wd-reveal-ready .wd-reveal:not(.is-in) .wd-sm-meter > span:last-child > i { width: 0; }

/* J5 timeline: four stops joined by a rail; done stops are filled. */
.wd-sm-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: wd-sm; }
.wd-sm-flow > li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-size: .75rem;
    line-height: 1.35;
    color: var(--wd-mute);
}
.wd-sm-flow > li::before {
    content: "";
    position: absolute;
    top: 13px;
    inset-inline-start: 50%;
    width: calc(100% + 6px);
    height: 2px;
    background: var(--wd-stone);
}
.wd-sm-flow > li:last-child::before { display: none; }
.wd-sm-flow > li > i {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--wd-sand);
    color: var(--wd-mute);
    font-size: .8125rem;
}
.wd-sm-flow > li.is-done { color: var(--wd-ink); }
.wd-sm-flow > li.is-done::before { background: var(--wd-brand); }
.wd-sm-flow > li.is-done > i { background: var(--wd-brand-strong); color: var(--wd-white); }
.wd-sm-flow > li.is-now > i { background: var(--wd-white); color: var(--wd-brand-text); box-shadow: inset 0 0 0 2px var(--wd-brand-strong); }

/* The picker's phone: a dark handset around picking rows. */
.wd-sm-phone {
    width: min(100%, 300px);
    margin-inline: auto;
    padding: 10px;
    border-radius: 34px;
    background: var(--wd-night);
    box-shadow: 0 30px 50px -30px rgba(28, 21, 19, .6);
}
.wd-showcase--bare > .wd-sm-phone { order: -1; }
.wd-sm-phone__screen {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 12px 16px;
    border-radius: 26px;
    background: var(--wd-term);
    color: #e8e2dc;
}
.wd-sm-phone__bar { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; color: #b7aea6; }
.wd-sm-phone__bar b { color: var(--wd-white); font-size: .9375rem; }
.wd-sm-pick {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid var(--wd-term-line);
    border-radius: 10px;
    font-size: .75rem;
}
.wd-sm-pick > span:first-child { width: 28px; height: 28px; border: 0; border-radius: 7px; }
.wd-sm-pick small { display: block; color: #9b928a; font-family: var(--wd-font-mono); font-size: .6875rem; }
.wd-sm-pick > :last-child { font-family: var(--wd-font-mono); color: #b7aea6; white-space: nowrap; }
.wd-sm-pick.is-done > :last-child { color: #7fd99a; }
.wd-sm-pick.is-hot { background: rgba(232, 85, 47, .44); border-color: transparent; }
.wd-sm-pick.is-hot > :last-child, .wd-sm-pick.is-hot small { color: var(--wd-white); }
.wd-sm-scan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    margin-top: 4px;
    border-radius: 10px;
    background: var(--wd-brand-strong);
    color: var(--wd-white);
    font-size: .8125rem;
    font-weight: 500;
}

/* Cart lines in the promotions and checkout mockups, and a struck, greyed
   line for an item the picker removed. */
.wd-sm .wd-checkout__line small { color: var(--wd-mute); font-size: .75rem; }
.wd-sm :is(.wd-checkout__line, .wd-checkout__perk) > b { white-space: nowrap; }
.wd-sm .wd-checkout__line.is-out { color: var(--wd-mute); }
.wd-sm .wd-checkout__line.is-out > b { text-decoration: line-through; color: var(--wd-mute); }
.wd-sm .wd-checkout__line.is-out .wd-store__img img { filter: grayscale(1); opacity: .5; }
/* An icon in place of a photo (the club member's line), in the club violet. */
.wd-sm .wd-store__img > i { font-size: 1.35rem; color: var(--wd-violet); }

@media (prefers-reduced-motion: reduce) {
    .wd-sm-meter > span:last-child > i { transition: none; }
}

/* ── 21e. "מדוע WideCommerce" ────────────────────────────────────────────────
   The page's own claims made scannable: three facts under the hero, the five
   reasons as numbered rows (title and one line beside the points), the
   values in the badge grid, and cards that lead to the three solutions. */

/* Facts: three white tiles on hairline gaps, a big figure over a caption. */
.wd-why-facts {
    display: grid;
    gap: 2px;
    width: 100%;
    max-width: 1000px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: var(--wd-r-lg);
    overflow: hidden;
    background: var(--wd-stone);
}
@media (min-width: 768px) { .wd-why-facts { grid-template-columns: repeat(3, 1fr); } }
.wd-why-facts > li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: clamp(18px, 2.4vw, 28px);
    background: var(--wd-white);
}
.wd-why-facts__n {
    font-family: var(--wd-font-display);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--wd-head);
}
.wd-why-facts__t { font-size: .9375rem; color: var(--wd-mute); }

/* Reasons: one white panel, a row per reason, the number in brand orange. */
.wd-sec .wd-why-list {
    counter-reset: wd-why;
    display: grid;
    border-radius: var(--wd-r-lg);
    background: var(--wd-white);
    border: 1px solid var(--wd-stone);
}
.wd-why-list > li {
    counter-increment: wd-why;
    display: grid;
    gap: 14px 40px;
    padding: clamp(22px, 3vw, 36px) clamp(20px, 3vw, 40px);
}
.wd-why-list > li + li { border-block-start: 1px solid var(--wd-stone); }
.wd-why-list > li::before {
    content: counter(wd-why, decimal-leading-zero);
    font-family: var(--wd-font-display);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--wd-brand-text);
}
@media (min-width: 992px) {
    .wd-why-list > li { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}
.wd-why-list__head { display: flex; flex-direction: column; gap: 8px; }
.wd-sec .wd-why-list__head h3 {
    font-family: var(--wd-font-display);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--wd-head);
}
.wd-why-list__head p { color: var(--wd-mute); font-size: 1rem; }
.wd-sec .wd-why-list .wd-ticks { margin-top: 0; }

/* Solutions: three link cards. */
.wd-sec .wd-why-sol { display: grid; gap: clamp(12px, 1.6vw, 18px); }
@media (min-width: 768px) { .wd-why-sol { grid-template-columns: repeat(3, 1fr); } }
.wd-why-sol a {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: clamp(22px, 2.6vw, 32px);
    border-radius: var(--wd-r-lg);
    background: var(--wd-sand);
    color: inherit;
    text-decoration: none;
    transition: background-color .3s var(--wd-ease-out), transform .3s var(--wd-ease-out);
}
.wd-why-sol a:hover, .wd-why-sol a:focus-visible { background: var(--wd-white); transform: translateY(-3px); }
.wd-sec .wd-why-sol h3 { font-family: var(--wd-font-display); font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; color: var(--wd-head); }
.wd-why-sol p { color: var(--wd-mute); font-size: .9375rem; }
.wd-why-sol__more { margin-top: auto; font-weight: 500; color: var(--wd-brand-text); }
.wd-why-sol__more::after { content: " ←"; }
[dir="ltr"] .wd-why-sol__more::after { content: " →"; }

/* Closing call to action: the buttons centred, the phone as a light outline. */
.wd-cta .wd-actions { justify-content: center; margin-top: 6px; }
.wd-why-phone { border-color: rgba(255, 255, 255, .35); color: var(--wd-white) !important; }
.wd-why-phone:hover, .wd-why-phone:focus-visible { background: var(--wd-white); color: var(--wd-ink) !important; }

@media (prefers-reduced-motion: reduce) {
    .wd-why-sol a { transition: none; }
    .wd-why-sol a:hover { transform: none; }
}

/* ── 22. Scroll reveal ───────────────────────────────────────────────────────
   Content arrives from 16px below as it comes into view. Armed from script
   (.wd-reveal-ready on <html>), so with JS off nothing starts hidden. */
.wd-reveal-ready .wd-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s var(--wd-ease), transform .7s var(--wd-ease);
}
.wd-reveal-ready .wd-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .wd-reveal-ready .wd-reveal { opacity: 1; transform: none; transition: none; }
    .wd-ring__puck, .wd-ring__core:after, .wd-ring__item > * { animation: none; }
    .wd-ring__cam, .wd-ring__item > * { transition: none; }
    .wd-ring__card, .wd-ring__card-in { animation: none; }
    .wd-marquee__row { animation: none !important; }
    .wd-bar > span > i { transition: none; }
    .wd-header .wd-nav, .wd-nav__bar { transition: none; }
    .wd-nav .dropdown-menu.show, .wd-sheet.show { animation: none; }
    .btn:active, .wd-btn:active { transform: none; }
    .wd-seg__pill { transition: none; }
    .wd-tour__track { transition: none; }
}