/*
 * getwinco operational design v1
 *
 * Calm, instrument-like finish shared by marketing, customer and admin
 * surfaces. Cobalt means action; teal, amber and red are reserved for status.
 */

:where(
    .winco-public-landing,
    .getwinco-v4,
    .winco-admin-dashboard,
    .winco-admin-clients,
    .winco-billing-root
) {
    --gw-ink: #142033;
    --gw-ink-soft: #29384e;
    --gw-muted: #667489;
    --gw-subtle: #8995a6;
    --gw-canvas: #f5f7fa;
    --gw-surface: #ffffff;
    --gw-surface-soft: #f9fafc;
    --gw-line: #dce3ec;
    --gw-line-strong: #c8d2df;
    --gw-cobalt: #3157e8;
    --gw-cobalt-deep: #2342bd;
    --gw-cobalt-soft: #edf1ff;
    --gw-teal: #087f73;
    --gw-teal-soft: #e7f6f2;
    --gw-amber: #a86108;
    --gw-amber-soft: #fff5df;
    --gw-danger: #b73a46;
    --gw-danger-soft: #fff0f1;
    --gw-radius-sm: 9px;
    --gw-radius-md: 14px;
    --gw-radius-lg: 20px;
    --gw-shadow-raised: 0 18px 48px rgba(20, 32, 51, .09);
    color: var(--gw-ink);
    font-family: Inter, Aptos, "Segoe UI", system-ui, sans-serif;
    text-rendering: optimizeLegibility;
}

:where(
    .winco-public-landing,
    .getwinco-v4,
    .winco-admin-dashboard,
    .winco-admin-clients,
    .winco-billing-root
) :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(49, 87, 232, .28) !important;
    outline-offset: 3px;
}

/* Public story: confident product, not an oversized AI campaign. */
.winco-public-landing .ds-getwinco-hero {
    min-height: auto;
    padding-block: clamp(5.5rem, 10vw, 8.5rem) clamp(4.5rem, 8vw, 7rem);
    background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
}

.winco-public-landing .ds-getwinco-hero-grid {
    grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
    gap: clamp(3rem, 7vw, 7rem);
}

.winco-public-landing .ds-hero-title {
    max-width: 12ch;
    font-size: clamp(2.85rem, 4.8vw, 5.15rem) !important;
    line-height: .98;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.winco-public-landing .ds-hero-subtitle {
    max-width: 58ch;
    color: var(--gw-muted);
    font-size: clamp(1rem, 1.2vw, 1.16rem);
    line-height: 1.7;
}

.winco-public-landing .ds-mockup {
    border-color: var(--gw-line);
    border-radius: var(--gw-radius-lg);
    box-shadow: var(--gw-shadow-raised);
    transform: none;
}

.winco-public-landing .ds-mockup:hover {
    transform: translateY(-3px);
}

.winco-public-landing :where(.ds-card, .ds-solution-card, .ds-process-card) {
    border-color: var(--gw-line);
    border-radius: var(--gw-radius-md);
    box-shadow: none;
}

.winco-public-landing :where(.ds-section-title, .ds-heading-2, .ds-heading-3) {
    color: var(--gw-ink);
    letter-spacing: -.035em;
    text-wrap: balance;
}

.winco-public-landing .ds-btn-primary {
    background: var(--gw-cobalt);
    border-color: var(--gw-cobalt);
    box-shadow: 0 8px 22px rgba(49, 87, 232, .18);
}

.winco-public-landing .ds-btn-primary:hover {
    background: var(--gw-cobalt-deep);
    border-color: var(--gw-cobalt-deep);
}

/* Active institutional landing: editorial copy + an honest product frame. */
body.gw-home-product {
    --gh-blue: var(--gw-cobalt);
    --gh-blue-strong: var(--gw-cobalt-deep);
    --gh-blue-deep: #1a337f;
    --gh-cyan: #147c91;
    --gh-ink: var(--gw-ink);
    --gh-text: #55657a;
    --gh-line: var(--gw-line);
    --gh-soft: var(--gw-canvas);
    --gh-green: var(--gw-teal);
    background: var(--gw-surface);
}

body.gw-home-product .gh-hero {
    padding-block: clamp(76px, 7vw, 108px) clamp(64px, 6vw, 88px);
    background: linear-gradient(180deg, #fff 0%, var(--gw-canvas) 100%);
}

body.gw-home-product .gh-hero__grid {
    grid-template-columns: minmax(340px, .82fr) minmax(560px, 1.18fr);
    gap: clamp(56px, 7vw, 104px);
}

body.gw-home-product .gh-hero__copy h1 {
    max-width: 10.5ch;
    margin-block: 24px 22px;
    font-size: clamp(42px, 3.65vw, 53px);
    font-variation-settings: "wght" 640;
    line-height: 1.04;
    letter-spacing: -.052em;
}

body.gw-home-product .gh-hero__lead {
    max-width: 54ch;
    font-size: clamp(15px, 1.12vw, 17px);
}

body.gw-home-product .gh-kicker {
    color: var(--gw-cobalt-deep);
    font-size: 11px;
    letter-spacing: .065em;
}

body.gw-home-product .gh-btn {
    min-height: 46px;
    border-radius: var(--gw-radius-sm);
    box-shadow: none;
}

body.gw-home-product .gh-btn--primary,
body.gw-home-product .gw50-product-desktop {
    border-color: var(--gw-cobalt);
    background: var(--gw-cobalt);
    box-shadow: 0 8px 22px rgba(49, 87, 232, .16);
}

body.gw-home-product .gh-hero__viewport {
    border-color: var(--gw-line-strong);
    border-radius: var(--gw-radius-md);
    background: #182130;
    box-shadow: var(--gw-shadow-raised);
}

body.gw-home-product .gh-hero__image {
    transform: none;
}

body.gw-home-product .gh-hero__caption {
    padding-top: 13px;
    color: var(--gw-muted);
    font-size: 10px;
}

body.gw-home-product .gh-hero__trust {
    color: var(--gw-muted);
    font-size: 10px;
    letter-spacing: .035em;
}

body.gw-home-product .gh-signal-strip {
    border-color: var(--gw-line);
    background: var(--gw-surface);
}

body.gw-home-product .gh-signal-strip__grid {
    position: relative;
}

body.gw-home-product .gh-signal-strip__item {
    border-color: var(--gw-line);
}

body.gw-home-product .gh-section__head h2 {
    max-width: 17ch;
    font-size: clamp(31px, 2.8vw, 42px);
    font-variation-settings: "wght" 640;
    line-height: 1.08;
    letter-spacing: -.044em;
}

body.gw-home-product .gh-product-card,
body.gw-home-product .gh-contact__shell {
    border-color: #263955;
    border-radius: var(--gw-radius-md);
    background: #111c2d;
    box-shadow: 0 22px 54px rgba(20, 32, 51, .13);
}

body.gw-home-product :where(.gh-outcome, .gh-solution) {
    border-color: var(--gw-line);
    border-radius: 12px;
    box-shadow: none;
}

body.gw-home-product .gh-solution {
    min-height: 320px;
}

body.gw-home-product .gh-solution:hover {
    border-color: #b8c8ef;
    box-shadow: 0 12px 28px rgba(20, 32, 51, .05);
}

body.gw-home-product .gh-process__step:not(:last-child)::after {
    background: var(--gw-line-strong);
}

body.gw-home-product .gh-process__dot {
    border-color: var(--gw-cobalt-soft);
    background: var(--gw-cobalt);
}

/* Customer workspace: a connected operational ledger. */
.getwinco-v4 {
    background: var(--gw-canvas);
}

.getwinco-v4 .winco-v3-header {
    border-bottom: 1px solid var(--gw-line);
    background: rgba(255, 255, 255, .94);
    box-shadow: none;
    backdrop-filter: blur(18px);
}

.getwinco-v4 .winco-v3-brand-copy strong,
.getwinco-v4 .getwinco-v4-topbar-title strong {
    color: var(--gw-ink);
}

.getwinco-v4 .winco-v3-brand-copy small,
.getwinco-v4 .getwinco-v4-topbar-title > span {
    color: var(--gw-muted);
}

.getwinco-v4 .winco-v3-nav a.active,
.getwinco-v4 .winco-v3-nav a[aria-current="page"] {
    background: var(--gw-cobalt-soft);
    color: var(--gw-cobalt-deep);
}

.getwinco-v4 .winco-v3-operation-context {
    position: relative;
    color: var(--gw-ink-soft);
}

.getwinco-v4 .winco-v3-operation-context > span {
    background: var(--gw-teal);
    box-shadow: 0 0 0 5px var(--gw-teal-soft);
}

.getwinco-v4 .getwinco-v4-topbar {
    min-height: 66px;
    border-bottom: 1px solid var(--gw-line);
    background: rgba(245, 247, 250, .92);
}

.getwinco-v4 .winco-v3-content {
    max-width: 1440px;
    margin-inline: auto;
}

.getwinco-v4 .gw-v4-page-header {
    align-items: end;
    padding-block: 8px 4px;
}

.getwinco-v4 .gw-v4-page-heading h1 {
    max-width: 18ch;
    color: var(--gw-ink);
    font-size: clamp(2rem, 3vw, 3.15rem);
    line-height: 1.04;
    letter-spacing: -.05em;
    text-wrap: balance;
}

.getwinco-v4 .gw-v4-page-heading p {
    max-width: 64ch;
    color: var(--gw-muted);
    line-height: 1.65;
}

.getwinco-v4 .gw-v4-eyebrow {
    color: var(--gw-cobalt-deep);
    font-size: .73rem;
    letter-spacing: .055em;
}

.getwinco-v4 :where(.gw-v4-panel, .gw-v4-kpi) {
    border-color: var(--gw-line);
    border-radius: var(--gw-radius-md);
    background: var(--gw-surface);
    box-shadow: none;
}

.getwinco-v4 .gw-v4-kpi {
    position: relative;
    overflow: hidden;
}

.getwinco-v4 .gw-v4-kpi::after {
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--gw-line);
    content: "";
}

.getwinco-v4 .gw-v4-button {
    min-height: 42px;
    border-radius: var(--gw-radius-sm);
    box-shadow: none;
}

.getwinco-v4 .gw-v4-button-primary {
    border-color: var(--gw-cobalt);
    background: var(--gw-cobalt);
    color: #fff;
}

.getwinco-v4 .gw-v4-button-primary:hover {
    border-color: var(--gw-cobalt-deep);
    background: var(--gw-cobalt-deep);
}

.getwinco-v4 .gw-v4-operation-list {
    position: relative;
}

.getwinco-v4 .gw-v4-operation-list::before {
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 29px;
    width: 1px;
    background: var(--gw-line-strong);
    content: "";
}

.getwinco-v4 .gw-v4-operation-row {
    position: relative;
    border-color: var(--gw-line);
    background: var(--gw-surface);
}

.getwinco-v4 .gw-v4-operation-avatar {
    position: relative;
    z-index: 1;
    border: 4px solid var(--gw-surface);
}

.getwinco-v4 [data-tone="online"] {
    color: var(--gw-teal);
}

.getwinco-v4 [data-tone="waiting"],
.getwinco-v4 [data-tone="warning"] {
    color: var(--gw-amber);
}

.getwinco-v4 :where(.gw-v4-empty-state, .v3-empty-state) {
    border-color: var(--gw-line-strong);
    background: var(--gw-surface-soft);
}

/* Admin cockpit: same semantics, denser information hierarchy. */
.winco-admin-dashboard {
    background: var(--gw-canvas);
}

.winco-admin-dashboard :where(.admin-hero h1, .admin-section-header h2) {
    color: var(--gw-ink);
    letter-spacing: -.04em;
    text-wrap: balance;
}

.winco-admin-dashboard .admin-hero h1 {
    max-width: 17ch;
    font-size: clamp(2rem, 3.2vw, 3.25rem);
}

.winco-admin-dashboard :where(.admin-card, .admin-kpi, .admin-health, .admin-client) {
    border-color: var(--gw-line);
    border-radius: var(--gw-radius-md);
    box-shadow: none;
}

.winco-admin-dashboard .admin-button--primary,
.winco-admin-dashboard .admin-nav__primary {
    background: var(--gw-cobalt);
    border-color: var(--gw-cobalt);
}

/* Legacy admin pages gain shared geometry while their internals are split. */
.winco-admin-clients,
.winco-billing-root {
    background: #0b111c;
}

.winco-admin-clients :where(.topbar, .hero, .quick-create, .card),
.winco-billing-root :where(.topbar, .hero, .card) {
    border-radius: var(--gw-radius-md) !important;
}

@media (max-width: 960px) {
    .winco-public-landing .ds-getwinco-hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .winco-public-landing .ds-hero-title {
        max-width: 13ch;
        font-size: clamp(2.55rem, 11vw, 4rem) !important;
    }

    .getwinco-v4 .gw-v4-operation-list::before {
        display: none;
    }

    body.gw-home-product .gh-hero__grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    body.gw-home-product .gh-hero__copy h1 {
        max-width: 12ch;
    }
}

@media (max-width: 640px) {
    .winco-public-landing .ds-getwinco-hero {
        padding-block: 4.5rem 3.75rem;
    }

    .getwinco-v4 .gw-v4-page-heading h1 {
        font-size: 2rem;
    }

    body.gw-home-product .gh-hero {
        padding-block: 56px 48px;
    }

    body.gw-home-product .gh-shell,
    body.gw-home-product .gw50-shell {
        width: 100%;
        max-width: 100%;
        padding-inline: 18px;
    }

    body.gw-home-product :where(
        .gh-hero__grid,
        .gh-hero__copy,
        .gh-hero__lead,
        .gh-hero__actions,
        .gh-hero__trust,
        .gh-hero__visual,
        .gh-hero__viewport
    ) {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    body.gw-home-product .gh-hero__copy h1 {
        max-width: 100%;
        font-size: clamp(38px, 11vw, 46px);
        overflow-wrap: anywhere;
    }

    body.gw-home-product .gh-hero__lead {
        overflow-wrap: anywhere;
    }

    body.gw-home-product .gh-btn {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    body.gw-home-product .gh-hero__image {
        width: 100%;
        max-width: 100%;
        object-fit: contain;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(
        .winco-public-landing,
        .getwinco-v4,
        .winco-admin-dashboard,
        .winco-admin-clients,
        .winco-billing-root
    ) *,
    :where(
        .winco-public-landing,
        .getwinco-v4,
        .winco-admin-dashboard,
        .winco-admin-clients,
        .winco-billing-root
    ) *::before,
    :where(
        .winco-public-landing,
        .getwinco-v4,
        .winco-admin-dashboard,
        .winco-admin-clients,
        .winco-billing-root
    ) *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}