/* FreeByte — Minimal black & white aesthetic */

/* ---------------------------------------------------------------- Reset */

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

* {
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea {
    font: inherit;
    color: inherit;
}

/* ------------------------------------------------------------- Document */

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    /* Base rhythm for anything that doesn't set its own leading. */
    line-height: 1.5;
    background: #ffffff;
    color: #0a0a0a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
    letter-spacing: -0.01em;
}

::selection {
    background: #0a0a0a;
    color: #ffffff;
}

a {
    color: inherit;
    text-decoration: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 1.5px solid #0a0a0a;
    outline-offset: 3px;
    border-radius: 2px;
}

/* --------------------------------------------------------------- Shared */

.container {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container--5xl {
    max-width: 64rem;
}

.container--3xl {
    max-width: 48rem;
}

.section {
    padding: 5rem 0;
}

.section--hairline {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #737373;
}

/* Headings share one optical treatment across both pages. */
.headline {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000000;
    letter-spacing: -0.035em;
    line-height: 1;
}

/* Lighter than the body greys: at 24px+ this only needs 3:1, and keeping it
   pale preserves the split between the black and muted halves of a headline. */
.headline .muted {
    color: #8f8f8f;
}

.lede {
    font-size: 0.875rem;
    line-height: 1.625;
    color: #525252;
}

.hairline-top {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Scroll reveal — JS adds .is-visible when the element enters the viewport. */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Underline grows from the left on hover, retracts to the right on leave. */
.link-underline {
    position: relative;
    display: inline-block;
}

.link-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.link-underline:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 0 1.25rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.025em;
    cursor: pointer;
    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.btn--solid {
    background: #000000;
    color: #ffffff;
}

.btn--solid:hover {
    background: #262626;
}

.btn--outline {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.15);
    color: #000000;
}

.btn--outline:hover {
    border-color: #000000;
}

.btn--sm {
    height: 2.5rem;
}

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

/* The arrow nudges forward with the button it sits in. */
.btn .icon-nudge {
    transition: transform 150ms ease;
}

.btn:hover .icon-nudge {
    transform: translateX(0.125rem);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.btn-row--center {
    justify-content: center;
}

/* --------------------------------------------------------------- Navbar */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    border-bottom: 1px solid transparent;
    transition:
        background-color 500ms ease,
        border-color 500ms ease,
        backdrop-filter 500ms ease;
}

/* JS toggles this once the page has scrolled past the first few pixels. */
.navbar.is-scrolled {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.navbar__inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.navbar__logo img {
    height: 2.5rem;
    width: auto;
    object-fit: contain;
}

.slogan {
    display: none;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #737373;
    line-height: 1.25;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    padding-left: 0.75rem;
}

.navbar__links,
.navbar__cta {
    display: none;
}

.navbar__links {
    list-style: none;
    padding: 0;
    align-items: center;
    gap: 2.5rem;
}

.navbar__links a {
    font-size: 13px;
    letter-spacing: 0.025em;
    color: #404040;
    transition: color 150ms ease;
}

.navbar__links a:hover {
    color: #000000;
}

.navbar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.navbar__toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.navbar__toggle .icon-close {
    display: none;
}

.navbar__toggle[aria-expanded="true"] .icon-close {
    display: block;
}

.navbar__toggle[aria-expanded="true"] .icon-open {
    display: none;
}

/* Collapsed by default; max-height animates because auto height can't. */
.navbar__panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition:
        max-height 500ms ease-out,
        opacity 500ms ease-out;
}

.navbar__panel.is-open {
    max-height: 24rem;
    opacity: 1;
}

.navbar__panel-inner {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.navbar__panel-inner a:not(.btn) {
    font-size: 1rem;
    line-height: 1.5rem;
    color: #262626;
}

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

.hero {
    position: relative;
    padding: 7rem 0 4rem;
    overflow: hidden;
}

.hero__grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.hero__title {
    margin-top: 0.5rem;
}

.hero__lede {
    margin-top: 1.5rem;
    max-width: 32rem;
}

.hero__note {
    margin-top: 1.5rem;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #737373;
}

.hero__card-col {
    display: flex;
    justify-content: center;
}

.hero__card-wrap {
    width: 100%;
    max-width: 340px;
}

/* --------------------------------------------------------- Balance card */

/* The scroll-driven scale gets its own element. .balance runs the float
   animation, and an animated transform outranks any other transform on the
   same element, so stacking both there discards the scale silently — which
   is exactly how the original effect went unnoticed. main.js only feeds the
   --zoom number; the transform itself stays here. */
.balance-zoom {
    transform: scale(var(--zoom, 1));
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.balance {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 440px;
    padding: 2rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.25);
    animation: float-soft 6s ease-in-out infinite;
}

@keyframes float-soft {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .balance {
        animation: none;
    }

    .balance-zoom {
        transform: none;
    }
}

.balance__head,
.balance__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.balance__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: #737373;
}

.dot {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: #000000;
}

.balance__body {
    margin-top: 3rem;
}

.balance__amount {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #000000;
}

.balance__unit {
    /* 24px and up, so it sits with the headline greys rather than the body ones. */
    color: #8f8f8f;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 500;
    vertical-align: baseline;
}

.balance__sub {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: #737373;
}

.balance__foot {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.balance__foot p {
    font-size: 11px;
    letter-spacing: 0.025em;
    color: #737373;
}

.balance__foot p:last-child {
    color: #000000;
}

/* ---------------------------------------------------------- Step cards  */

.steps {
    display: grid;
    gap: 1.25rem;
    margin-top: 3rem;
}

.steps--flush {
    margin-top: 0;
}

.step {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Holds the card square-ish once the grid collapses to one column. */
    min-height: 280px;
    padding: 1.75rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    transition:
        border-color 500ms ease,
        box-shadow 500ms ease;
}

.step:hover {
    border-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.2);
}

.step--compact {
    /* The How It Works page lets these size to their content. */
    min-height: 0;
    padding: 1.5rem;
}

.step__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.step__n {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #737373;
}

.step__rule {
    width: 1.5rem;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    transition: background-color 500ms ease;
}

.step--compact .step__rule {
    width: 1.25rem;
}

.step:hover .step__rule {
    background: #000000;
}

.step__title {
    margin-top: 3rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: #000000;
    letter-spacing: -0.025em;
}

.step--compact .step__title {
    margin-top: 1.5rem;
    font-size: 1rem;
    line-height: 1.375;
}

.step__body {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.625;
    color: #525252;
}

.step--compact .step__body {
    margin-top: 0.625rem;
    font-size: 13px;
}

/* ---------------------------------------------------------------- Trust */

.trust {
    padding: 6rem 0;
    text-align: center;
}

.trust__eyebrow {
    letter-spacing: 0.28em;
    color: #737373;
}

.trust__headline {
    margin-top: 1.25rem;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #262626;
}

.trust__headline strong {
    color: #000000;
    font-weight: 600;
}

.trust__body {
    margin-top: 1.25rem;
    max-width: 36rem;
    margin-inline: auto;
    color: #737373;
}

.trust__wall {
    margin-top: 4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 2.5rem;
    row-gap: 1.5rem;
}

/* These carry the wordmarks, so they can't be faded with opacity — any value
   below 1 composites toward white and drops them under the contrast floor.
   The settle-in on hover comes from colour alone. */
.trust__brand {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #737373;
    transition: color 500ms ease;
}

.trust__brand:hover {
    color: #000000;
}

/* -------------------------------------------------------------- Contact */

.contact {
    background: rgba(250, 250, 250, 0.6);
}

.contact__grid {
    display: grid;
    gap: 2.5rem;
}

.contact__lede {
    margin-top: 1.5rem;
    max-width: 28rem;
}

.contact__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2rem;
}

.contact__email {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #404040;
}

.form {
    padding: 1.75rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
}

.form__title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #737373;
}

.form__fields {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form label {
    display: block;
    /* Full 1.5rem line box so the small label keeps the field rhythm. */
    line-height: 1.5rem;
    font-size: 11px;
    letter-spacing: 0.025em;
    color: #737373;
}

.form input,
.form textarea {
    margin-top: 0.375rem;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #000000;
    transition: border-color 150ms ease;
}

.form input {
    height: 2.5rem;
}

.form textarea {
    padding: 0.5rem 0;
    resize: none;
}

.form input::placeholder,
.form textarea::placeholder {
    color: #737373;
}

.form input:focus,
.form textarea:focus {
    outline: none;
    border-bottom-color: #000000;
}

.form .btn {
    margin-top: 1.75rem;
}

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

.footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: #ffffff;
}

.footer__inner {
    padding: 3rem 0;
}

.footer__grid {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

.footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.footer__logo img {
    height: 3rem;
    width: auto;
    object-fit: contain;
}

.footer__logo .slogan {
    display: block;
    /* Stays 10px at every width — unlike the navbar's, which steps up at md. */
    font-size: 10px;
}

.footer__tagline {
    margin-top: 1.25rem;
    max-width: 20rem;
    font-size: 0.875rem;
    line-height: 1.625;
    color: #737373;
}

.footer__nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer__nav a {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #404040;
    transition: color 150ms ease;
}

.footer__nav a:hover {
    color: #000000;
}

.footer__label {
    font-size: 0.75rem;
    line-height: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #737373;
}

.footer__email {
    margin-top: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #000000;
}

.footer__bottom {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.footer__bottom p {
    font-size: 0.75rem;
    line-height: 1rem;
    color: #737373;
    letter-spacing: 0.025em;
}

/* ------------------------------------------------- How It Works: flow    */

.hiw-hero {
    padding: 7rem 0 3rem;
}

.hiw-hero__title {
    margin-top: 1rem;
    max-width: 48rem;
}

.hiw-hero__lede {
    margin-top: 1.5rem;
    max-width: 36rem;
}

.flow {
    padding: 4rem 0;
}

/* The connector rail only reads as a flow at desktop width. */
.flow__rail {
    display: none;
    position: relative;
    margin-bottom: 2.5rem;
}

.flow__line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.flow__nodes {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.flow__node-cell {
    display: flex;
    justify-content: center;
}

.flow__node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 9999px;
}

/* --------------------------------------------------------- Section heads */

.section__head {
    max-width: 48rem;
}

.section__title {
    margin-top: 1rem;
}

.cta {
    text-align: center;
}

/* ---------------------------------------------------------- Breakpoints */
/* Mirrors the previous Tailwind scale: sm 640, md 768, lg 1024. */

@media (min-width: 640px) {
    .slogan {
        display: block;
    }

    .headline {
        font-size: 1.875rem;
    }

    .trust__headline {
        font-size: 28px;
    }

    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .container {
        padding: 0 2.5rem;
    }

    .section {
        padding: 6rem 0;
    }

    .navbar__inner {
        padding: 0 2.5rem;
        height: 5rem;
    }

    .navbar__logo img {
        height: 3rem;
    }

    .slogan {
        font-size: 11px;
    }

    .navbar__links {
        display: flex;
    }

    .navbar__cta {
        display: inline-flex;
    }

    .navbar__toggle {
        display: none;
    }

    .navbar__panel {
        display: none;
    }

    .hero {
        padding: 8rem 0 5rem;
    }

    .lede {
        font-size: 1rem;
        /* At this size the tighter leading takes over from .lede's relaxed one. */
        line-height: 1.5rem;
    }

    .balance {
        padding: 2.5rem;
    }

    .balance__amount {
        font-size: 3rem;
        line-height: 1;
    }

    .balance__unit {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .steps {
        gap: 1.5rem;
    }

    .step {
        padding: 2rem;
    }

    .step--compact {
        padding: 1.75rem;
    }

    .step__title {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .step--compact .step__title {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .trust {
        padding: 8rem 0;
    }

    .trust__brand {
        font-size: 13px;
    }

    .trust__wall {
        margin-top: 5rem;
        column-gap: 4rem;
    }

    .trust__body {
        font-size: 15px;
        /* Keeps the relaxed leading — this one never steps up to a preset size. */
        line-height: 1.625;
    }

    .form {
        padding: 2rem;
    }

    .footer__inner {
        padding: 4rem 0;
    }

    .footer__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .footer__nav {
        justify-self: center;
    }

    .footer__contact {
        justify-self: end;
    }

    .footer__email {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .footer__bottom {
        flex-direction: row;
        align-items: center;
    }

    .hiw-hero {
        padding: 8rem 0 4rem;
    }

    .flow {
        padding: 5rem 0;
    }
}

@media (min-width: 1024px) {
    .headline {
        font-size: 2.25rem;
    }

    .trust__headline {
        font-size: 34px;
    }

    .hero__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 3rem;
    }

    .hero__copy {
        grid-column: span 7 / span 7;
    }

    .hero__card-col {
        grid-column: span 5 / span 5;
        justify-content: flex-end;
    }

    .steps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .contact__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .contact__col {
        grid-column: span 6 / span 6;
    }

    .flow__rail {
        display: block;
    }
}