/*
 * WORKOM marketing — design system
 *
 * Loaded after marketing.css. Each redesign phase moves its section here and
 * removes the old rules from marketing.css, until marketing.css is gone.
 *
 * Palette is taken from the logo: navy #071838 + brand blue.
 * Type: Sora (display) + Inter (text). Both loaded in marketing/layout.
 */

/* ---------------------------------------------------------------
 * 1. Tokens
 * ------------------------------------------------------------- */
.wo {
    /* Colour */
    --ink: #071838;               /* logo navy — headings, primary text */
    --ink-2: #4a5a75;             /* body / lead text (7:1 on white) */
    --ink-3: #66758e;             /* meta, captions (4.6:1 on white) */
    --bg: #ffffff;
    --bg-2: #f5f7fb;              /* quiet alternate section */
    --bg-3: #eaeff6;              /* image placeholders, wells */
    --bg-ink: #071838;            /* dark band / footer */
    --line: rgba(7, 24, 56, 0.1);
    --line-strong: rgba(7, 24, 56, 0.2);
    --accent: #1f66e5;            /* logo blue, 5.1:1 with white text */
    --accent-hover: #1852c0;
    --accent-soft: #eaf1fd;

    /* Type */
    --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --display: "Sora", "Inter", "Segoe UI", system-ui, sans-serif;
    --fs-display: clamp(2.375rem, 1.6rem + 3.6vw, 4rem);
    --fs-h2: clamp(1.875rem, 1.35rem + 2.2vw, 2.875rem);
    --fs-h3: 1.25rem;
    --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-eyebrow: 0.75rem;

    /* Space */
    --gutter: clamp(1rem, 4vw, 2rem);
    --max: 1200px;
    --section-y: clamp(3rem, 2rem + 6vw, 7rem);
    --stack-sm: 0.75rem;
    --stack-md: 1.25rem;
    --stack-lg: 2.5rem;

    /* Shape */
    --r-sm: 8px;                  /* buttons, inputs */
    --radius: 12px;               /* cards, images */
    --shadow-1: 0 1px 2px rgba(7, 24, 56, 0.06), 0 4px 16px rgba(7, 24, 56, 0.05);

    /* Motion */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur: 200ms;

    /* Legacy names still read by marketing.css */
    --navy: var(--ink);
    --navy-deep: var(--ink);
    --text: var(--ink);
    --muted: var(--ink-2);
    --faint: var(--ink-3);
    --logo: var(--ink);
    --logo-soft: var(--accent);
    --footer-bg: var(--bg-ink);
    --surface-glow: transparent;
    --shot-grad-a: var(--bg-3);
    --shot-grad-b: var(--bg-3);
    --shadow-card: var(--shadow-1);

    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.6;
    font-feature-settings: "cv11", "ss01";
    text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------
 * 2. Base
 * ------------------------------------------------------------- */
.wo ::selection {
    background: var(--accent-soft);
    color: var(--ink);
}

.wo :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.wo a {
    transition: color var(--dur) var(--ease);
}

.wo h1,
.wo h2,
.wo h3,
.wo h4 {
    font-family: var(--display);
    color: var(--ink);
    text-wrap: balance;
}

.wo p {
    text-wrap: pretty;
}

.wo-wrap {
    width: min(var(--max), 100% - 2 * var(--gutter));
    margin-inline: auto;
}

/* ---------------------------------------------------------------
 * 3. Type roles
 * ------------------------------------------------------------- */

.wo-section h2,
.wo-how h2,
.wo-pricing h2,
.wo-close h2 {
    font-size: var(--fs-h2);
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

/* Eyebrow above a heading */
.wo-label {
    display: inline-block;
    margin: 0 0 var(--stack-sm);
    font-family: var(--font);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.wo-lead,
.wo-section .wo-lead {
    font-size: var(--fs-lead);
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 38rem;
}

/* ---------------------------------------------------------------
 * 4. Buttons
 * ------------------------------------------------------------- */
.wo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    min-height: 48px;
    padding: 0 1.375rem;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    box-shadow: none;
    transition:
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        color var(--dur) var(--ease);
}

.wo-btn-primary,
.wo-top .wo-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: none;
}

.wo-btn-primary:hover,
.wo-top .wo-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

/* `a.` prefix beats `.wo a { color: inherit }` in marketing.css */
a.wo-btn-primary,
a.wo-btn-primary:hover {
    color: #fff;
}

a.wo-btn-ghost {
    color: var(--ink);
}

.wo-btn-ghost {
    background: var(--bg);
    border-color: var(--line-strong);
    color: var(--ink);
}

.wo-btn-ghost:hover {
    background: var(--bg-2);
    border-color: var(--ink);
    color: var(--ink);
}

.wo-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack-sm);
}

/* ---------------------------------------------------------------
 * 5. Header
 *
 * < 1080px: logo · Demo · menu button, full-screen drawer.
 * ≥ 1080px: logo · links · language · sign in · CTA.
 * ------------------------------------------------------------- */
.wo {
    --top-h: 64px;
}

@media (min-width: 1080px) {
    .wo {
        --top-h: 76px;
    }
}

.wo-top {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid transparent;
    transition:
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.wo-top.is-scrolled {
    background: rgba(255, 255, 255, 0.86);
    border-bottom-color: var(--line);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
}

/* backdrop-filter would make the fixed drawer position against the header */
body.wo-nav-open .wo-top {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.wo-top-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: var(--top-h);
}

.wo-logo {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}

.wo-top .wo-logo img {
    width: auto;
    height: 28px;
}

@media (min-width: 1080px) {
    .wo-top .wo-logo img {
        height: 32px;
    }
}

/* Primary links */
.wo-nav {
    display: none;
}

.wo-nav > a,
.wo-nav-drop-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 40px;
    padding: 0 0.625rem;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    font: 500 0.9375rem/1 var(--font);
    color: var(--ink-2);
    cursor: pointer;
    transition: color var(--dur) var(--ease);
}

.wo-nav > a:hover,
.wo-nav-drop-trigger:hover,
.wo-nav-drop.is-open .wo-nav-drop-trigger {
    color: var(--ink);
}

.wo-nav > a.is-active,
.wo-nav-drop-trigger.is-active {
    color: var(--ink);
}

.wo-nav > a.is-active::after,
.wo-nav-drop-trigger.is-active::after {
    content: "";
    position: absolute;
    left: 0.625rem;
    right: 0.625rem;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

.wo-nav-caret {
    width: 10px;
    height: 10px;
    transition: transform var(--dur) var(--ease);
}

.wo-nav-drop.is-open .wo-nav-caret {
    transform: rotate(180deg);
}

/* Modules dropdown */
.wo-nav-drop {
    position: relative;
}

.wo-nav-drop-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    width: 300px;
    padding: 0.375rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(7, 24, 56, 0.1), 0 2px 6px rgba(7, 24, 56, 0.04);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition:
        opacity 160ms var(--ease),
        transform 160ms var(--ease),
        visibility 0s linear 160ms;
}

/* keeps hover alive while the pointer crosses the gap */
.wo-nav-drop-menu::before {
    content: "";
    position: absolute;
    inset: -12px 0 auto;
    height: 12px;
}

.wo-nav-drop.is-open .wo-nav-drop-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.wo-nav-drop-item {
    display: grid;
    gap: 0.125rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--r-sm);
    transition: background-color var(--dur) var(--ease);
}

.wo-nav-drop-item:hover {
    background: var(--bg-2);
}

.wo-nav-drop-item__title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ink);
}

.wo-nav-drop-item.is-active .wo-nav-drop-item__title {
    color: var(--accent);
}

.wo-nav-drop-item__desc {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--ink-3);
}

/* Right side */
.wo-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.wo-actions > .wo-lang,
.wo-actions > .wo-login {
    display: none;
}

.wo-lang {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.wo-lang a {
    padding: 0.375rem 0.4rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}

.wo-lang a:hover {
    color: var(--ink);
}

.wo-lang a.is-active {
    color: var(--ink);
    background: var(--bg-2);
}

.wo-login {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink);
}

.wo-login:hover {
    color: var(--accent);
}

.wo-top-cta {
    min-height: 40px;
    padding: 0 1rem;
    font-size: 0.875rem;
    transition:
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.wo-top-cta__long {
    display: none;
}

/* Menu button */
.wo-menu {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -0.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--ink);
    cursor: pointer;
}

.wo-menu:hover {
    background: var(--bg-2);
}

.wo-menu-bars {
    position: relative;
    display: block;
    width: 20px;
    height: 12px;
}

.wo-menu-bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.75px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}

.wo-menu-bars span:nth-child(1) { top: 1px; }
.wo-menu-bars span:nth-child(2) { top: 9px; }

.wo-menu[aria-expanded="true"] .wo-menu-bars span:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
}

.wo-menu[aria-expanded="true"] .wo-menu-bars span:nth-child(2) {
    top: 5px;
    transform: rotate(-45deg);
}

/* Drawer (mobile / tablet) */
.wo-drawer {
    position: fixed;
    inset: calc(var(--top-h) + 1px) 0 0;
    z-index: 49;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
    border-top: 1px solid var(--line);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}

.wo-drawer.is-open {
    opacity: 1;
    transform: none;
}

.wo-drawer-inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-height: 100%;
    padding-block: 0.5rem 1.5rem;
}

.wo-drawer-nav > a {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
    font: 600 1.25rem/1.3 var(--display);
    letter-spacing: -0.015em;
    color: var(--ink);
}

.wo-drawer-nav a.is-active,
.wo-drawer-nav a.is-active span {
    color: var(--accent);
}

/* Modules dropdown inside the drawer: the panel opens by growing its grid row from 0fr to 1fr */
.wo-drawer-drop {
    border-bottom: 1px solid var(--line);
}

.wo-drawer-drop-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 0;
    border: 0;
    background: none;
    font: 600 1.25rem/1.3 var(--display);
    letter-spacing: -0.015em;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
}

.wo-drawer-drop-trigger.is-active {
    color: var(--accent);
}

.wo-drawer-drop-trigger .wo-nav-caret {
    width: 14px;
    height: 14px;
}

.wo-drawer-drop.is-open .wo-nav-caret {
    transform: rotate(180deg);
}

.wo-drawer-sub {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 260ms var(--ease), visibility 0s 260ms;
}

.wo-drawer-drop.is-open .wo-drawer-sub {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 260ms var(--ease), visibility 0s;
}

.wo-drawer-sub-inner {
    display: grid;
    min-height: 0;
    overflow: hidden;
}

.wo-drawer-sub a {
    display: grid;
    gap: 0.125rem;
    margin-left: 0.25rem;
    padding: 0.625rem 0 0.625rem 1rem;
}

.wo-drawer-sub a:last-child {
    margin-bottom: 0.875rem;
}

.wo-drawer-sub span {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
}

.wo-drawer-sub small {
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.wo-drawer-foot {
    display: grid;
    gap: 1.25rem;
    margin-top: auto;
}

.wo-drawer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.wo-nav-open {
    overflow: hidden;
}

@media (min-width: 560px) {
    .wo-top-cta__long { display: inline; }
    .wo-top-cta__short { display: none; }
}

@media (min-width: 1080px) {
    .wo-top-row {
        gap: 2rem;
    }

    .wo-nav {
        display: flex;
        align-items: center;
        gap: 0.125rem;
        margin-inline: auto;
    }

    .wo-actions {
        gap: 1.25rem;
        margin-left: 0;
    }

    .wo-actions > .wo-lang,
    .wo-actions > .wo-login {
        display: flex;
    }

    .wo-menu,
    .wo-drawer {
        display: none !important;
    }
}

/* 1080–1279: German labels are long, tighten the right side */
@media (min-width: 1080px) and (max-width: 1279px) {
    .wo-top-row {
        gap: 1.25rem;
    }

    .wo-actions {
        gap: 0.875rem;
    }
}

@media (min-width: 1280px) {
    .wo-nav {
        gap: 0.5rem;
    }
}

/* Header over the home hero (dark, transparent → dark glass).
 * JS adds .is-light once the hero has scrolled away or the drawer opens. */
/* .wo-top prefix beats `.wo img { display: block }` in marketing.css */
.wo-top .wo-logo__light {
    display: none;
}

.wo-top--over:not(.is-light) {
    background: transparent;
    border-bottom-color: transparent;
}

.wo-top--over:not(.is-light).is-scrolled {
    background: rgba(4, 13, 34, 0.62);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
}

.wo-top--over:not(.is-light) .wo-logo__dark { display: none; }
.wo-top--over:not(.is-light) .wo-logo__light { display: block; }

.wo-top--over:not(.is-light) .wo-nav > a,
.wo-top--over:not(.is-light) .wo-nav-drop-trigger {
    color: rgba(255, 255, 255, 0.72);
}

.wo-top--over:not(.is-light) .wo-nav > a:hover,
.wo-top--over:not(.is-light) .wo-nav > a.is-active,
.wo-top--over:not(.is-light) .wo-nav-drop-trigger:hover,
.wo-top--over:not(.is-light) .wo-nav-drop-trigger.is-active,
.wo-top--over:not(.is-light) .wo-nav-drop.is-open .wo-nav-drop-trigger,
.wo-top--over:not(.is-light) .wo-login,
.wo-top--over:not(.is-light) .wo-menu {
    color: #fff;
}

.wo-top--over:not(.is-light) .wo-nav > a.is-active::after,
.wo-top--over:not(.is-light) .wo-nav-drop-trigger.is-active::after {
    background: #3d8bff;
}

.wo-top--over:not(.is-light) .wo-lang a {
    color: rgba(255, 255, 255, 0.5);
}

.wo-top--over:not(.is-light) .wo-lang a:hover,
.wo-top--over:not(.is-light) .wo-lang a.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.wo-top--over:not(.is-light) .wo-login:hover {
    color: #8fb4ff;
}

.wo-top--over:not(.is-light) .wo-menu:hover {
    background: rgba(255, 255, 255, 0.1);
}

.wo-top--over:not(.is-light) :focus-visible {
    outline-color: #8fb4ff;
}

/* ---------------------------------------------------------------
 * 6. Home hero — duotone site photo, centred copy, horizon edge
 * ------------------------------------------------------------- */
.wo-hero {
    --night: #040d22;
    --sky: #8fb4ff;
    --glow: #3d8bff;

    position: relative;
    isolation: isolate;
    overflow: clip;
    display: flex;
    flex-direction: column;
    min-height: min(100svh, 920px);
    padding-top: calc(var(--top-h) + 1px);
    background: var(--night);
    color: #fff;
}

/* slides under the sticky header */
.wo-hero {
    margin-top: calc(-1 * (var(--top-h) + 1px));
}

.wo-hero__bg,
.wo-hero__bg > * {
    position: absolute;
    inset: 0;
}

.wo-hero__bg {
    z-index: -1;
    overflow: hidden;
}

.wo-hero__photo {
    background-position: 50% 35%;
    background-size: cover;
    background-repeat: no-repeat;
    filter: grayscale(1) contrast(1.15) brightness(1.05);
}


.wo-hero__tint {
    background: var(--accent);
    mix-blend-mode: multiply;
    opacity: 0.72;
}

/* darker behind the copy, edges open; bottom sinks into night */
.wo-hero__shade {
    background:
        radial-gradient(ellipse 60% 55% at 50% 50%, rgba(4, 13, 34, 0.72) 0%, rgba(4, 13, 34, 0.45) 60%, rgba(4, 13, 34, 0.3) 100%),
        linear-gradient(180deg, rgba(4, 13, 34, 0.55) 0%, transparent 22%, transparent 62%, var(--night) 100%);
}

/* fine grain stops banding in the gradients */
.wo-hero__grain {
    opacity: 0.1;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wo-hero__copy {
    display: grid;
    justify-items: center;
    gap: 1.375rem;
    max-width: 52rem;
    padding-block: clamp(4rem, 2rem + 6vw, 8.5rem) clamp(7rem, 5rem + 6vw, 10rem);
    text-align: center;
}

.wo-hero h1 {
    margin: 0;
    font-size: clamp(2.5rem, 1.35rem + 4.6vw, 4.75rem);
    font-weight: 650;
    line-height: 1.02;
    letter-spacing: -0.042em;
    color: #fff;
    text-shadow: 0 2px 30px rgba(4, 13, 34, 0.35);
}

.wo-hero h1 em {
    font-style: normal;
    white-space: nowrap;
    background: linear-gradient(100deg, #c3d6ff 0%, var(--sky) 35%, var(--glow) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.wo-hero__lead {
    margin: 0;
    max-width: 34rem;
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.wo-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.wo-hero .wo-btn-primary {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 24px -6px rgba(31, 102, 229, 0.7);
}

.wo-btn-glass {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.wo-btn-glass:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.26);
    color: #fff;
}

.wo-hero :focus-visible {
    outline-color: var(--sky);
}

/* the scene ends in an arc of light */
.wo-hero__horizon {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1;
    width: max(1800px, 160vw);
    height: 9rem;
    border-radius: 50%;
    background: var(--bg);
    box-shadow: 0 -1px 0 rgba(160, 195, 255, 0.85), 0 -10px 60px -6px rgba(61, 139, 255, 0.8);
    transform: translate(-50%, 50%);
    pointer-events: none;
}

@media (max-width: 759px) {
    .wo-hero {
        min-height: 0;
    }

    .wo-hero__photo {
        background-position: 62% 30%;
    }

    .wo-hero__shade {
        background: linear-gradient(180deg, rgba(4, 13, 34, 0.5) 0%, rgba(4, 13, 34, 0.25) 14%, rgba(4, 13, 34, 0.7) 34%, rgba(4, 13, 34, 0.92) 60%, var(--night) 100%);
    }

    /* a shorter hero, so the photo is cropped less and reads smaller */
    .wo-hero__copy {
        padding-block: 3.5rem 4.5rem;
    }

    .wo-hero__actions {
        width: 100%;
    }

    .wo-hero__actions .wo-btn {
        flex: 1 1 100%;
    }

    .wo-hero__horizon {
        width: 260vw;
        height: 5rem;
    }
}

/* Client logos, right before the prices: large and in one colour (some logos are white, so they are
 * always drawn as a dark silhouette); on hover they turn solid and grow a little */
.wo-trust {
    display: grid;
    justify-items: center;
    gap: 2.5rem;
    padding-top: var(--section-y);
}

.wo-trust__label {
    margin: 0;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* One row that keeps sliding left, on every screen. The track holds the list twice, so moving it by
 * half its width lands on the same picture and the loop has no seam. Edges fade out; on a mouse,
 * hovering pauses it. Both durations give about the same speed (~100px/s) for the row's length. */
.wo-trust__marquee {
    justify-self: stretch;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.wo-trust__track {
    display: flex;
    width: max-content;
    animation: wo-marquee 22s linear infinite;
}

.wo-trust__marquee:hover .wo-trust__track {
    animation-play-state: paused;
}

.wo-trust__logos {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4.5rem;
    margin: 0;
    padding: 0 4.5rem 0 0;
    list-style: none;
}

.wo-trust .wo-trust__logos img {
    width: auto;
    max-width: 180px;
    height: 48px;
    object-fit: contain;
    filter: grayscale(1) brightness(0);
    opacity: 0.45;
    transition: filter 300ms var(--ease), opacity 300ms var(--ease), transform 300ms var(--ease);
}

.wo-trust .wo-trust__logos img:hover {
    filter: grayscale(1) brightness(0);
    opacity: 0.9;
    transform: scale(1.06);
}

/* the price band follows the logos closely */
.wo-trust + .wo-pricing {
    margin-top: clamp(3.5rem, 2.5rem + 3vw, 5rem);
}

@keyframes wo-marquee {
    to { transform: translateX(-50%); }
}

/* Phones: the row runs edge to edge, with smaller logos */
@media (max-width: 759px) {
    .wo-trust__marquee {
        justify-self: start;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    }

    .wo-trust__track {
        animation-duration: 15s;
    }

    .wo-trust__logos {
        gap: 2.75rem;
        padding-right: 2.75rem;
    }

    .wo-trust .wo-trust__logos img {
        max-width: 130px;
        height: 34px;
    }
}

/* no motion wanted: back to the wrapped, static logos */
@media (prefers-reduced-motion: reduce) {
    .wo-trust__marquee {
        justify-self: center;
        width: auto;
        margin-left: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .wo-trust__track {
        width: auto;
        animation: none;
    }

    .wo-trust__logos {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 68rem;
        gap: 2.5rem 4.5rem;
        padding-right: 0;
    }

    .wo-trust__logos--clone {
        display: none;
    }
}

/* ---------------------------------------------------------------
 * 7. Home sections
 * ------------------------------------------------------------- */

/* How it works — a line that fills while scrolling */
.wo-how {
    padding-top: var(--section-y);
}

.wo-how__intro {
    max-width: 44rem;
    margin-bottom: 2.5rem;
}

.wo-how__intro .wo-lead {
    margin: 0;
}

.wo-how__grid {
    display: grid;
    gap: 3rem;
}

.wo-how__side {
    min-width: 0;
}

.wo-how__stage {
    display: none;
}

.wo-how__rail {
    position: relative;
    padding-left: 52px;
}

/* top/bottom are set by JS to run exactly from the first to the last dot */
.wo-how__track {
    position: absolute;
    left: 17px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
}

.wo-how__fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--accent), #3d8bff);
    transform: scaleY(0);
    transform-origin: top;
}

.wo-how__steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wo-how__step {
    position: relative;
    padding-bottom: 2.75rem;
}

.wo-how__step:last-child {
    padding-bottom: 0;
}

.wo-how__dot {
    position: absolute;
    left: -52px;
    top: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--line-strong);
    border-radius: 50%;
    background: var(--bg);
    font: 600 0.75rem/1 var(--display);
    color: var(--ink-3);
    transition:
        background-color 300ms var(--ease),
        border-color 300ms var(--ease),
        color 300ms var(--ease),
        box-shadow 300ms var(--ease);
}

.wo-how__step.is-reached .wo-how__dot {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.wo-how__step.is-active .wo-how__dot {
    box-shadow: 0 0 0 6px rgba(31, 102, 229, 0.15);
}

.wo-how__body h3 {
    margin: 0.375rem 0 0.375rem;
    font-size: var(--fs-h3);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.wo-how__body p {
    margin: 0;
    max-width: 30rem;
    color: var(--ink-2);
}

/* dim upcoming steps only once JS is running */
.wo-how__rail.is-ready .wo-how__body {
    opacity: 0.4;
    transition: opacity 350ms var(--ease);
}

.wo-how__rail.is-ready .is-reached .wo-how__body {
    opacity: 1;
}

/* mobile: each step carries its own scene */
.wo-how__inline {
    margin-top: 1.25rem;
}

@media (min-width: 960px) {
    .wo-how__grid {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        gap: 5rem;
        align-items: start;
    }

    /* desktop: one sticky stage, scenes cross-fade */
    .wo-how__stage {
        position: sticky;
        top: calc(var(--top-h) + 1.5rem);
        display: block;
        aspect-ratio: 16 / 11;
    }

    .wo-how__stage .wo-scene {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 450ms var(--ease);
    }

    .wo-how__stage .wo-scene.is-active {
        opacity: 1;
    }

    /* the intro starts on the stage's line; the steps follow it */
    .wo-how__intro {
        margin-bottom: 4rem;
    }

    /* long gaps between the steps make a long line and a slow, deliberate scroll;
       the space after the last step keeps the stage in view while it plays */
    .wo-how__rail {
        padding-bottom: 30vh;
        padding-left: 64px;
    }

    .wo-how__track {
        left: 19px;
    }

    .wo-how__dot {
        left: -64px;
        width: 40px;
        height: 40px;
        font-size: 0.8125rem;
    }

    .wo-how__step {
        padding-bottom: 34vh;
    }

    .wo-how__inline {
        display: none;
    }
}

/* ---------------------------------------------------------------
 * Illustrated scenes (partials/how-scene.blade.php)
 * Sizes are in em; the em scales with the scene width (container units),
 * so the same scene works in the desktop stage and inline on a phone.
 * Every element rests in its "before" state and animates once the
 * scene gets .is-on. Delays come from --d.
 * ------------------------------------------------------------- */
.wo-scene {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(ellipse 70% 60% at 25% 15%, rgba(61, 139, 255, 0.38), transparent 62%),
        radial-gradient(ellipse 60% 50% at 90% 100%, rgba(31, 102, 229, 0.3), transparent 60%),
        linear-gradient(160deg, #0b2252 0%, #050f26 100%);
    box-shadow: 0 30px 70px -30px rgba(4, 13, 34, 0.55);
}

/* faint dot grid */
.wo-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1.4px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 30%, transparent 85%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 30%, transparent 85%);
}

.sc {
    --t: 550ms;
    --spring: cubic-bezier(0.34, 1.4, 0.64, 1);

    position: absolute;
    inset: 0;
    font-family: var(--font);
    font-size: clamp(8.5px, 2.45cqw, 14px);
    line-height: 1.3;
    color: var(--ink);
}

.sc svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sc-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    padding: 1em 1.1em;
    background: #fff;
    border-radius: 0.9em;
    box-shadow: 0 1.4em 3em -1.2em rgba(2, 8, 24, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.sc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
}

.sc-h {
    font: 600 0.95em/1.2 var(--display);
    letter-spacing: -0.01em;
    color: var(--ink);
    white-space: nowrap;
}

.sc-m {
    font-size: 0.72em;
    color: var(--ink-3);
}

.sc-bar {
    display: block;
    height: 0.55em;
    border-radius: 0.3em;
    background: var(--bg-3);
}

.sc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.3em 0.65em;
    border-radius: 999px;
    background: var(--bg-2);
    font-size: 0.7em;
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
}

.sc-chip svg {
    width: 1.1em;
    height: 1.1em;
}

.sc-chip--ok {
    background: #e7f8ef;
    color: #0b7a4b;
}

/* two chips in one spot: the second replaces the first */
.sc-swap {
    display: grid;
}

.sc-swap > * {
    grid-area: 1 / 1;
    justify-self: end;
    transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}

.sc-swap > :last-child {
    opacity: 0;
    transform: scale(0.85);
}

.is-on .sc-swap > :first-child {
    opacity: 0;
    transition-delay: var(--swap, 1.6s);
}

.is-on .sc-swap > :last-child {
    opacity: 1;
    transform: none;
    transition-delay: var(--swap, 1.6s);
}

.sc-check {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.25em;
    height: 1.25em;
    padding: 0.15em;
    border: 1.5px solid var(--line-strong);
    border-radius: 0.35em;
    color: transparent;
    transition: background-color 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}

.is-on .sc-check--will {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transition-delay: var(--d, 0s);
}

.sc-map {
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 40%, #dfeafb 0 18%, transparent 19%),
        radial-gradient(circle at 75% 65%, #e6effc 0 22%, transparent 23%),
        #f3f7fd;
}

.sc-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(7, 24, 56, 0.12) 1px, transparent 1.3px);
    background-size: 1.1em 1.1em;
}

.sc-roads {
    position: absolute;
    inset: 0;
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    vector-effect: non-scaling-stroke;
}

.sc-roads path {
    stroke-width: 5px;
}

.sc-pin {
    position: absolute;
    width: 1.9em;
    height: 1.9em;
    margin: -1.9em 0 0 -0.95em;
    color: var(--accent);
    filter: drop-shadow(0 0.3em 0.3em rgba(7, 24, 56, 0.3));
}

.sc-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    font-size: 0.7em;
    font-weight: 700;
    color: #fff;
}

.sc-dot {
    flex: none;
    width: 0.55em;
    height: 0.55em;
    margin-left: auto;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0.25em rgba(34, 197, 94, 0.18);
}

.sc-progress {
    display: block;
    height: 0.4em;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-3);
}

.sc-progress span {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #3d8bff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s var(--ease);
}

.is-on .sc-progress span {
    transform: none;
    transition-delay: 0.6s;
}

/* 1 · Clocking in */
.sc1-phone {
    left: 8%;
    top: 7%;
    width: 31%;
    height: 86%;
    padding: 0.4em;
    border-radius: 1.6em;
    background: #0d1a36;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1.6em 3em -1em rgba(0, 0, 0, 0.6);
}

.sc1-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45em;
    height: 100%;
    padding: 1.1em 0.8em;
    border-radius: 1.25em;
    background: #fff;
    text-align: center;
}

.sc1-btn {
    display: grid;
    place-items: center;
    width: 76%;
    margin-block: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #5b9bff, var(--accent));
    box-shadow: 0 0 0 0.55em rgba(31, 102, 229, 0.14), 0 0.9em 1.6em -0.5em rgba(31, 102, 229, 0.7);
    font: 600 0.78em/1.15 var(--display);
    color: #fff;
    transition: background 400ms var(--ease), box-shadow 400ms var(--ease);
}

/* gradients can't transition, so the green state is a layer that fades in */
.sc1-btn {
    position: relative;
}

.sc1-btn::before {
    content: "";
    grid-area: 1 / 1;
    align-self: stretch;
    justify-self: stretch;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #4ade80, #16a34a);
    opacity: 0;
    transition: opacity 400ms var(--ease);
}

.is-on .sc1-btn::before {
    opacity: 1;
    transition-delay: 450ms;
}

.sc1-btn > span {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    justify-items: center;
    gap: 0.25em;
    padding: 0 0.4em;
    transition: opacity 250ms var(--ease);
}

.sc1-btn svg {
    width: 1.6em;
    height: 1.6em;
}

.sc1-btn__on {
    opacity: 0;
}

.is-on .sc1-btn {
    box-shadow: 0 0 0 0.55em rgba(22, 163, 74, 0.16), 0 0.9em 1.6em -0.5em rgba(22, 163, 74, 0.7);
    animation: sc-press 500ms var(--ease) 300ms both;
    transition-delay: 450ms;
}

.is-on .sc1-btn__off {
    opacity: 0;
    transition-delay: 450ms;
}

.is-on .sc1-btn__on {
    opacity: 1;
    transition-delay: 500ms;
}

@keyframes sc-press {
    40% { transform: scale(0.88); }
    100% { transform: scale(1); }
}

.sc1-status {
    opacity: 0;
    transform: translateY(0.4em);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}

.is-on .sc1-status {
    opacity: 1;
    transform: none;
    transition-delay: 800ms;
}

.sc1-map {
    right: 7%;
    top: 16%;
    width: 47%;
    height: 60%;
}

.sc1-pin {
    left: 52%;
    top: 52%;
    opacity: 0;
    transform: translateY(-2.5em);
    transition: opacity 300ms var(--ease), transform var(--t) var(--spring);
}

.is-on .sc1-pin {
    opacity: 1;
    transform: none;
    transition-delay: 1s;
}

.sc1-ripple {
    position: absolute;
    left: 52%;
    top: 52%;
    width: 1.4em;
    height: 0.6em;
    margin: -0.3em 0 0 -0.7em;
    border: 2px solid var(--accent);
    border-radius: 50%;
    opacity: 0;
}

.is-on .sc1-ripple {
    animation: sc-ripple 2.4s var(--ease) 1.3s infinite;
}

@keyframes sc-ripple {
    0% { opacity: 0.7; transform: scale(0.6); }
    100% { opacity: 0; transform: scale(4); }
}

.sc1-loc {
    position: absolute;
    left: 0.8em;
    bottom: 0.8em;
    background: #fff;
    box-shadow: 0 0.4em 1em -0.4em rgba(7, 24, 56, 0.35);
    opacity: 0;
    transform: translateY(0.4em);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}

.sc1-loc svg {
    color: var(--accent);
}

.is-on .sc1-loc {
    opacity: 1;
    transform: none;
    transition-delay: 1.5s;
}

/* 2 · Tasks and reports */
.sc2-tasks {
    left: 6%;
    top: 9%;
    width: 50%;
}

.sc2-row {
    display: flex;
    align-items: center;
    gap: 0.7em;
}

.sc2-report {
    --swap: 2s;

    right: 6%;
    bottom: 9%;
    width: 50%;
}

.sc2-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45em;
}

.sc2-photo {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 28%;
    border-radius: 0.5em;
    background: linear-gradient(135deg, #cfe0f7, #8fb0dc);
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 300ms var(--ease), transform var(--t) var(--spring);
}

.sc2-photo:nth-child(2) { background: linear-gradient(135deg, #d9e4d2, #9db58e); }
.sc2-photo:nth-child(3) { background: linear-gradient(135deg, #e9dccb, #c2a27c); }

.is-on .sc2-photo {
    opacity: 1;
    transform: none;
    transition-delay: var(--d, 0s);
}

/* 3 · Office view */
.sc3-map {
    left: 5%;
    top: 8%;
    width: 58%;
    height: 84%;
}

.sc3-pin {
    opacity: 0;
    transform: translateY(-1.5em) scale(0.6);
    transition: opacity 250ms var(--ease), transform var(--t) var(--spring);
}

.sc3-pin--ok {
    color: #16a34a;
}

.sc3-pin--off {
    color: #94a3b8;
}

.is-on .sc3-pin {
    opacity: 1;
    transform: none;
    transition-delay: var(--d, 0s);
}

.sc3-list {
    right: 5%;
    top: 14%;
    width: 34%;
}

.sc3-count {
    font: 650 1.3em/1 var(--display);
    color: #16a34a;
}

.sc3-row {
    display: flex;
    align-items: center;
    gap: 0.55em;
    opacity: 0;
    transform: translateX(1em);
    transition: opacity 350ms var(--ease), transform 350ms var(--ease);
}

.is-on .sc3-row {
    opacity: 1;
    transform: none;
    transition-delay: var(--d, 0s);
}

/* 4 · Hours become payroll */
.sc4-week {
    left: 5%;
    top: 9%;
    width: 54%;
    height: 82%;
}

.sc4-total {
    font: 650 0.95em/1 var(--display);
    color: var(--accent);
    opacity: 0;
    transition: opacity 400ms var(--ease);
}

.is-on .sc4-total {
    opacity: 1;
    transition-delay: 1.1s;
}

.sc4-bars {
    display: flex;
    flex: 1;
    align-items: stretch;
    gap: 0.7em;
    min-height: 0;
    padding-top: 0.4em;
}

.sc4-col {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4em;
}

.sc4-bar {
    position: relative;
    display: block;
    width: 100%;
    height: var(--h);
    overflow: hidden;
    border-radius: 0.4em 0.4em 0.2em 0.2em;
    background: linear-gradient(180deg, #3d8bff, var(--accent));
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 700ms var(--ease);
}

.sc4-over {
    position: absolute;
    inset: 0 0 auto;
    height: var(--o);
    background: repeating-linear-gradient(-45deg, #9cc2ff 0 0.3em, #b9d4ff 0.3em 0.6em);
}

.is-on .sc4-bar {
    transform: none;
    transition-delay: var(--d, 0s);
}

.sc4-pay {
    right: 5%;
    top: 22%;
    width: 36%;
}

.sc4-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transition: opacity 400ms var(--ease);
}

.sc4-line b {
    font: 650 0.85em/1 var(--display);
}

.sc4-ot {
    color: var(--accent);
}

.is-on .sc4-line {
    opacity: 1;
    transition-delay: var(--d, 0s);
}

.sc4-ready {
    align-self: flex-start;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 300ms var(--ease), transform var(--t) var(--spring);
}

.is-on .sc4-ready {
    opacity: 1;
    transform: none;
    transition-delay: 1.9s;
}

/* 5 · Offers and finance */
.sc5-offer {
    --swap: 1.3s;

    left: 6%;
    top: 10%;
    width: 44%;
}

.sc5-amount {
    display: block;
    width: 45%;
    height: 1.1em;
    margin-top: 0.3em;
    border-radius: 0.3em;
    background: linear-gradient(90deg, var(--accent), #3d8bff);
    opacity: 0.85;
}

.sc5-chart {
    right: 6%;
    bottom: 9%;
    width: 50%;
    height: 62%;
}

.sc5-legend {
    display: flex;
    gap: 0.9em;
    font-size: 0.68em;
    color: var(--ink-3);
}

.sc5-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

.sc5-legend i {
    width: 0.7em;
    height: 0.7em;
    border-radius: 0.2em;
}

.sc5-bars {
    display: flex;
    flex: 1;
    align-items: flex-end;
    gap: 0.6em;
    min-height: 0;
}

.sc5-pair {
    display: flex;
    flex: 1;
    align-items: flex-end;
    gap: 0.15em;
    height: 100%;
}

.sc5-pair span {
    flex: 1;
    height: var(--h);
    border-radius: 0.25em 0.25em 0.1em 0.1em;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 650ms var(--ease);
}

.sc5-in {
    background: var(--accent);
}

.sc5-out {
    background: #b9c7dc;
}

.is-on .sc5-pair span {
    transform: none;
    transition-delay: var(--d, 0s);
}

.wo-trial {
    margin-top: var(--section-y);
    padding-block: var(--section-y);
    background: var(--bg-2);
    overflow: clip;
    scroll-margin-top: 6rem;
}

.wo-trial__inner {
    display: grid;
    align-items: center;
    gap: var(--stack-lg);
}

.wo-trial__copy {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.wo .wo-trial h2 {
    margin: 0;
    font-size: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.wo-trial h2 span {
    display: block;
    color: var(--accent);
}

.wo-trial__lead {
    max-width: 32rem;
    margin: var(--stack-md) 0 var(--stack-lg);
    font-size: var(--fs-lead);
    line-height: 1.7;
    color: var(--ink-2);
}

.wo-trial__cta {
    min-height: 56px;
    gap: var(--stack-md);
    max-width: 100%;
    padding-block: 1rem;
    white-space: normal;
    text-align: left;
}

.wo-trial__cta svg {
    flex-shrink: 0;
    transition: transform var(--dur) var(--ease);
}

.wo-trial__cta:hover svg {
    transform: translateX(4px);
}

.wo-trial__note {
    margin: 1rem 0 0;
    font-size: var(--fs-small);
    color: var(--ink-2);
}

.wo-trial__visual {
    display: grid;
    place-items: center;
    padding: 1.5rem 0 1rem;
    min-width: 0;
}

.wo-trial__calendar {
    position: relative;
    width: min(100% - 1.5rem, 23rem);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: 0 24px 48px -24px rgba(7, 24, 56, 0.3);
    transform: rotate(4deg);
    isolation: isolate;
}

.wo-trial__calendar::before,
.wo-trial__calendar::after {
    content: "";
    position: absolute;
    top: -1rem;
    width: 0.75rem;
    height: 2rem;
    border: 3px solid var(--ink);
    border-radius: var(--r-sm);
    background: var(--bg-2);
}

.wo-trial__calendar::before {
    left: 2rem;
}

.wo-trial__calendar::after {
    right: 2rem;
}

.wo-trial__calendar-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 2rem 1.5rem 1.25rem;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--ink);
    color: var(--bg);
    font-size: 0.75rem;
    font-weight: 600;
}

.wo-trial__calendar-top > :first-child {
    font-family: var(--display);
    letter-spacing: 0.08em;
}

.wo-trial__calendar-body {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    color: var(--accent);
    font-family: var(--display);
}

.wo-trial__one {
    font-size: clamp(6rem, 20vw, 9rem);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.04em;
}

.wo-trial__month {
    font-size: 1.5rem;
    font-weight: 500;
}

.wo-trial__calendar-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-inline: 1.5rem;
    padding-block: 1.25rem;
    border-top: 1px dashed var(--line-strong);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--ink);
}

/* Phones: the offer text sits in the middle, above the calendar */
@media (max-width: 767px) {
    .wo-trial__copy {
        display: grid;
        justify-items: center;
        text-align: center;
    }

    .wo-trial__lead {
        margin-inline: auto;
    }
}

@media (min-width: 768px) {
    .wo-trial__inner {
        grid-template-columns: 1.2fr 1fr;
        gap: 3rem;
    }

    .wo-trial__visual {
        padding-block: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wo-trial__cta svg {
        transition: none;
    }
}

.wo-pricing__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
    justify-content: center;
    gap: 1.5rem;
    margin: 3rem 0 0;
    padding: 0;
    list-style: none;
}

.wo-pricing__cards:not([hidden]) {
    animation: wo-plans-in 400ms var(--ease);
}

@keyframes wo-plans-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.wo-plan {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 2rem 1.75rem 1.75rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(7, 24, 56, 0.04), 0 16px 36px -28px rgba(7, 24, 56, 0.25);
}

.wo-plan__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    padding: 0.3125rem 0.875rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), #3d8bff);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(31, 102, 229, 0.8);
    transform: translateX(-50%);
}

.wo .wo-plan__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.wo-plan__title::first-letter {
    text-transform: uppercase;
}

.wo-plan__staff {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--ink-2);
}

.wo-plan__trial {
    margin: 1.5rem 0 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent);
}

.wo-plan__features {
    display: grid;
    gap: 0.625rem;
    margin: 1.5rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
    font-size: 0.9375rem;
    color: var(--ink);
}

.wo-plan__features li {
    position: relative;
    padding-left: 1.625rem;
}

.wo-plan__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 1rem;
    height: 1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.8 6.2-6.4' fill='none' stroke='%231f66e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the buttons line up at the bottom of every card */
.wo-plan__cta {
    width: 100%;
    margin-top: auto;
}

.wo-plan > :nth-last-child(2) {
    margin-bottom: 1.75rem;
}

/* most popular: the dark card */
.wo-plan--pop {
    background: linear-gradient(165deg, #0e2656 0%, #081b3f 50%, #050f26 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 60px -30px rgba(4, 13, 34, 0.65);
}

.wo .wo-plan--pop .wo-plan__title,
.wo-plan--pop .wo-plan__trial {
    color: #fff;
}

.wo-plan--pop .wo-plan__staff {
    color: rgba(255, 255, 255, 0.6);
}

.wo-plan--pop .wo-plan__features {
    border-top-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.wo-plan--pop .wo-plan__features li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.8 6.2-6.4' fill='none' stroke='%238fb4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wo-plan--pop .wo-plan__cta {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 24px -6px rgba(31, 102, 229, 0.7);
}

.wo-pricing__more {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.75rem;
    width: fit-content;
    max-width: 100%;
    margin: 2.5rem auto 0;
    font-size: 0.9375rem;
    text-align: center;
    color: var(--ink-2);
}

.wo-pricing__more a {
    font-weight: 600;
    color: var(--accent);
}

/* Closing CTA — dark, with the hero's arc of light along its top edge */
.wo-main:has(> .wo-close:last-child) {
    padding-bottom: 0;
}

.wo-close {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: clamp(5rem, 3.5rem + 6vw, 10rem) clamp(3.5rem, 2.5rem + 5vw, 7rem);
    background: #040d22;
    color: #fff;
}

.wo-close::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 55% 75% at 50% 110%, rgba(31, 102, 229, 0.5), transparent 70%);
    /* fades out before the bottom edge, so it runs into the footer without a seam */
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.wo-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: max(1800px, 160vw);
    height: 9rem;
    border-radius: 50%;
    background: var(--bg-2);
    box-shadow: 0 1px 0 rgba(160, 195, 255, 0.85), 0 10px 60px -6px rgba(61, 139, 255, 0.8);
    transform: translate(-50%, -50%);
}

.wo-close__inner {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    text-align: center;
}

.wo-close .wo-label {
    margin: 0;
    color: #8fb4ff;
}

.wo-close h2 {
    margin: 0;
    color: #fff;
}

.wo-close__lead {
    margin: 0;
    max-width: 34rem;
    font-size: var(--fs-lead);
    color: rgba(255, 255, 255, 0.75);
}

.wo-close .wo-btn-primary {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 24px -6px rgba(31, 102, 229, 0.7);
}

.wo-close :focus-visible {
    outline-color: #8fb4ff;
}

@media (max-width: 759px) {
    .wo-close .wo-hero__actions {
        width: 100%;
    }

    .wo-close .wo-hero__actions .wo-btn {
        flex: 1 1 100%;
    }

    .wo-close::after {
        width: 260vw;
        height: 5rem;
    }
}

.wo-close--after-white::after {
    background: var(--bg);
}

/* ---------------------------------------------------------------
 * Inner pages — page head, module cards, product flow,
 * module screens and features
 * ------------------------------------------------------------- */
.wo-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Inner pages: one background for the whole page — white, with a soft blue light at the top that
 * runs behind the (transparent) header. No tinted bands, so sections never change colour. */
.wo.wo--inner {
    background:
        radial-gradient(1100px 640px at 88% -160px, rgba(31, 102, 229, 0.12), transparent 70%),
        radial-gradient(900px 520px at -5% -80px, rgba(31, 102, 229, 0.06), transparent 70%),
        var(--bg);
    background-repeat: no-repeat;
}

.wo--inner:not(.wo-nav-open) .wo-top:not(.is-scrolled) {
    background: transparent;
}

/* Page head */
.wo-phead {
    --lift: 0px;

    position: relative;
    /* no band to close, so little room below: the next section brings its own */
    padding-block: clamp(3rem, 2rem + 4vw, 6rem) calc(clamp(1rem, 0.5rem + 1.5vw, 2rem) + var(--lift));
}

.wo-phead h1 {
    margin: 0;
    font-size: clamp(2.25rem, 1.45rem + 3.4vw, 3.875rem);
    font-weight: 650;
    line-height: 1.04;
    letter-spacing: -0.04em;
    overflow-wrap: break-word;
}

.wo-phead .wo-cta-row {
    margin-top: 2rem;
}

.wo-phead__lead {
    margin: 1.25rem 0 0;
    max-width: 34rem;
    font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    line-height: 1.55;
    color: var(--ink);
}

.wo-phead__explain {
    margin: 1rem 0 0;
    max-width: 34rem;
    color: var(--ink-2);
}

.wo-phead__grid {
    display: grid;
    gap: 2rem;
}

.wo-phead--split .wo-phead__grid {
    gap: 2.5rem;
}

.wo-phead__copy,
.wo-phead__art,
.wo-phead__side {
    min-width: 0;
}

.wo-phead__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.75rem;
}

a.wo-textlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(31, 102, 229, 0.35);
    text-underline-offset: 0.35em;
    transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

a.wo-textlink:hover {
    text-decoration-color: currentColor;
}

a.wo-textlink--quiet {
    color: var(--ink);
    text-decoration-color: var(--line-strong);
}

@media (min-width: 960px) {
    .wo-phead--split .wo-phead__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        align-items: center;
        gap: 4rem;
    }

    .wo-phead__grid--module {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: end;
        gap: 4rem;
    }

    .wo-phead__grid--module .wo-phead__explain {
        margin-top: 0;
    }
}

/* Section head: heading on the left, lead on the right */
.wo-splithead {
    display: grid;
    gap: 1rem;
    margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.wo-splithead h2,
.wo-section .wo-splithead h2 {
    max-width: 18ch;
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.wo-splithead .wo-lead {
    margin: 0;
}

@media (min-width: 900px) {
    .wo-splithead {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 4rem;
        align-items: end;
    }
}

/* Cards — one design for every card grid (modules, features, "who it's for"): dark navy from the logo,
 * white type, glass icon tile. A module card's title is the link and covers the whole card. */
.wo-cards {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .wo-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* an odd last card spans the row instead of leaving a hole */
    .wo-cards:not(.wo-cards--two) > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 960px) {
    .wo-cards:not(.wo-cards--two) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .wo-cards:not(.wo-cards--two) > :last-child:nth-child(odd) {
        grid-column: auto;
    }
}

.wo-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 1.75rem;
    overflow: hidden;
    background: linear-gradient(165deg, #0e2656 0%, #081b3f 50%, #050f26 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 22px 44px -26px rgba(4, 13, 34, 0.6);
    color: rgba(255, 255, 255, 0.72);
}

.wo-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

/* glass tile; fills with the brand blue on hover */
.wo-card__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    color: #8fb4ff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background-color 350ms var(--ease), color 350ms var(--ease), box-shadow 350ms var(--ease);
}

.wo-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.wo-card__icon--num {
    margin-bottom: 0.75rem;
    font: 600 0.875rem/1 var(--display);
    font-variant-numeric: tabular-nums;
}

.wo-card:hover .wo-card__icon {
    background: var(--accent);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 10px 24px -10px rgba(61, 139, 255, 0.9);
}

.wo-card__num {
    font: 500 0.8125rem/1 var(--display);
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.4);
}

.wo .wo-card__title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #fff;
}

.wo li.wo-card .wo-card__title {
    font-size: 1.1875rem;
    font-weight: 600;
}

.wo-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.wo-card__title a:focus-visible {
    outline: none;
}

.wo-card:has(a:focus-visible) {
    outline: 2px solid #8fb4ff;
    outline-offset: 3px;
}

.wo-card__text {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}

.wo-card__list {
    display: grid;
    gap: 0.5rem;
    margin: 0.25rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    list-style: none;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.9);
}

.wo-card__list li {
    position: relative;
    padding-left: 1.5rem;
}

.wo-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 1rem;
    height: 1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.8 6.2-6.4' fill='none' stroke='%238fb4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wo-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #8fb4ff;
    transition: color var(--dur) var(--ease);
}

.wo-card__more svg {
    width: 1rem;
    height: 1rem;
    transition: transform 300ms var(--ease);
}

.wo-card:hover .wo-card__more {
    color: #fff;
}

.wo-card:hover .wo-card__more svg {
    transform: translateX(4px);
}

/* Product: the example flow — a process diagram. Three arrows hand on to each other, light to dark
 * (CRM → ERP → HR); the text sits under each arrow. On phones the arrows point down. */
.wo-flowsec {
    padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.wo-chain {
    --tip: 28px;

    display: grid;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wo-chain__step {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wo-chain__arrow {
    --c1: #e9f1fe;
    --c2: #d5e3fc;
    --fg: var(--ink);
    --tile: #fff;
    --ic: var(--accent);

    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 84px;
    padding: 1rem 1.5rem calc(1rem + 14px);
    background: linear-gradient(120deg, var(--c1), var(--c2));
    color: var(--fg);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px));
}

.wo-chain__step:nth-child(2) .wo-chain__arrow {
    --c1: #3b7ff0;
    --c2: var(--accent);
    --fg: #fff;
    --tile: rgba(255, 255, 255, 0.16);
    --ic: #fff;
}

.wo-chain__step:nth-child(3) .wo-chain__arrow {
    --c1: #10295c;
    --c2: var(--ink);
    --fg: #fff;
    --tile: rgba(255, 255, 255, 0.1);
    --ic: #8fb4ff;
}

.wo-chain__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: var(--tile);
    color: var(--ic);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.wo-chain__icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.wo-chain__mod {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    font: 600 1.125rem/1.2 var(--display);
    letter-spacing: -0.01em;
}

.wo-chain__mod small {
    font: 600 0.75rem/1 var(--font);
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.wo-chain__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 0.25rem 0;
}

.wo-chain h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.wo-chain p {
    margin: 0;
    color: var(--ink-2);
}

/* what the step hands on to the next module */
.wo-chain .wo-chain__out {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: auto;
    padding-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}

.wo-chain__out::before {
    content: "";
    flex: none;
    width: 1.25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

/* the arrows slide in one after another once the diagram is on screen (JS adds .is-inview) */
@media (scripting: enabled) {
    .wo-chain .wo-chain__step {
        transition: opacity 600ms var(--ease), transform 600ms var(--ease);
    }

    .wo-chain:not(.is-inview) .wo-chain__step {
        opacity: 0;
        transform: translateX(-16px);
    }

    .wo-chain .wo-chain__step:nth-child(2) {
        transition-delay: 0.25s;
    }

    .wo-chain .wo-chain__step:nth-child(3) {
        transition-delay: 0.5s;
    }
}

@media (min-width: 900px) {
    .wo-chain {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    .wo-chain__arrow {
        min-height: 88px;
        padding: 1rem calc(var(--tip) + 1rem) 1rem 1.5rem;
        clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
    }

    /* each arrow's point runs into the next one's notch */
    .wo-chain__step:not(:last-child) .wo-chain__arrow {
        margin-right: -18px;
    }

    .wo-chain__step:not(:first-child) .wo-chain__arrow {
        padding-left: calc(var(--tip) + 1.25rem);
        clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%, var(--tip) 50%);
    }

    .wo-chain__body {
        padding: 1.5rem 2.5rem 0 1.5rem;
    }

    .wo-chain__step:not(:first-child) .wo-chain__body {
        padding-left: calc(var(--tip) + 1.25rem);
    }
}

/* Module: real screens — the list of views beside the open screen, on a panel over the page head */
.wo-phead--lift {
    --lift: clamp(3rem, 2rem + 4vw, 6rem);
}

.wo-shots {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
    margin-top: calc(-1 * clamp(3rem, 2rem + 4vw, 6rem));
    padding: 1rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(7, 24, 56, 0.04), 0 24px 60px -36px rgba(7, 24, 56, 0.35);
    scroll-margin-top: calc(var(--top-h) + 1rem);
}

/* phones: a scrolling row of text tabs, the open one underlined */
.wo-shots__tabs {
    display: flex;
    gap: 1.25rem;
    min-width: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.wo-shots__tabs::-webkit-scrollbar {
    display: none;
}

.wo-shots__tab {
    flex: none;
    display: grid;
    gap: 0.25rem;
    margin-bottom: -1px;
    padding: 0.5rem 0 0.75rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: 600 0.9375rem/1.3 var(--font);
    color: var(--ink-3);
    text-align: left;
    cursor: pointer;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.wo-shots__tab:hover {
    color: var(--ink);
}

.wo-shots__tab[aria-selected="true"] {
    border-bottom-color: var(--ink);
    color: var(--ink);
}

.wo-shots__caption {
    display: none;
}

.wo-shots__frame {
    min-width: 0;
}

.wo-shots__panel {
    margin: 0;
}

.wo-shots.is-ready .wo-shots__panel:not([hidden]) {
    animation: wo-shot-in 320ms var(--ease);
}

@keyframes wo-shot-in {
    from {
        opacity: 0;
    }
}

.wo-shots__zoom {
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-2);
    cursor: zoom-in;
}

.wo-shots .wo-shots__zoom img {
    width: 100%;
    height: auto;
}

.wo-shots__panel figcaption {
    padding: 0.875rem 0.25rem 0;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--ink-2);
}

.wo-shots__panel figcaption strong {
    font-weight: 600;
    color: var(--ink);
}

.wo-shots__hint {
    margin: 0;
    padding: 0.75rem 0.25rem 0;
    font-size: 0.8125rem;
    color: var(--ink-3);
}

@media (min-width: 960px) {
    .wo-shots {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 2.5rem;
        padding: 1.25rem 1.25rem 1.25rem 2rem;
    }

    /* desktop: a quiet list; the open view is set in ink with its caption under it */
    .wo-shots__tabs {
        flex-direction: column;
        gap: 0;
        padding-top: 0.75rem;
        overflow: visible;
        border: 0;
    }

    .wo-shots__tab {
        margin: 0;
        padding: 0.75rem 0;
        border: 0;
        font-size: 1rem;
    }

    .wo-shots__tab[aria-selected="true"] .wo-shots__caption {
        display: block;
        max-width: 15rem;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--ink-2);
    }

    /* the open view already shows the caption */
    .wo-shots.is-ready .wo-shots__panel figcaption {
        display: none;
    }
}

.wo-more {
    padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem);
}

/* Product head illustration: shared data feeding the three modules (partials/product-map) */
.scm-links {
    position: absolute;
    inset: 0;
}

.scm-link {
    fill: none;
    stroke: rgba(143, 180, 255, 0.4);
    stroke-width: 0.5;
    stroke-dasharray: 1.4 1.6;
}

.scm-pulse {
    fill: none;
    stroke: #a9c6ff;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: 14 200;
    stroke-dashoffset: -103;
    filter: drop-shadow(0 0 1.5px #3d8bff);
    animation: scm-pulse 3.3s linear infinite;
    animation-delay: var(--d, 0s);
}

@keyframes scm-pulse {
    0% {
        stroke-dashoffset: 16;
    }

    40%,
    100% {
        stroke-dashoffset: -103;
    }
}

.scm-core {
    position: absolute;
    left: 24.4%;
    top: 47.3%;
    display: grid;
    place-items: center;
    width: 20%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 0 0.5em rgba(61, 139, 255, 0.16),
        0 0 3.5em rgba(61, 139, 255, 0.55),
        0 1.4em 3em -1.2em rgba(2, 8, 24, 0.7);
    transform: translate(-50%, -50%);
}

.scm-core__mark {
    width: 54%;
    aspect-ratio: 400 / 275;
    background: url("../images/marketing/workom_logo_dark.png") left center / auto 100% no-repeat;
}

.scm-core__ring {
    position: absolute;
    inset: -22%;
    border: 1px solid rgba(143, 180, 255, 0.5);
    border-radius: 50%;
    opacity: 0;
    animation: scm-ring 3.3s var(--ease) infinite;
}

@keyframes scm-ring {
    0% {
        opacity: 0.9;
        transform: scale(0.8);
    }

    60%,
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

.sc-chip.scm-core__label {
    position: absolute;
    left: 24.4%;
    top: 68%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #cfe0ff;
    transform: translateX(-50%);
}

.sc-card.scm-card {
    left: 55%;
    width: 40%;
    height: 25.45%;
    justify-content: center;
    gap: 0.6em;
    padding: 0.8em 1em;
}

.scm-card__head {
    display: flex;
    align-items: center;
    gap: 0.6em;
    min-width: 0;
}

.scm-card__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.9em;
    height: 1.9em;
    border-radius: 0.5em;
    background: var(--accent-soft);
    color: var(--accent);
}

.sc .scm-card__icon svg {
    width: 1.15em;
    height: 1.15em;
}

.scm-card__chips {
    display: flex;
    gap: 0.4em;
    overflow: hidden;
}


/* ---------------------------------------------------------------
 * FAQ and contact — no hero band: the title (and a side note) sits
 * beside the page's content. Phones: title, content, side note.
 * ------------------------------------------------------------- */
.wo-pagesplit {
    display: grid;
    grid-template-areas:
        "intro"
        "main"
        "side";
    gap: 2.5rem;
    padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(3rem, 2rem + 3vw, 4.5rem);
}

.wo-pagesplit__intro {
    grid-area: intro;
    min-width: 0;
}

.wo-pagesplit__main {
    grid-area: main;
}

.wo-pagesplit__side {
    grid-area: side;
}

.wo-pagesplit__intro h1 {
    max-width: 16ch;
    margin: 0;
    font-size: clamp(2rem, 1.5rem + 2vw, 2.875rem);
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.035em;
    overflow-wrap: break-word;
}

.wo-pagesplit__intro p {
    max-width: 30rem;
    margin: 1rem 0 0;
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--ink-2);
}

@media (min-width: 960px) {
    .wo-pagesplit {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "intro main"
            "side  main";
        column-gap: 5rem;
        align-items: start;
    }

    .wo-pagesplit__side {
        position: sticky;
        top: calc(var(--top-h) + 2rem);
    }
}

/* FAQ — questions in a ruled list */

.wo-faq {
    min-width: 0;
    border-top: 1px solid var(--line-strong);
}

.wo-faq-item {
    border-bottom: 1px solid var(--line-strong);
}

.wo-faq-item summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 0;
    cursor: pointer;
    list-style: none;
}

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

.wo-faq-q {
    font: 600 clamp(1.0625rem, 1rem + 0.4vw, 1.25rem)/1.4 var(--display);
    letter-spacing: -0.015em;
    color: var(--ink);
    transition: color var(--dur) var(--ease);
}

.wo-faq-item summary:hover .wo-faq-q {
    color: var(--accent);
}

/* plus that turns into a minus */
.wo-faq-icon {
    position: relative;
    flex: none;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
}

.wo-faq-icon::before,
.wo-faq-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.75rem;
    height: 1.5px;
    border-radius: 1px;
    background: var(--ink);
    transform: translate(-50%, -50%);
    transition: transform 300ms var(--ease), background-color 300ms var(--ease);
}

.wo-faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.wo-faq-item[open]:not(.wo-faq-ready) .wo-faq-icon,
.wo-faq-item.is-open .wo-faq-icon {
    background: var(--ink);
    border-color: var(--ink);
}

.wo-faq-item[open]:not(.wo-faq-ready) .wo-faq-icon::before,
.wo-faq-item[open]:not(.wo-faq-ready) .wo-faq-icon::after,
.wo-faq-item.is-open .wo-faq-icon::before,
.wo-faq-item.is-open .wo-faq-icon::after {
    background: #fff;
}

.wo-faq-item[open]:not(.wo-faq-ready) .wo-faq-icon::after,
.wo-faq-item.is-open .wo-faq-icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

/* the layout script opens and closes the panel (.wo-faq-ready / .is-open) */
.wo-faq-panel {
    display: grid;
    grid-template-rows: 1fr;
}

.wo-faq-ready .wo-faq-panel {
    grid-template-rows: 0fr;
    transition: grid-template-rows 350ms var(--ease);
}

.wo-faq-ready.is-open .wo-faq-panel {
    grid-template-rows: 1fr;
}

.wo-faq-panel-inner {
    min-height: 0;
    overflow: hidden;
}

.wo-faq-panel-inner p {
    max-width: 44rem;
    margin: 0;
    padding: 0 3.5rem 1.75rem 0;
    color: var(--ink-2);
}

.wo-faq-more {
    padding: 1.75rem;
    background: var(--bg-2);
    border-radius: 16px;
}

.wo-faq-more h2 {
    max-width: none;
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.wo-faq-more p {
    margin: 0;
    color: var(--ink-2);
}

.wo-faq-more a.wo-textlink {
    display: flex;
    width: fit-content;
    margin-top: 0.875rem;
}

@media (max-width: 639px) {
    .wo-faq-panel-inner p {
        padding-right: 0;
    }
}

/* Contact — the form, with the direct channels under the title */
.wo-form h2,
.wo-channels h2 {
    max-width: none;
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.wo-form {
    min-width: 0;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(7, 24, 56, 0.04), 0 24px 60px -40px rgba(7, 24, 56, 0.35);
    scroll-margin-top: calc(var(--top-h) + 1rem);
}

.wo-form__note {
    margin: 0 0 1.5rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
}

.wo-form__note--ok {
    background: #e7f8ef;
    color: #0b6b42;
}

.wo-form__note--err {
    background: #fdeeee;
    color: #a32020;
}

.wo-form__intent {
    min-width: 0;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

.wo-form__intent legend,
.wo-field label {
    display: block;
    margin-bottom: 0.5rem;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}

/* reason for writing: a segmented control made of radios */
.wo-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.25rem;
    background: var(--bg-2);
    border-radius: 12px;
}

.wo-seg label {
    position: relative;
    cursor: pointer;
}

.wo-seg input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.wo-seg span {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 9px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink-2);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.wo-seg label:hover span {
    color: var(--ink);
}

.wo-seg input:checked + span {
    background: var(--bg);
    color: var(--ink);
    box-shadow: var(--shadow-1);
}

.wo-seg input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.wo-form__grid {
    display: grid;
    gap: 1.25rem;
}

.wo-field {
    min-width: 0;
}

.wo-field__opt {
    margin-left: 0.375rem;
    font-weight: 400;
    color: var(--ink-3);
}

.wo-field input,
.wo-field textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--bg);
    font: 400 1rem/1.5 var(--font);
    color: var(--ink);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.wo-field textarea {
    min-height: 9rem;
    resize: vertical;
}

.wo-field input::placeholder,
.wo-field textarea::placeholder {
    color: var(--ink-3);
}

.wo-field input:hover,
.wo-field textarea:hover {
    border-color: var(--ink-3);
}

.wo-field input:focus,
.wo-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(31, 102, 229, 0.18);
}

.wo-field.is-invalid input,
.wo-field.is-invalid textarea {
    border-color: #d43c3c;
}

.wo-field.is-invalid input:focus,
.wo-field.is-invalid textarea:focus {
    box-shadow: 0 0 0 3px rgba(212, 60, 60, 0.18);
}

.wo-field__err {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    color: #b42323;
}

.wo-form__trap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.wo-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.75rem;
}

.wo-form__foot p {
    flex: 1 1 16rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.wo-form__foot a {
    color: var(--ink-2);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.wo-channels {
    min-width: 0;
}

.wo-channels > p {
    margin: 0 0 1.5rem;
    color: var(--ink-2);
}

.wo-channels__list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wo-channel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.125rem;
    overflow: hidden;
    /* same dark surface as the cards */
    background: linear-gradient(165deg, #0e2656 0%, #081b3f 50%, #050f26 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 36px -24px rgba(4, 13, 34, 0.6);
}

.wo-channel__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    color: #8fb4ff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background-color 350ms var(--ease), color 350ms var(--ease);
}

.wo-channel:hover .wo-channel__icon {
    background: var(--accent);
    color: #fff;
}

.wo-channel__icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.wo-channel__text {
    display: grid;
    flex: 1;
    min-width: 0;
}

.wo-channel__text small {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
}

.wo-channel__text strong {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    overflow-wrap: anywhere;
}

.wo-channel__go {
    color: #8fb4ff;
    transition: color var(--dur) var(--ease), transform 300ms var(--ease);
}

.wo-channel:hover .wo-channel__go {
    color: #fff;
    transform: translate(2px, -2px);
}

.wo-channels__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1.75rem;
    font-size: 0.9375rem;
    color: var(--ink-3);
}

@media (min-width: 640px) {
    .wo-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wo-field--wide {
        grid-column: 1 / -1;
    }
}

/* ---------------------------------------------------------------
 * Card hover — one motion for every card on the site.
 * A soft blue light sits in the card's top corner; under the pointer
 * it follows the cursor (the layout script sets --mx / --my) and the
 * card's edge lights up where the cursor is, while the card rises a
 * little. When the pointer leaves, the light glides back to its corner.
 * Pointer devices only, so a tap never leaves a card raised.
 * ------------------------------------------------------------- */
@property --mx {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 85%;
}

@property --my {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0%;
}

@property --spot {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.wo {
    --card-rise: translateY(-4px);
    --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 4px rgba(7, 24, 56, 0.04), 0 26px 50px -26px rgba(7, 24, 56, 0.36);
    --card-t: 350ms var(--ease);
}

.wo-card,
.wo-plan,
.wo-channel {
    --mx: 85%;
    --my: 0%;
    --spot: 0;
    --glow-rest: 0;

    position: relative;
    isolation: isolate;
    transition:
        transform var(--card-t),
        box-shadow var(--card-t),
        border-color var(--card-t),
        opacity var(--card-t),
        --mx 220ms var(--ease),
        --my 220ms var(--ease),
        --spot 400ms var(--ease);
}

/* module and feature cards keep a little light in the corner at rest */
.wo-card {
    --glow-rest: 1;
}

/* the light */
.wo-card::before,
.wo-plan::before,
.wo-channel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(280px circle at var(--mx) var(--my), rgba(61, 139, 255, calc(0.34 * max(var(--spot), var(--glow-rest) * 0.6))) 0%, rgba(61, 139, 255, calc(0.1 * max(var(--spot), var(--glow-rest) * 0.6))) 45%, transparent 70%);
    pointer-events: none;
}

/* the edge, lit only near the cursor */
.wo-card::after,
.wo-plan::after,
.wo-channel::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: radial-gradient(240px circle at var(--mx) var(--my), rgba(31, 102, 229, var(--spot)), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

@media (hover: hover) {
    .wo-card:hover,
    .wo-plan:hover,
    .wo-channel:hover {
        --spot: 1;

        transform: var(--card-rise);
    }

    .wo-card:hover,
    .wo-plan:hover,
    .wo-channel:hover {
        border-color: rgba(31, 102, 229, 0.18);
        box-shadow: var(--card-shadow);
    }
}

/* on the dark cards the light is brighter and the lit edge is pale blue */
.wo-card::before,
.wo-channel::before,
.wo-plan--pop::before {
    background: radial-gradient(280px circle at var(--mx) var(--my), rgba(61, 139, 255, calc(0.45 * max(var(--spot), var(--glow-rest) * 0.6))) 0%, rgba(61, 139, 255, calc(0.12 * max(var(--spot), var(--glow-rest) * 0.6))) 45%, transparent 70%);
}

.wo-card::after,
.wo-channel::after,
.wo-plan--pop::after {
    background: radial-gradient(240px circle at var(--mx) var(--my), rgba(143, 180, 255, var(--spot)), transparent 70%);
}

@media (hover: hover) {
    .wo-card:hover,
    .wo-channel:hover,
    .wo-plan--pop:hover {
        border-color: rgba(143, 180, 255, 0.25);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 30px 56px -26px rgba(4, 13, 34, 0.7);
    }
}

/* ---------------------------------------------------------------
 * Footer — night blue like the closing CTA, so the two read as one
 * dark block; a faint light rises from the bottom corner.
 * ------------------------------------------------------------- */
.wo-foot {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem) 2rem;
    background: #040d22;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.6);
}

.wo-foot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 50% 70% at 100% 110%, rgba(31, 102, 229, 0.22), transparent 70%);
}

.wo-foot a {
    color: rgba(255, 255, 255, 0.72);
    transition: color var(--dur) var(--ease);
}

.wo-foot a:hover {
    color: #fff;
}

.wo-foot :focus-visible {
    outline-color: #8fb4ff;
}

.wo-foot__top {
    display: grid;
    gap: 3rem;
    padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wo-foot__logo {
    display: inline-block;
}

.wo-foot .wo-foot__logo img {
    width: auto;
    height: 40px;
}

.wo-foot__brand p {
    max-width: 22rem;
    margin: 1.25rem 0 0;
    line-height: 1.6;
}

.wo-foot__contact {
    display: grid;
    justify-items: start;
    gap: 0.375rem;
    margin-top: 1.5rem;
}

.wo-foot .wo-foot__contact a {
    font-weight: 600;
    color: #fff;
}

.wo-foot .wo-foot__contact a:hover {
    color: #8fb4ff;
}

.wo-foot__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
}

.wo-foot h2 {
    margin: 0 0 1.125rem;
    font: 600 0.75rem/1.2 var(--font);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

/* the link lists (not the social icons) */
.wo-foot__cols ul {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wo-foot__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    padding-top: 1.75rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
}

.wo-foot__bottom p {
    margin: 0 auto 0 0;
}

/* Social profiles as round icon buttons (partials/social) */
.wo-social {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wo-social a {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.wo-social a:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
}

.wo-social svg {
    width: 1.125rem;
    height: 1.125rem;
}

.wo-foot .wo-social--dark a {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.wo-foot .wo-social--dark a:hover {
    background: var(--accent);
    color: #fff;
}

.wo-foot__lang {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.wo-foot .wo-foot__lang a {
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
}

.wo-foot .wo-foot__lang a.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

@media (min-width: 640px) {
    .wo-foot__cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .wo-foot__top {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 4rem;
    }
}

@media (max-width: 639px) {
    .wo-foot__bottom p {
        flex-basis: 100%;
    }
}

/* ---------------------------------------------------------------
 * Legal pages (privacy policy)
 * ------------------------------------------------------------- */
.wo-main:has(> .wo-legal) {
    padding-bottom: 0;
}

.wo-legal__head {
    padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(1rem, 0.5rem + 1vw, 1.5rem);
}

/* long single words (e.g. "Datenschutzerklärung") must break on phones */
.wo-legal h1,
.wo-legal h2 {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.wo-legal__head h1 {
    margin: 0;
    font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.wo-legal__updated {
    margin: 0.75rem 0 0;
    font-size: var(--fs-small);
    color: var(--ink-3);
}

.wo-legal__intro {
    max-width: 46rem;
    margin: 1.25rem 0 0;
    font-size: var(--fs-lead);
    color: var(--ink-2);
}

.wo-legal__body {
    display: grid;
    gap: 2.5rem;
    padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(4rem, 3rem + 4vw, 6.5rem);
}

.wo-legal__toc {
    padding: 1.25rem 1.5rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.wo-legal__toc > p {
    margin: 0 0 0.75rem;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.wo-legal__toc ol {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    color: var(--ink-3);
}

.wo-legal__toc a {
    color: var(--ink-2);
}

.wo-legal__toc a:hover {
    color: var(--accent);
}

.wo-legal__content {
    max-width: 46rem;
    min-width: 0;
}

.wo-legal__content section {
    scroll-margin-top: calc(var(--top-h) + 1.5rem);
}

.wo-legal__content section + section {
    margin-top: 2.75rem;
    padding-top: 2.75rem;
    border-top: 1px solid var(--line);
}

.wo-legal__content h2 {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0 0 1rem;
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.wo-legal__content h2 span {
    font: 600 0.8125rem/1 var(--display);
    color: var(--accent);
}

.wo-legal__content h3 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.wo-legal__content p,
.wo-legal__content li {
    line-height: 1.7;
    color: var(--ink-2);
}

.wo-legal__content p {
    margin: 0 0 1rem;
}

.wo-legal__content ul {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.wo-legal__content li {
    position: relative;
    padding-left: 1.25rem;
}

.wo-legal__content li::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.72em;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--accent);
}

.wo-legal__content a:not(.wo-btn) {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.wo-legal__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding: 1.5rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.wo-legal__contact p {
    margin: 0;
    font: 600 1.0625rem/1.3 var(--display);
    color: var(--ink);
}

@media (min-width: 960px) {
    .wo-legal__body {
        grid-template-columns: 240px minmax(0, 46rem);
        gap: 4.5rem;
        align-items: start;
    }

    .wo-legal__toc {
        position: sticky;
        top: calc(var(--top-h) + 2rem);
        padding: 0;
        background: none;
        border: 0;
    }
}

/* ---------------------------------------------------------------
 * 8. Section rhythm
 * ------------------------------------------------------------- */
.wo-section,
.wo-section + .wo-section {
    padding-top: var(--section-y);
}

/* ---------------------------------------------------------------
 * Phones — tighter cards and spacing; card rows (modules, prices)
 * become a sideways swipe so the page doesn't turn into a long
 * stack of tall cards. The next card peeks in from the edge.
 * ------------------------------------------------------------- */
@media (max-width: 639px) {
    .wo-cards--swipe,
    .wo-pricing__cards {
        display: flex;
        gap: 0.875rem;
        margin-inline: calc(-1 * var(--gutter));
        padding: 0.25rem var(--gutter) 1.5rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .wo-cards--swipe::-webkit-scrollbar,
    .wo-pricing__cards::-webkit-scrollbar {
        display: none;
    }

    .wo-cards--swipe > *,
    .wo-pricing__cards > * {
        flex: 0 0 84%;
        scroll-snap-align: start;
    }

    /* prices open on the middle card, with the others peeking in on both sides */
    .wo-pricing__cards > * {
        flex-basis: 80%;
        scroll-snap-align: center;
    }

    /* room for the "most popular" badge above the cards */
    .wo-pricing__cards {
        margin-top: 2rem;
        padding-top: 1rem;
    }

    .wo-card {
        gap: 0.625rem;
        padding: 1.375rem;
        border-radius: 18px;
    }

    .wo-card__top {
        margin-bottom: 0.25rem;
    }

    .wo-card__icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 12px;
    }

    .wo-card__icon svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .wo .wo-card__title {
        font-size: 1.25rem;
    }

    .wo-card__text {
        font-size: 0.9375rem;
    }

    .wo-card__list {
        padding-top: 0.875rem;
        font-size: 0.875rem;
    }

    /* features: a compact row, the number beside the text */
    .wo-cards:not(.wo-cards--swipe) {
        gap: 0.75rem;
    }

    li.wo-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 0.375rem 1rem;
        padding: 1.125rem 1.25rem;
    }

    li.wo-card .wo-card__icon--num {
        grid-row: span 2;
        width: 2.25rem;
        height: 2.25rem;
        margin: 0;
        font-size: 0.8125rem;
    }

    .wo li.wo-card .wo-card__title {
        align-self: center;
        font-size: 1.0625rem;
    }

    .wo-plan {
        padding: 1.75rem 1.375rem 1.375rem;
    }

    .wo-plan > :nth-last-child(2) {
        margin-bottom: 1.375rem;
    }

    .wo-trust {
        gap: 1.75rem;
    }

    .wo-foot .wo-foot__logo img {
        height: 32px;
    }

    .wo-foot__top {
        gap: 2.25rem;
    }
}

/* ---------------------------------------------------------------
 * 9. Scroll reveal — JS marks the blocks of each section with .wo-reveal (staggered by
 *    --reveal-delay) and adds .is-inview when they scroll in; both come off once shown
 * ------------------------------------------------------------- */
.wo .wo-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.7s var(--ease) var(--reveal-delay, 0ms),
        transform 0.7s var(--ease) var(--reveal-delay, 0ms);
}

.wo .wo-reveal.is-inview {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------
 * 10. Motion preferences
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wo *,
    .wo *::before,
    .wo *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}