/* How It Works Page Styles */

/* ================================
   NAVIGATION OVERRIDE - WHITE ELEMENTS
   ================================ */
/* The hero is dark, so the transparent header needs light elements over it.
   Same approach as the docs and platform pages. */

.site-header:not(.site-header--scrolled) .site-header__logo-img {
    filter: brightness(0) invert(1) !important;
}

body.menu-open .site-header:not(.site-header--scrolled) .site-header__logo-img {
    filter: brightness(0) saturate(1) !important;
}

@media (min-width: 768px) {
    body.menu-open .site-header:not(.site-header--scrolled) .site-header__logo-img {
        filter: none !important;
    }

    .site-header:not(.site-header--scrolled) .site-nav__link {
        color: #ffffff !important;
    }

    .site-header:not(.site-header--scrolled) .site-nav__link::after {
        background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%) !important;
    }

    .site-header:not(.site-header--scrolled) .site-nav__contact {
        border-left-color: rgba(255, 255, 255, 0.15);
    }
}

.site-header:not(.site-header--scrolled) .menu-toggle:not(.menu-toggle--active) .menu-toggle__line {
    background: #ffffff !important;
}

.site-header:not(.site-header--scrolled) .btn--nav:not(.btn--nav-primary) {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.site-header:not(.site-header--scrolled) .btn--nav:not(.btn--nav-primary):hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

body.menu-open .btn--nav {
    color: var(--color-primary) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
    background: transparent !important;
}

.site-header:not(.site-header--scrolled) .social-links__link {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.site-header:not(.site-header--scrolled) .btn--nav-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #2dd4bf 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
}

/* ================================
   HERO
   ================================ */

.hiw-hero {
    background:
        linear-gradient(135deg, rgba(10, 13, 20, 0.92) 0%, rgba(22, 33, 62, 0.88) 100%),
        url('/assets/images/visuals/abstract-topology_0_2025-10-25_18-02-44.jpg') center/cover no-repeat;
    padding: 8rem 0 5rem;
    color: #ffffff;
}

@media (max-width: 767px) {
    .hiw-hero {
        padding: 6rem 0 3.5rem;
    }
}

.hiw-hero__content {
    max-width: 780px;
}

.hiw-hero__label {
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}

.hiw-hero__title {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: var(--weight-light);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-6);
}

.hiw-hero__subtitle {
    font-size: 1.25rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-8);
}

.hiw-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* Same treatment the site already gives a secondary button on a dark section */
.hiw-hero .btn--secondary {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
}

.hiw-hero .btn--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

@media (max-width: 520px) {
    .hiw-hero__cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ================================
   SHARED PAGE PIECES
   ================================ */

.hiw-section-head {
    max-width: 760px;
    margin-bottom: var(--space-12);
}

/* The header is fixed, so an in-page jump needs room above the heading.
   Same offset the legal page uses. */
#before-you-start {
    scroll-margin-top: 100px;
}

/* The site already darkens accent captions on its light sections for contrast.
   Do the same on this page's white sections. */
.section--white .caption.text-accent,
.hiw-docs-panel .caption.text-accent {
    color: #6B5BA5;
    opacity: 1;
}

/* Same heading scale the site uses for section titles */
.hiw-section-head h2,
.hiw-docs-panel h2,
.hiw-cta h2 {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 36px);
    font-weight: var(--weight-light);
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.hiw-note {
    font-size: 1rem;
    color: var(--color-text-secondary);
    max-width: 70ch;
}

/* ================================
   CHECKLIST
   ================================ */

.hiw-checklist {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 900px) {
    .hiw-checklist {
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
    }
}

.hiw-check-card {
    background: #ffffff;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.hiw-check-card__title {
    font-size: 1.25rem;
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
}

.hiw-check-card__lede {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.hiw-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hiw-check-list li {
    position: relative;
    padding-left: var(--space-8);
    margin-bottom: var(--space-5);
    font-size: 1rem;
    line-height: 1.5;
}

.hiw-check-list li:last-child {
    margin-bottom: 0;
}

.hiw-check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0f766e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-position: center;
    background-repeat: no-repeat;
}

.hiw-check-list strong {
    display: block;
    font-weight: var(--weight-semibold);
}

.hiw-check-list__optional li::before {
    background: #475569;
}

.hiw-tag {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-full);
    padding: 2px 10px;
    margin-left: var(--space-2);
}

/* ================================
   ONBOARDING STEPS
   ================================ */

.hiw-steps {
    display: grid;
    gap: var(--space-6);
    counter-reset: hiw-step;
}

@media (min-width: 768px) {
    .hiw-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .hiw-steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

.hiw-step {
    background: #ffffff;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.hiw-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1B1B1B;
    color: #ffffff;
    font-weight: var(--weight-bold);
    font-size: 1rem;
    margin-bottom: var(--space-4);
}

.hiw-step__title {
    font-size: 1.125rem;
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
}

.hiw-step__description {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin-bottom: var(--space-3);
}

.hiw-step__who {
    font-size: 0.875rem;
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
}

/* ================================
   PLATFORM LINKS
   ================================ */

.hiw-platforms {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .hiw-platforms {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .hiw-platforms {
        grid-template-columns: repeat(4, 1fr);
    }
}

.hiw-platform {
    display: block;
    background: #ffffff;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-base), transform var(--transition-base);
}

.hiw-platform:hover {
    border-color: #1B1B1B;
    transform: translateY(-2px);
}

.hiw-platform__name {
    font-size: 1.125rem;
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
}

.hiw-platform__detail {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* ================================
   DOCS ACCESS PANEL
   ================================ */

.hiw-docs-panel {
    background: #ffffff;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    max-width: 820px;
}

.hiw-docs-panel h2 {
    margin-bottom: var(--space-4);
}

.hiw-docs-panel p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.hiw-docs-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
}



/* ================================
   HERO: LIVE DEMO
   The same animation the homepage runs, without the blob or the platform
   logos. The controls are restyled for the dark hero; everything else comes
   from hero-demo.css and hero-demo-desktop.css.
   ================================ */

.hiw-hero__grid {
    display: grid;
    gap: var(--space-12);
    align-items: center;
}

@media (min-width: 1024px) {
    .hiw-hero__grid {
        grid-template-columns: 1.05fr 1fr;
        gap: var(--space-16);
    }

    .hiw-hero__content {
        max-width: none;
    }
}

/* The switch sits above the mockup in the flow, so it cannot land on top of
   the browser window when the desktop view is taller than the phone */
.hiw-hero__demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}

.hiw-hero .hero-demo-modes {
    position: static;
    transform: none;
}

/* The mockup is sized from one font-size, so the hero column just gives it room */
.hiw-hero .hero-visual {
    height: 480px;
    width: 100%;
    margin-top: 0;
}

.hiw-hero .hero-demo {
    font-size: 8.6px;
}

@media (min-width: 1280px) {
    .hiw-hero .hero-demo {
        font-size: 9.4px;
    }
}

/* Controls on a dark background */
.hiw-hero .hero-demo-modes {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
}

.hiw-hero .hero-demo-mode {
    color: rgba(255, 255, 255, 0.8);
}

.hiw-hero .hero-demo-mode:hover {
    color: #ffffff;
}

.hiw-hero .hero-demo-mode.is-active {
    background: #ffffff;
    color: #0a0d14;
}

.hiw-hero .hero-demo-dot__mark {
    background: rgba(255, 255, 255, 0.35);
}

.hiw-hero .hero-demo-dot:hover .hero-demo-dot__mark {
    background: rgba(255, 255, 255, 0.55);
}

.hiw-hero .hero-demo-dot.is-active .hero-demo-dot__mark {
    background: rgba(255, 255, 255, 0.28);
}

.hiw-hero .hero-demo-dot.is-active .hero-demo-dot__mark::after {
    background: #ffffff;
}

.hiw-hero .hero-demo-nav__label {
    color: rgba(255, 255, 255, 0.85);
}

.hiw-hero .hero-demo-mode:focus-visible,
.hiw-hero .hero-demo-dot:focus-visible {
    outline-color: #ffffff;
}

@media (max-width: 1023px) {
    .hiw-hero .hero-visual {
        height: 430px;
        margin-bottom: 70px;
    }

    .hiw-hero .hero-demo {
        font-size: 7.6px;
    }
}

@media (max-width: 400px) {
    .hiw-hero .hero-demo {
        font-size: 6.8px;
    }

    .hiw-hero .hero-visual {
        height: 380px;
    }
}

/* ================================
   WORKFLOW FIGURE
   ================================ */

.hiw-workflow-grid {
    display: grid;
    gap: var(--space-10);
    align-items: center;
}

@media (min-width: 1024px) {
    .hiw-workflow-grid {
        grid-template-columns: 1.1fr 0.9fr;
        gap: var(--space-16);
    }
}

.hiw-figure {
    margin: 0;
}

.hiw-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.hiw-figure figcaption {
    margin-top: var(--space-3);
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

/* ================================
   CALL TO ACTION ROW
   ================================ */

.hiw-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-10);
}

.hiw-cta-row__note {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin: 0;
}

@media (max-width: 520px) {
    .hiw-cta-row .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ================================
   PLATFORM CARDS WITH LOGOS
   ================================ */

.hiw-platform__logo {
    display: flex;
    align-items: center;
    height: 34px;
    margin-bottom: var(--space-4);
}

.hiw-platform__logo img {
    height: 26px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    object-position: left center;
}

/* The WordPress file carries wide transparent margins of its own, so it reads
   smaller than the rest at the same height. Same correction the hero uses. */
.hiw-platform__logo img[src*="wordpress"] {
    height: 34px;
}

/* Web Summit note beside the logo, reversed like the rest of the header.
   Web Summit's magenta does not hold up against these dark heroes, so the
   note goes white here the same way the nav links and buttons do. */
.site-header:not(.site-header--scrolled) .site-header__event {
    color: rgba(255, 255, 255, 0.85) !important;
}

.site-header:not(.site-header--scrolled) .site-header__event-name {
    color: #ffffff !important;
}