:root {
    --ft-ink: #172033;
    --ft-ink-soft: #45516a;
    --ft-orange: #ff6b35;
    --ft-orange-dark: #ed5a25;
    --ft-apricot: #ff9d2f;
    --ft-cream: #fffaf5;
    --ft-paper: #ffffff;
    --ft-mint: #c9f4e6;
    --ft-purple: #7866d8;
    --ft-line: #e7e8ee;
    --ft-shadow: 0 24px 70px rgba(23, 32, 51, .13);
}

.flowtada-landing {
    overflow: hidden;
    background: var(--ft-cream);
    color: var(--ft-ink);
}

.flowtada-landing .container {
    max-width: 1240px;
}

.ft-hero {
    position: relative;
    isolation: isolate;
    color: #fff;
    background: linear-gradient(118deg, #ff6d32 0%, #ff832b 50%, #ff9d2c 100%);
    padding: 155px 0 0;
}

.ft-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .34;
    background-image: radial-gradient(rgba(255,255,255,.34) 1.5px, transparent 1.5px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 88%);
}

.ft-orb {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    filter: blur(2px);
    opacity: .2;
    pointer-events: none;
}
.ft-orb-one { width: 460px; height: 460px; top: -180px; left: 20%; background: #ffcf86; }
.ft-orb-two { width: 380px; height: 380px; right: -100px; bottom: 60px; background: #f36c57; }

.ft-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .91fr) minmax(560px, 1.09fr);
    gap: 52px;
    align-items: center;
    padding-bottom: 96px;
}

.ft-hero-copy { max-width: 590px; }
.ft-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    color: rgba(255,255,255,.83);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.3;
    text-transform: uppercase;
}
.ft-eyebrow-dark { color: var(--ft-orange-dark); }
.ft-eyebrow-light { color: #ffc7af; }
.ft-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffe48e; box-shadow: 0 0 0 5px rgba(255,228,142,.18); }

.ft-hero h1 {
    max-width: 610px;
    margin: 0 0 26px;
    color: #fff;
    font-size: clamp(48px, 5.2vw, 78px);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .98;
}
.ft-hero-lead {
    max-width: 540px;
    margin: 0 0 34px;
    color: rgba(255,255,255,.84);
    font-size: 18px;
    line-height: 1.65;
}
.ft-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ft-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 52px;
    padding: 13px 21px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.ft-button:hover { transform: translateY(-2px); text-decoration: none; }
.ft-button-primary { background: var(--ft-ink); color: #fff; box-shadow: 0 12px 24px rgba(23,32,51,.18); }
.ft-button-primary:hover { color: #fff; background: #0e1524; box-shadow: 0 16px 30px rgba(23,32,51,.26); }
.ft-button-ghost { color: #fff; border-color: rgba(255,255,255,.58); background: rgba(255,255,255,.08); }
.ft-button-ghost:hover { color: var(--ft-ink); background: #fff; }
.ft-hero-proof { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: rgba(255,255,255,.7); font-size: 12px; }
.ft-proof-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--ft-ink); background: #ffd77a; font-weight: 900; }

.ft-hero-visual { position: relative; min-height: 535px; padding: 28px 22px 30px 0; }
.ft-glow-card { position: absolute; inset: 62px 0 0 74px; border-radius: 34px; background: rgba(255,224,178,.25); transform: rotate(-2deg); }
.ft-dashboard-card { position: relative; z-index: 1; overflow: hidden; padding: 22px; border: 1px solid rgba(23,32,51,.09); border-radius: 26px; background: rgba(255,255,255,.97); color: var(--ft-ink); box-shadow: 0 30px 70px rgba(116,50,19,.26); transform: rotate(-1.4deg); }
.ft-window-bar { display: flex; align-items: center; gap: 7px; padding-bottom: 22px; border-bottom: 1px solid var(--ft-line); }
.ft-window-dot { width: 10px; height: 10px; border-radius: 50%; }
.ft-window-red { background: #ff625d; }.ft-window-yellow { background: #ffc244; }.ft-window-green { background: #30c65b; }
.ft-window-label { margin-left: auto; color: #9399a8; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.ft-dashboard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 28px 4px 24px; }
.ft-preview-kicker { margin: 0 0 7px; color: var(--ft-orange-dark); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ft-dashboard-head h2 { margin: 0; font-size: 25px; letter-spacing: -.04em; }
.ft-live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #d6f4e9; border-radius: 999px; color: #22775c; background: #effbf6; font-size: 11px; font-weight: 800; }
.ft-live-pill span { width: 6px; height: 6px; border-radius: 50%; background: #31b984; }
.ft-dashboard-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ft-metric { padding: 17px; border: 1px solid var(--ft-line); border-radius: 16px; background: #fbfbfd; }
.ft-metric span, .ft-metric small { display: block; color: #8a91a0; font-size: 11px; }
.ft-metric strong { display: block; margin: 6px 0 4px; color: var(--ft-ink); font-size: 29px; letter-spacing: -.04em; }
.ft-positive { color: #1b9b70 !important; }.ft-neutral { color: #8a91a0 !important; }
.ft-chart { margin-top: 14px; padding: 17px; border: 1px solid var(--ft-line); border-radius: 16px; background: linear-gradient(145deg, #fff5ee, #fff); }
.ft-chart-heading { display: flex; justify-content: space-between; margin-bottom: 22px; color: #7b8190; font-size: 11px; font-weight: 700; }
.ft-chart-heading span:last-child { color: #adb1bc; font-weight: 500; }
.ft-bars { display: flex; align-items: end; justify-content: space-around; gap: 10px; height: 150px; padding: 0 10px; border-bottom: 1px solid #e6e8ef; background: repeating-linear-gradient(to bottom, transparent 0 37px, rgba(226,228,235,.55) 38px); }
.ft-bars i { display: block; width: clamp(16px, 4vw, 30px); border-radius: 7px 7px 0 0; background: linear-gradient(to top, var(--ft-orange), #ffb85c); }
.ft-bars i:nth-child(2n) { background: linear-gradient(to top, #ff9a48, #ffd083); }
.ft-dashboard-footer { display: flex; align-items: center; gap: 11px; padding: 20px 3px 0; color: #828895; font-size: 11px; }
.ft-avatar-stack { display: flex; padding-left: 8px; }
.ft-avatar-stack span { display: grid; place-items: center; width: 24px; height: 24px; margin-left: -8px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--ft-purple); font-size: 9px; font-weight: 800; }
.ft-avatar-stack span:nth-child(2) { background: var(--ft-orange); }.ft-avatar-stack span:nth-child(3) { background: #31b984; }.ft-avatar-stack span:nth-child(4) { color: var(--ft-ink); background: #edf0f5; }
.ft-arrow-chip { display: grid; place-items: center; width: 27px; height: 27px; margin-left: auto; border-radius: 50%; color: #fff; background: var(--ft-ink); }
.ft-floating-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: 1px solid rgba(23,32,51,.08); border-radius: 14px; background: rgba(255,255,255,.95); color: var(--ft-ink); box-shadow: 0 16px 34px rgba(23,32,51,.16); font-size: 11px; }
.ft-floating-card strong, .ft-floating-card small { display: block; }.ft-floating-card small { margin-top: 3px; color: #8a91a0; font-size: 10px; }
.ft-floating-card-top { top: 2px; right: -18px; }.ft-floating-card-bottom { bottom: 4px; left: -28px; }
.ft-floating-icon, .ft-check-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; background: var(--ft-purple); font-size: 16px; }
.ft-check-icon { color: #1f8e69; background: var(--ft-mint); font-size: 15px; }

.ft-hero-bottom { border-top: 1px solid rgba(255,255,255,.2); background: rgba(23,32,51,.08); }
.ft-logo-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 82px; color: rgba(255,255,255,.7); font-size: 11px; }
.ft-logo-wordmark { color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -.05em; }.ft-logo-wordmark b { font-weight: 900; }
.ft-logo-muted { color: rgba(255,255,255,.48); font-size: 12px; letter-spacing: .08em; }

.ft-section { padding: 120px 0; }
.ft-section-light { background: #fff; }.ft-section-cream { background: var(--ft-cream); }
.ft-section-heading { max-width: 720px; margin: 0 auto 54px; text-align: center; }
.ft-section-heading-wide { max-width: 780px; }
.ft-section-heading h2, .ft-split-copy h2, .ft-contact-inner h2, .ft-trial-grid h2 { margin: 0 0 18px; color: var(--ft-ink); font-size: clamp(34px, 4vw, 56px); letter-spacing: -.055em; line-height: 1.03; }
.ft-section-heading p:last-child, .ft-split-copy > p, .ft-contact-inner p:last-child { color: #778094; font-size: 17px; line-height: 1.65; }

.ft-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ft-feature-card { min-height: 310px; padding: 32px; border: 1px solid var(--ft-line); border-radius: 22px; background: #fff; box-shadow: 0 10px 35px rgba(23,32,51,.045); }
.ft-feature-card-dark { color: #fff; background: var(--ft-ink); border-color: var(--ft-ink); box-shadow: 0 18px 42px rgba(23,32,51,.17); }
.ft-feature-card-dark h3 { color: #fff; }.ft-feature-card-dark p { color: #b9c2d2; }.ft-feature-card-dark a { color: #ffd197; }
.ft-feature-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 28px; border-radius: 14px; font-size: 26px; font-weight: 800; }
.ft-icon-orange { color: #ed5a25; background: #fff0e8; }.ft-icon-mint { color: #2d9d79; background: #d6f7eb; }.ft-icon-purple { color: var(--ft-purple); background: #eeeaff; }
.ft-feature-card h3 { margin: 0 0 12px; color: var(--ft-ink); font-size: 23px; letter-spacing: -.04em; }
.ft-feature-card p { min-height: 76px; margin: 0 0 24px; color: #778094; font-size: 15px; line-height: 1.65; }
.ft-feature-card a, .ft-text-link { color: var(--ft-orange-dark); font-size: 13px; font-weight: 800; text-decoration: none; }.ft-feature-card a span, .ft-text-link span { margin-left: 8px; }.ft-feature-card a:hover, .ft-text-link:hover { color: var(--ft-ink); }

.ft-split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.ft-product-visual { min-height: 400px; display: grid; place-items: center; }
.ft-product-panel { width: min(100%, 490px); padding: 28px; border: 1px solid #e5dfd9; border-radius: 24px; background: #fff; box-shadow: var(--ft-shadow); transform: rotate(2deg); }
.ft-product-panel-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 19px; border-bottom: 1px solid var(--ft-line); }.ft-product-brand { color: var(--ft-orange-dark); font-size: 11px; font-weight: 900; letter-spacing: .15em; }.ft-product-status { color: #9a9da7; font-size: 11px; }
.ft-product-title { display: flex; gap: 14px; align-items: center; padding: 28px 0 22px; }.ft-product-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: var(--ft-ink); font-size: 20px; font-weight: 900; }.ft-product-title small, .ft-product-title strong { display: block; }.ft-product-title small { margin-bottom: 3px; color: #989ba5; font-size: 11px; }.ft-product-title strong { font-size: 24px; letter-spacing: -.04em; }
.ft-product-list { display: grid; gap: 11px; }.ft-product-list > div { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 10px; background: #fbf8f5; color: #606777; font-size: 12px; }.ft-product-list b { margin-left: auto; color: var(--ft-ink); }.ft-list-dot { width: 8px; height: 8px; border-radius: 50%; }.ft-list-dot-orange { background: var(--ft-orange); }.ft-list-dot-mint { background: #35b488; }.ft-list-dot-purple { background: var(--ft-purple); }
.ft-product-chart { display: flex; align-items: end; gap: 10px; height: 88px; margin-top: 25px; padding: 0 14px; border-bottom: 1px solid #e4e7ec; }.ft-product-chart span { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(to top, #ff7938, #ffc079); }

.ft-split-copy { max-width: 560px; }.ft-split-copy h2 { font-size: clamp(36px, 4vw, 55px); }.ft-check-list { display: grid; gap: 15px; margin: 28px 0 30px; padding: 0; list-style: none; color: #566074; font-size: 14px; font-weight: 700; }.ft-check-list li { display: flex; gap: 10px; align-items: center; }.ft-check-list span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #278f70; background: #d9f6ec; font-size: 12px; }

.ft-platform-section { padding-top: 100px; }.ft-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ft-line); }.ft-step { padding: 28px 34px 0 0; border-right: 1px solid var(--ft-line); }.ft-step + .ft-step { padding-left: 34px; }.ft-step:last-child { border-right: 0; }.ft-step > span { color: var(--ft-orange-dark); font-size: 12px; font-weight: 900; letter-spacing: .12em; }.ft-step h3 { margin: 22px 0 10px; font-size: 27px; letter-spacing: -.04em; }.ft-step p { margin: 0; color: #778094; font-size: 15px; line-height: 1.65; }

.ft-trial-section { padding: 100px 0; color: #fff; background: var(--ft-ink); }.ft-trial-grid { display: grid; grid-template-columns: 1fr 470px; gap: 90px; align-items: center; }.ft-trial-grid h2 { color: #fff; font-size: clamp(38px, 4.2vw, 60px); }.ft-trial-grid > div > p:not(.ft-eyebrow) { max-width: 470px; color: #b9c2d2; font-size: 17px; line-height: 1.65; }.ft-trial-points { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 28px; color: #dce3ef; font-size: 12px; font-weight: 700; }
.ft-trial-form { padding: 30px; border-radius: 20px; background: #fff; color: var(--ft-ink); box-shadow: 0 22px 50px rgba(0,0,0,.18); }.ft-form-heading { display: grid; gap: 6px; margin-bottom: 23px; }.ft-form-heading span { font-size: 24px; font-weight: 850; letter-spacing: -.04em; }.ft-form-heading small { color: #8790a0; font-size: 12px; }.ft-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.ft-trial-form label { display: grid; gap: 7px; margin-bottom: 15px; color: #596276; font-size: 11px; font-weight: 800; }.ft-trial-form input { width: 100%; min-height: 45px; padding: 0 12px; border: 1px solid #dfe2e9; border-radius: 9px; color: var(--ft-ink); background: #fff; font: inherit; font-size: 13px; }.ft-trial-form input:focus { outline: 0; border-color: var(--ft-orange); box-shadow: 0 0 0 3px rgba(255,107,53,.14); }.ft-button-submit { width: 100%; margin-top: 4px; color: #fff; background: var(--ft-orange); cursor: pointer; }.ft-button-submit:hover { color: #fff; background: var(--ft-orange-dark); box-shadow: 0 12px 24px rgba(255,107,53,.22); }.ft-form-legal { display: block; margin-top: 15px; color: #a2a7b2; font-size: 10px; line-height: 1.5; text-align: center; }

.ft-contact-strip { padding: 62px 0; background: #fff; }.ft-contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }.ft-contact-inner h2 { margin-bottom: 0; font-size: clamp(28px, 3vw, 42px); }.ft-button-outline-dark { color: var(--ft-ink); border-color: #cdd2dc; background: #fff; }.ft-button-outline-dark:hover { color: #fff; border-color: var(--ft-ink); background: var(--ft-ink); }

@media (max-width: 1050px) {
    .ft-hero-grid { grid-template-columns: 1fr; }.ft-hero-copy { max-width: 760px; }.ft-hero-visual { max-width: 700px; width: 100%; margin: 0 auto; }.ft-trial-grid { grid-template-columns: 1fr 440px; gap: 42px; }.ft-floating-card-top { right: -6px; }
}
@media (max-width: 800px) {
    .ft-hero { padding-top: 120px; }.ft-hero-grid { padding-bottom: 60px; }.ft-hero h1 { font-size: clamp(44px, 11vw, 68px); }.ft-hero-visual { min-height: 450px; padding-right: 0; }.ft-feature-grid, .ft-split-section, .ft-trial-grid { grid-template-columns: 1fr; }.ft-section { padding: 80px 0; }.ft-product-visual { min-height: 330px; }.ft-split-section { gap: 35px; }.ft-trial-grid { gap: 38px; }.ft-steps { grid-template-columns: 1fr; }.ft-step, .ft-step + .ft-step { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--ft-line); }.ft-step:last-child { border-bottom: 0; }.ft-contact-inner { align-items: flex-start; flex-direction: column; }.ft-logo-strip { flex-wrap: wrap; padding: 20px 0; }.ft-logo-strip > span { width: 100%; }.ft-floating-card-bottom { left: -6px; }
}
@media (max-width: 520px) {
    .ft-hero { padding-top: 106px; }.ft-hero-actions, .ft-button { width: 100%; }.ft-hero-proof { align-items: flex-start; }.ft-hero-visual { min-height: 390px; }.ft-dashboard-card { padding: 14px; border-radius: 18px; }.ft-dashboard-head { padding: 20px 3px 16px; }.ft-dashboard-head h2 { font-size: 20px; }.ft-metric { padding: 12px; }.ft-metric strong { font-size: 23px; }.ft-chart { padding: 12px; }.ft-bars { height: 110px; }.ft-floating-card { padding: 9px 10px; font-size: 9px; }.ft-floating-card-top { top: -8px; right: -2px; }.ft-floating-card-bottom { bottom: -8px; left: -2px; }.ft-logo-wordmark { font-size: 14px; }.ft-feature-card { min-height: auto; padding: 26px; }.ft-form-row { grid-template-columns: 1fr; gap: 0; }.ft-trial-form { padding: 22px; }.ft-section-heading { margin-bottom: 36px; }
}

/* Soft, consistent select controls for the trial form */
.ft-trial-form select {
    width: 100%;
    min-height: 45px;
    padding: 0 40px 0 14px;
    border: 1px solid #dfe2e9;
    border-radius: 12px;
    color: var(--ft-ink);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238790a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.ft-trial-form select:hover {
    border-color: #c9ced9;
    background-color: #fcfdff;
}

.ft-trial-form select:focus {
    outline: 0;
    border-color: var(--ft-orange);
    box-shadow: 0 0 0 3px rgba(255,107,53,.14);
}

.ft-form-label {
    display: block;
}

.ft-form-optional {
    margin-left: 4px;
    color: #9aa3b2;
    font-size: 10px;
    font-weight: 650;
}