{"id":12,"date":"2026-10-01T13:35:39","date_gmt":"2026-10-01T18:35:39","guid":{"rendered":"https:\/\/tyloapp.com\/?page_id=12"},"modified":"2026-10-03T09:19:06","modified_gmt":"2026-10-03T14:19:06","slug":"home","status":"publish","type":"page","link":"https:\/\/tyloapp.com\/es\/","title":{"rendered":"home"},"content":{"rendered":"\n<style>\n\n\/* =========================================================\n   TYLO \u2014 HOME \/ THE FIRST 500\n   VERSI\u00d3N ACTUAL\n========================================================= *\/\n\n.tylo-main-hero {\n    position: relative;\n    width: 100%;\n    max-width: 1600px;\n    min-height: 720px;\n    margin: 0 auto;\n    overflow: hidden;\n\n    background: #ffffff;\n\n    color: #0b102d;\n    font-family: Arial, Helvetica, sans-serif;\n}\n\n\n\/* =========================================================\n   IMAGEN PRINCIPAL\n========================================================= *\/\n\n.tylo-main-hero::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n\n    background-image:\n        linear-gradient(\n            90deg,\n            rgba(255,255,255,1) 0%,\n            rgba(255,255,255,.98) 11%,\n            rgba(255,255,255,.91) 23%,\n            rgba(255,255,255,.67) 37%,\n            rgba(255,255,255,.20) 53%,\n            rgba(255,255,255,0) 68%\n        ),\n        url(\"\/wp-content\/uploads\/2026\/09\/Hombre-elegante-junto-al-paseo-maritimo.png\");\n\n    background-size: cover;\n    background-position: center center;\n    background-repeat: no-repeat;\n\n    z-index: 0;\n}\n\n\n\/* =========================================================\n   CONTENIDO\n========================================================= *\/\n\n.tylo-main-copy {\n    position: relative;\n    z-index: 2;\n\n    width: 520px;\n\n    padding-top: 55px;\n    margin-left: 7%;\n}\n\n\n\/* =========================================================\n   LOGO\n   No depende de una imagen externa.\n========================================================= *\/\n\n.tylo-main-logo {\n    display: block;\n\n    margin: 0 0 38px 0;\n\n    color: #4B10F5;\n\n    font-family:\n        \"Arial Rounded MT Bold\",\n        Arial,\n        Helvetica,\n        sans-serif;\n\n    font-size: 48px;\n    line-height: 1;\n\n    font-weight: 900;\n\n    letter-spacing: -4px;\n}\n\n\n\/* =========================================================\n   THE FIRST\n========================================================= *\/\n\n.tylo-main-first {\n    margin: 0;\n\n    font-size: 55px;\n    line-height: .88;\n\n    font-weight: 900;\n\n    letter-spacing: -2.5px;\n}\n\n\n\/* =========================================================\n   500\n========================================================= *\/\n\n.tylo-main-number {\n    margin: 0 0 20px -8px;\n\n    font-size: 205px;\n    line-height: .72;\n\n    font-weight: 900;\n\n    letter-spacing: -12px;\n\n    color: #4B10F5;\n}\n\n\n\/* =========================================================\n   FOUNDING DRIVER\n========================================================= *\/\n\n.tylo-main-heading {\n    margin: 0;\n\n    font-size: 35px;\n    line-height: .97;\n\n    font-weight: 900;\n\n    letter-spacing: -1.2px;\n}\n\n\n\/* =========================================================\n   TAGLINE\n========================================================= *\/\n\n.tylo-main-tagline {\n    margin-top: 20px;\n\n    font-size: 23px;\n    line-height: 1.1;\n\n    font-weight: 800;\n\n    letter-spacing: -.5px;\n}\n\n.tylo-main-tagline strong {\n    color: #4B10F5;\n}\n\n\n\/* =========================================================\n   FECHA\n========================================================= *\/\n\n.tylo-main-date {\n    margin-top: 30px;\n\n    font-size: 16px;\n    line-height: 1.2;\n\n    font-weight: 700;\n}\n\n\n\/* =========================================================\n   BOTONES\n========================================================= *\/\n\n.tylo-main-buttons {\n    display: flex;\n    align-items: center;\n\n    gap: 14px;\n\n    margin-top: 32px;\n}\n\n\n\/* =========================================================\n   BOT\u00d3N PRINCIPAL\n========================================================= *\/\n\n.tylo-main-primary {\n    width: 330px;\n    height: 52px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 13px;\n\n    background: linear-gradient(\n        100deg,\n        #4B10F5 0%,\n        #6614FF 100%\n    );\n\n    color: #ffffff;\n\n    text-decoration: none;\n\n    font-size: 16px;\n    font-weight: 800;\n\n    box-shadow:\n        0 9px 22px rgba(75,16,245,.22);\n\n    transition: .2s ease;\n}\n\n.tylo-main-primary:hover {\n    transform: translateY(-2px);\n\n    box-shadow:\n        0 12px 26px rgba(75,16,245,.28);\n}\n\n.tylo-main-primary .arrow {\n    margin-left: 18px;\n\n    font-size: 22px;\n    font-weight: 400;\n}\n\n\n\/* =========================================================\n   BOT\u00d3N VIDEO\n========================================================= *\/\n\n.tylo-main-secondary {\n    width: 185px;\n    height: 52px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 13px;\n\n    background: rgba(255,255,255,.96);\n\n    border: 2px solid rgba(11,16,45,.12);\n\n    color: #4B10F5;\n\n    text-decoration: none;\n\n    font-size: 16px;\n    font-weight: 700;\n\n    box-shadow:\n        0 4px 12px rgba(0,0,0,.05);\n\n    transition: .2s ease;\n}\n\n.tylo-main-secondary:hover {\n    transform: translateY(-2px);\n}\n\n.tylo-play {\n    margin-right: 9px;\n\n    font-size: 20px;\n}\n\n\n\/* =========================================================\n   PANTALLAS M\u00c1S BAJAS\n========================================================= *\/\n\n@media (max-height: 820px) and (min-width: 769px) {\n\n    .tylo-main-hero {\n        min-height: 650px;\n    }\n\n    .tylo-main-copy {\n        padding-top: 42px;\n    }\n\n    .tylo-main-logo {\n        margin-bottom: 28px;\n    }\n\n    .tylo-main-first {\n        font-size: 46px;\n    }\n\n    .tylo-main-number {\n        font-size: 175px;\n    }\n\n    .tylo-main-heading {\n        font-size: 30px;\n    }\n\n    .tylo-main-tagline {\n        font-size: 21px;\n        margin-top: 16px;\n    }\n\n    .tylo-main-date {\n        margin-top: 24px;\n    }\n\n    .tylo-main-buttons {\n        margin-top: 28px;\n    }\n\n    .tylo-main-primary {\n        width: 300px;\n    }\n\n    .tylo-main-secondary {\n        width: 175px;\n    }\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1000px) and (min-width: 769px) {\n\n    .tylo-main-copy {\n        margin-left: 5%;\n        width: 470px;\n    }\n\n    .tylo-main-number {\n        font-size: 175px;\n    }\n\n    .tylo-main-heading {\n        font-size: 31px;\n    }\n\n    .tylo-main-primary {\n        width: 300px;\n    }\n\n    .tylo-main-secondary {\n        width: 175px;\n    }\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 768px) {\n\n    .tylo-main-hero {\n        min-height: 820px;\n    }\n\n    .tylo-main-hero::before {\n\n        background-image:\n            linear-gradient(\n                180deg,\n                rgba(255,255,255,.98) 0%,\n                rgba(255,255,255,.94) 40%,\n                rgba(255,255,255,.45) 72%,\n                rgba(255,255,255,.10) 100%\n            ),\n            url(\"\/wp-content\/uploads\/2026\/09\/Hombre-elegante-junto-al-paseo-maritimo.png\");\n\n        background-position: 68% center;\n    }\n\n    .tylo-main-copy {\n        width: 100%;\n        max-width: 380px;\n\n        margin-left: 0;\n\n        padding:\n            35px\n            24px\n            50px;\n    }\n\n    .tylo-main-logo {\n        font-size: 43px;\n        margin-bottom: 28px;\n    }\n\n    .tylo-main-first {\n        font-size: 38px;\n    }\n\n    .tylo-main-number {\n        font-size: 120px;\n\n        letter-spacing: -8px;\n\n        margin-left: -4px;\n    }\n\n    .tylo-main-heading {\n        font-size: 27px;\n    }\n\n    .tylo-main-tagline {\n        font-size: 20px;\n        margin-top: 18px;\n    }\n\n    .tylo-main-date {\n        margin-top: 25px;\n        font-size: 15px;\n    }\n\n    .tylo-main-buttons {\n        flex-direction: column;\n\n        width: 100%;\n\n        margin-top: 30px;\n\n        gap: 12px;\n    }\n\n    .tylo-main-primary,\n    .tylo-main-secondary {\n        width: 100%;\n        height: 54px;\n    }\n}\n\n<\/style>\n\n\n<section class=\"tylo-main-hero\">\n\n    <div class=\"tylo-main-copy\">\n\n        <!-- LOGO TYLO -->\n        <div class=\"tylo-main-logo\">\n            Tylo\n        <\/div>\n\n\n        <!-- THE FIRST 500 -->\n\n        <div class=\"tylo-main-first\">\n            THE FIRST\n        <\/div>\n\n        <div class=\"tylo-main-number\">\n            500\n        <\/div>\n\n\n        <!-- FOUNDING DRIVER -->\n\n        <div class=\"tylo-main-heading\">\n            BECOME A TYLO<br>\n            FOUNDING DRIVER.\n        <\/div>\n\n\n        <!-- TAGLINE -->\n\n        <div class=\"tylo-main-tagline\">\n            Drive more. <strong>Keep 100%.<\/strong>\n        <\/div>\n\n\n        <!-- FECHA -->\n\n        <div class=\"tylo-main-date\">\n            Launching in the U.S. \u00b7 December 10, 2026\n        <\/div>\n\n\n        <!-- BOTONES -->\n\n        <div class=\"tylo-main-buttons\">\n\n            <a class=\"tylo-main-primary\" href=\"#tylo-registration\">\n                SECURE MY FOUNDING SPOT\n                <span class=\"arrow\">\u2192<\/span>\n            <\/a>\n\n\n            <a class=\"tylo-main-secondary\" href=\"#tylo-video\">\n                <span class=\"tylo-play\">\u25b7<\/span>\n                Watch video\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n\n<!-- =========================================================\n     TYLO \u2014 SECTION 2 \/ WHY TYLO\n     Compact benefits strip\n========================================================= -->\n\n<style>\n.tylo-section-2 {\n    width: 100%;\n    box-sizing: border-box;\n    padding: 58px 6vw 62px;\n    background: #f8f9ff;\n    text-align: center;\n}\n\n.tylo-section-2-inner {\n    max-width: 1180px;\n    margin: 0 auto;\n}\n\n\/* Small section label *\/\n.tylo-section-2-label {\n    display: inline-block;\n    margin-bottom: 34px;\n    padding: 8px 20px;\n    border-radius: 999px;\n    background: #eef1ff;\n    color: #4910ed;\n    font-size: 13px;\n    font-weight: 800;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n}\n\n\/* Benefits row *\/\n.tylo-benefits-row {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 0;\n    align-items: stretch;\n}\n\n\/* Individual benefit *\/\n.tylo-benefit {\n    padding: 8px 42px;\n    position: relative;\n}\n\n.tylo-benefit:not(:last-child)::after {\n    content: \"\";\n    position: absolute;\n    right: 0;\n    top: 18%;\n    width: 1px;\n    height: 64%;\n    background: #dfe3f2;\n}\n\n\/* Icon *\/\n.tylo-benefit-icon {\n    width: 38px;\n    height: 38px;\n    margin: 0 auto 15px;\n    border-radius: 50%;\n    background: #4910ed;\n    color: #ffffff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 19px;\n    font-weight: 800;\n    line-height: 1;\n}\n\n\/* Title *\/\n.tylo-benefit-title {\n    margin: 0;\n    color: #111735;\n    font-size: 20px;\n    line-height: 1.2;\n    font-weight: 800;\n    letter-spacing: -0.3px;\n}\n\n\/* Description *\/\n.tylo-benefit-text {\n    margin: 9px auto 0;\n    max-width: 250px;\n    color: #68708a;\n    font-size: 14px;\n    line-height: 1.5;\n    font-weight: 500;\n}\n\n\/* Tablet *\/\n@media (max-width: 800px) {\n    .tylo-section-2 {\n        padding: 48px 5vw 52px;\n    }\n\n    .tylo-benefit {\n        padding: 8px 22px;\n    }\n\n    .tylo-benefit-title {\n        font-size: 18px;\n    }\n}\n\n\/* Mobile *\/\n@media (max-width: 600px) {\n    .tylo-section-2 {\n        padding: 42px 24px 46px;\n    }\n\n    .tylo-section-2-label {\n        margin-bottom: 26px;\n        font-size: 12px;\n        padding: 7px 17px;\n    }\n\n    .tylo-benefits-row {\n        grid-template-columns: 1fr;\n        gap: 26px;\n    }\n\n    .tylo-benefit {\n        padding: 0;\n    }\n\n    .tylo-benefit:not(:last-child)::after {\n        display: none;\n    }\n\n    .tylo-benefit-icon {\n        width: 34px;\n        height: 34px;\n        font-size: 17px;\n        margin-bottom: 11px;\n    }\n\n    .tylo-benefit-title {\n        font-size: 18px;\n    }\n\n    .tylo-benefit-text {\n        font-size: 13px;\n        margin-top: 6px;\n    }\n}\n<\/style>\n\n\n<section class=\"tylo-section-2\">\n    <div class=\"tylo-section-2-inner\">\n\n        <div class=\"tylo-section-2-label\">\n            WHY TYLO\n        <\/div>\n\n        <div class=\"tylo-benefits-row\">\n\n            <!-- Benefit 1 -->\n            <div class=\"tylo-benefit\">\n\n                <div class=\"tylo-benefit-icon\">\n                    \u2713\n                <\/div>\n\n                <h3 class=\"tylo-benefit-title\">\n                    0% Commission\n                <\/h3>\n\n                <p class=\"tylo-benefit-text\">\n                    Keep more of every ride you complete.\n                <\/p>\n\n            <\/div>\n\n\n            <!-- Benefit 2 -->\n            <div class=\"tylo-benefit\">\n\n                <div class=\"tylo-benefit-icon\">\n                    \u2713\n                <\/div>\n\n                <h3 class=\"tylo-benefit-title\">\n                    Lower Fares\n                <\/h3>\n\n                <p class=\"tylo-benefit-text\">\n                    Better prices for riders without cutting driver earnings.\n                <\/p>\n\n            <\/div>\n\n\n            <!-- Benefit 3 -->\n            <div class=\"tylo-benefit\">\n\n                <div class=\"tylo-benefit-icon\">\n                    \u2713\n                <\/div>\n\n                <h3 class=\"tylo-benefit-title\">\n                    Higher Earnings\n                <\/h3>\n\n                <p class=\"tylo-benefit-text\">\n                    A smarter rideshare model built around drivers.\n                <\/p>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   TYLO \u2014 SECTION 3\n   THE TYLO DIFFERENCE\n   ========================================================= *\/\n\n.tylo-section-3 {\n    width: 100%;\n    box-sizing: border-box;\n\n    padding: 78px 5vw 82px;\n\n    background:\n        radial-gradient(\n            circle at 10% 50%,\n            rgba(73,16,237,0.045) 0%,\n            rgba(73,16,237,0) 32%\n        ),\n        radial-gradient(\n            circle at 90% 50%,\n            rgba(125,74,255,0.055) 0%,\n            rgba(125,74,255,0) 32%\n        ),\n        #fcfbff;\n\n    font-family: Arial, Helvetica, sans-serif;\n\n    color: #252d50;\n}\n\n.tylo-section-3 *,\n.tylo-section-3 *::before,\n.tylo-section-3 *::after {\n    box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   MAIN CONTAINER\n   ========================================================= *\/\n\n.tylo-s3-inner {\n    width: 100%;\n    max-width: 1120px;\n    margin: 0 auto;\n}\n\n\n\/* =========================================================\n   HEADER\n   ========================================================= *\/\n\n.tylo-s3-heading {\n    text-align: center;\n    margin-bottom: 48px;\n}\n\n.tylo-s3-eyebrow {\n    display: inline-block;\n\n    margin-bottom: 14px;\n\n    color: #4910ed;\n\n    font-size: 12px;\n    line-height: 1;\n\n    font-weight: 800;\n    letter-spacing: 2.2px;\n\n    text-transform: uppercase;\n}\n\n.tylo-s3-title {\n    margin: 0;\n\n    color: #252d50;\n\n    font-size: clamp(36px, 4vw, 50px);\n    line-height: 1.06;\n\n    font-weight: 800;\n    letter-spacing: -1.8px;\n}\n\n.tylo-s3-intro {\n    max-width: 610px;\n\n    margin: 16px auto 0;\n\n    color: #707b97;\n\n    font-size: 16px;\n    line-height: 1.5;\n\n    font-weight: 400;\n}\n\n\n\/* =========================================================\n   COMPARISON\n   ========================================================= *\/\n\n.tylo-s3-compare {\n\n    display: grid;\n\n    grid-template-columns:\n        minmax(300px, 360px)\n        100px\n        minmax(300px, 360px);\n\n    justify-content: center;\n\n    align-items: center;\n\n    column-gap: 34px;\n\n    margin: 0 auto;\n\n    width: 100%;\n}\n\n\n\/* =========================================================\n   CARDS\n   ========================================================= *\/\n\n\/*\n   IMPORTANTE:\n   Los dos recuadros tienen exactamente\n   el mismo ancho y alto.\n*\/\n\n.tylo-s3-side {\n\n    width: 360px;\n    height: 380px;\n\n    padding: 34px 36px;\n\n    border-radius: 22px;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    overflow: hidden;\n}\n\n\n\/* =========================================================\n   TRADITIONAL\n   ========================================================= *\/\n\n.tylo-s3-traditional {\n\n    background:\n        linear-gradient(\n            145deg,\n            #f7f8fc 0%,\n            #f2f4f9 100%\n        );\n\n    border: 1px solid #e3e7ef;\n\n    box-shadow:\n        0 16px 38px rgba(30,39,75,0.055);\n}\n\n\n\/* =========================================================\n   TYLO\n   ========================================================= *\/\n\n.tylo-s3-tylo {\n\n    position: relative;\n\n    background:\n        linear-gradient(\n            145deg,\n            #fbf9ff 0%,\n            #f2ebff 100%\n        );\n\n    border: 1px solid #d9ccff;\n\n    box-shadow:\n        0 16px 40px rgba(73,16,237,0.085);\n}\n\n\n\/* Decorative TYLO glow *\/\n\n.tylo-s3-tylo::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    width: 175px;\n    height: 175px;\n\n    right: -82px;\n    bottom: -88px;\n\n    border-radius: 50%;\n\n    background:\n        rgba(73,16,237,0.075);\n\n    pointer-events: none;\n}\n\n\n\/* =========================================================\n   LABEL\n   ========================================================= *\/\n\n.tylo-s3-label {\n\n    margin-bottom: 16px;\n\n    color: #68728d;\n\n    font-size: 12px;\n    line-height: 1.15;\n\n    font-weight: 800;\n\n    letter-spacing: 1.4px;\n\n    text-transform: uppercase;\n}\n\n.tylo-s3-tylo .tylo-s3-label {\n    color: #4910ed;\n}\n\n\n\/* =========================================================\n   NUMBERS\n   ========================================================= *\/\n\n.tylo-s3-number {\n\n    margin: 0;\n\n    color: #252d50;\n\n    \/*\n       45% queda SIEMPRE en una sola l\u00ednea.\n    *\/\n\n    font-size: 86px;\n\n    line-height: .9;\n\n    font-weight: 900;\n\n    letter-spacing: -4px;\n\n    white-space: nowrap;\n\n    display: block;\n}\n\n.tylo-s3-tylo .tylo-s3-number {\n    color: #4910ed;\n}\n\n\n\/* =========================================================\n   COMMISSION\n   ========================================================= *\/\n\n.tylo-s3-commission {\n\n    margin-top: 19px;\n\n    color: #252d50;\n\n    font-size: 17px;\n    line-height: 1.2;\n\n    font-weight: 800;\n}\n\n\n\/* =========================================================\n   DESCRIPTION\n   ========================================================= *\/\n\n.tylo-s3-description {\n\n    max-width: 275px;\n\n    margin: 10px 0 0;\n\n    color: #707a95;\n\n    font-size: 14px;\n    line-height: 1.5;\n\n    font-weight: 400;\n}\n\n.tylo-s3-tylo .tylo-s3-description {\n    color: #665c89;\n}\n\n\n\/* =========================================================\n   CENTER VS\n   ========================================================= *\/\n\n.tylo-s3-center {\n\n    display: flex;\n\n    flex-direction: column;\n\n    align-items: center;\n    justify-content: center;\n\n    width: 100%;\n}\n\n\n\/* VS circle *\/\n\n.tylo-s3-vs {\n\n    position: relative;\n    z-index: 3;\n\n    width: 54px;\n    height: 54px;\n\n    border-radius: 50%;\n\n    background: #252d50;\n\n    color: #ffffff;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    font-size: 11px;\n\n    font-weight: 900;\n\n    letter-spacing: .3px;\n\n    box-shadow:\n        0 9px 24px rgba(37,45,80,0.18);\n}\n\n\n\/* =========================================================\n   ARROW\n   ========================================================= *\/\n\n.tylo-s3-line {\n\n    position: relative;\n\n    width: 100%;\n\n    height: 2px;\n\n    margin-top: 18px;\n\n    background: #ddd9ef;\n}\n\n.tylo-s3-line::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    left: 0;\n    top: 0;\n\n    width: 78%;\n    height: 2px;\n\n    background:\n        linear-gradient(\n            90deg,\n            #ddd9ef 0%,\n            #8b6eed 100%\n        );\n}\n\n.tylo-s3-arrow {\n\n    position: absolute;\n\n    right: 0;\n\n    top: 50%;\n\n    width: 9px;\n    height: 9px;\n\n    border-top: 2px solid #4910ed;\n    border-right: 2px solid #4910ed;\n\n    transform:\n        translateY(-50%)\n        rotate(45deg);\n}\n\n\n\/* =========================================================\n   BOTTOM MESSAGE\n   ========================================================= *\/\n\n.tylo-s3-bottom {\n\n    margin-top: 42px;\n\n    text-align: center;\n}\n\n.tylo-s3-bottom-main {\n\n    margin: 0;\n\n    color: #252d50;\n\n    font-size: clamp(21px, 2.3vw, 28px);\n\n    line-height: 1.2;\n\n    font-weight: 800;\n\n    letter-spacing: -.5px;\n}\n\n.tylo-s3-bottom-main span {\n    color: #4910ed;\n}\n\n.tylo-s3-bottom-small {\n\n    margin: 8px 0 0;\n\n    color: #7b849c;\n\n    font-size: 14px;\n\n    line-height: 1.4;\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media (max-width: 950px) {\n\n    .tylo-section-3 {\n        padding-left: 4vw;\n        padding-right: 4vw;\n    }\n\n    .tylo-s3-compare {\n\n        grid-template-columns:\n            minmax(270px, 330px)\n            75px\n            minmax(270px, 330px);\n\n        column-gap: 18px;\n    }\n\n    .tylo-s3-side {\n\n        width: 330px;\n        height: 360px;\n\n        padding: 30px;\n    }\n\n    .tylo-s3-number {\n        font-size: 78px;\n    }\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 700px) {\n\n    .tylo-section-3 {\n\n        padding: 60px 20px 65px;\n    }\n\n    .tylo-s3-heading {\n\n        margin-bottom: 36px;\n    }\n\n    .tylo-s3-title {\n\n        font-size: 33px;\n\n        letter-spacing: -1.2px;\n    }\n\n    .tylo-s3-intro {\n\n        font-size: 15px;\n    }\n\n    .tylo-s3-compare {\n\n        display: flex;\n\n        flex-direction: column;\n\n        gap: 18px;\n    }\n\n    .tylo-s3-side {\n\n        width: 100%;\n        max-width: 360px;\n\n        height: 350px;\n\n        margin: 0 auto;\n\n        text-align: center;\n\n        padding: 28px 24px;\n    }\n\n    .tylo-s3-description {\n\n        margin-left: auto;\n        margin-right: auto;\n    }\n\n    .tylo-s3-center {\n\n        position: relative;\n\n        width: 100%;\n        height: 54px;\n    }\n\n    .tylo-s3-vs {\n\n        width: 46px;\n        height: 46px;\n\n        font-size: 10px;\n    }\n\n    .tylo-s3-line {\n\n        display: none;\n    }\n\n    .tylo-s3-bottom {\n\n        margin-top: 34px;\n    }\n\n    .tylo-s3-bottom-main {\n\n        font-size: 21px;\n    }\n}\n\n<\/style>\n\n\n<section class=\"tylo-section-3\">\n\n    <div class=\"tylo-s3-inner\">\n\n\n        <!-- HEADER -->\n\n        <div class=\"tylo-s3-heading\">\n\n            <div class=\"tylo-s3-eyebrow\">\n                THE TYLO DIFFERENCE\n            <\/div>\n\n            <h2 class=\"tylo-s3-title\">\n                More of your fare stays with you.\n            <\/h2>\n\n            <p class=\"tylo-s3-intro\">\n                The difference between a traditional rideshare model and TYLO.\n            <\/p>\n\n        <\/div>\n\n\n        <!-- COMPARISON -->\n\n        <div class=\"tylo-s3-compare\">\n\n\n            <!-- TRADITIONAL RIDESHARE -->\n\n            <div class=\"tylo-s3-side tylo-s3-traditional\">\n\n                <div class=\"tylo-s3-label\">\n                    Traditional rideshare\n                <\/div>\n\n                <div class=\"tylo-s3-number\">\n                    45%\n                <\/div>\n\n                <div class=\"tylo-s3-commission\">\n                    Commission\n                <\/div>\n\n                <p class=\"tylo-s3-description\">\n                    A significant share of the fare can go to the platform.\n                <\/p>\n\n            <\/div>\n\n\n            <!-- CENTER -->\n\n            <div class=\"tylo-s3-center\">\n\n                <div class=\"tylo-s3-vs\">\n                    VS\n                <\/div>\n\n                <div class=\"tylo-s3-line\">\n\n                    <div class=\"tylo-s3-arrow\"><\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- TYLO -->\n\n            <div class=\"tylo-s3-side tylo-s3-tylo\">\n\n                <div class=\"tylo-s3-label\">\n                    TYLO\n                <\/div>\n\n                <div class=\"tylo-s3-number\">\n                    0%\n                <\/div>\n\n                <div class=\"tylo-s3-commission\">\n                    Commission\n                <\/div>\n\n                <p class=\"tylo-s3-description\">\n                    Keep 100% of your fare.\n                <\/p>\n\n            <\/div>\n\n\n        <\/div>\n\n\n        <!-- BOTTOM MESSAGE -->\n\n        <div class=\"tylo-s3-bottom\">\n\n            <p class=\"tylo-s3-bottom-main\">\n                <span>Keep 100%.<\/span> Drive more. Earn more.\n            <\/p>\n\n            <p class=\"tylo-s3-bottom-small\">\n                That&#8217;s the TYLO difference.\n            <\/p>\n\n        <\/div>\n\n\n    <\/div>\n\n<\/section>\n\n\n\n<div id=\"tylo-earnings\">\n\n<style>\n\n\/* =========================================================\n   TYLO \u2014 SECTION 4 \/ EARNINGS CALCULATOR\n   ========================================================= *\/\n\n#tylo-earnings{\n  width:100%;\n  box-sizing:border-box;\n  font-family:inherit;\n  color:#18233d;\n  background:#ffffff;\n}\n\n#tylo-earnings *{\n  box-sizing:border-box;\n}\n\n\n\/* =========================================================\n   MAIN SECTION\n   ========================================================= *\/\n\n#tylo-earnings .te-shell{\n  width:100%;\n  max-width:1240px;\n  margin:0 auto;\n  padding:78px 42px 78px;\n\n  background:\n    radial-gradient(\n      circle at 85% 15%,\n      rgba(91,32,244,.07),\n      transparent 28%\n    ),\n    radial-gradient(\n      circle at 8% 85%,\n      rgba(91,32,244,.045),\n      transparent 30%\n    ),\n    #ffffff;\n\n  border-radius:28px;\n}\n\n\n\/* =========================================================\n   HEADING\n   ========================================================= *\/\n\n#tylo-earnings .te-heading{\n  text-align:center;\n  max-width:850px;\n  margin:0 auto 42px;\n}\n\n#tylo-earnings .te-kicker{\n  display:inline-block;\n\n  color:#5b20f4;\n\n  font-size:12px;\n  line-height:1;\n\n  letter-spacing:2.5px;\n  font-weight:800;\n\n  margin-bottom:15px;\n\n  text-transform:uppercase;\n}\n\n#tylo-earnings h2{\n  margin:0 0 15px !important;\n\n  color:#18233d;\n\n  font-size:clamp(34px,4.2vw,55px);\n  line-height:1.08;\n\n  letter-spacing:-2px;\n\n  font-weight:850;\n}\n\n#tylo-earnings h2 span{\n  color:#5b20f4;\n}\n\n#tylo-earnings .te-heading p{\n  margin:0;\n\n  color:#71809f;\n\n  font-size:16px;\n  line-height:1.6;\n}\n\n\n\/* =========================================================\n   MAIN LAYOUT\n   ========================================================= *\/\n\n#tylo-earnings .te-layout{\n  display:grid;\n\n  grid-template-columns:\n    minmax(300px,.92fr)\n    minmax(480px,1.08fr);\n\n  gap:24px;\n\n  align-items:stretch;\n}\n\n\n\/* =========================================================\n   CALCULATOR CONTROLS\n   ========================================================= *\/\n\n#tylo-earnings .te-controls{\n  background:#f8f9fd;\n\n  border:1px solid #e8ebf4;\n\n  border-radius:22px;\n\n  padding:30px 30px 27px;\n\n  box-shadow:\n    0 12px 35px rgba(25,35,61,.045);\n}\n\n#tylo-earnings .te-controls h3{\n  margin:0;\n\n  color:#18233d;\n\n  font-size:19px;\n  line-height:1.2;\n\n  font-weight:850;\n\n  letter-spacing:-.3px;\n}\n\n#tylo-earnings .te-muted{\n  margin:7px 0 28px;\n\n  color:#71809f;\n\n  font-size:13px;\n  line-height:1.5;\n}\n\n\n\/* =========================================================\n   SLIDER FIELDS\n   ========================================================= *\/\n\n#tylo-earnings .te-field{\n  padding:0 0 19px;\n\n  margin:0 0 19px;\n\n  border-bottom:1px solid #e5e8f1;\n}\n\n#tylo-earnings .te-field:last-child{\n  margin-bottom:0;\n  padding-bottom:0;\n  border-bottom:none;\n}\n\n#tylo-earnings .te-field-top{\n  display:flex;\n\n  justify-content:space-between;\n  align-items:center;\n\n  gap:12px;\n\n  margin-bottom:10px;\n}\n\n#tylo-earnings .te-field label{\n  color:#26334e;\n\n  font-size:13px;\n  line-height:1.3;\n\n  font-weight:750;\n}\n\n#tylo-earnings output{\n  min-width:58px;\n\n  padding:6px 10px;\n\n  border-radius:9px;\n\n  background:#eeeaff;\n\n  color:#5b20f4;\n\n  text-align:center;\n\n  font-size:15px;\n  line-height:1.2;\n\n  font-weight:850;\n}\n\n\n\/* =========================================================\n   RANGE SLIDERS\n   ========================================================= *\/\n\n#tylo-earnings input[type=\"range\"]{\n  -webkit-appearance:none;\n  appearance:none;\n\n  width:100%;\n  height:6px;\n\n  margin:7px 0 8px;\n  padding:0;\n\n  border-radius:10px;\n\n  background:#e5e8f1;\n\n  outline:none;\n\n  cursor:pointer;\n}\n\n#tylo-earnings input[type=\"range\"]::-webkit-slider-thumb{\n  -webkit-appearance:none;\n  appearance:none;\n\n  width:19px;\n  height:19px;\n\n  border:5px solid #5b20f4;\n\n  border-radius:50%;\n\n  background:#ffffff;\n\n  box-shadow:\n    0 2px 8px rgba(91,32,244,.22);\n}\n\n#tylo-earnings input[type=\"range\"]::-moz-range-thumb{\n  width:10px;\n  height:10px;\n\n  border:5px solid #5b20f4;\n\n  border-radius:50%;\n\n  background:#ffffff;\n\n  cursor:pointer;\n\n  box-shadow:\n    0 2px 8px rgba(91,32,244,.22);\n}\n\n#tylo-earnings .te-limits{\n  display:flex;\n\n  justify-content:space-between;\n\n  color:#98a2b7;\n\n  font-size:10px;\n  line-height:1.2;\n}\n\n\n\/* =========================================================\n   RESULTS\n   ========================================================= *\/\n\n#tylo-earnings .te-results{\n  display:grid;\n\n  grid-template-columns:1fr 1fr;\n\n  gap:16px;\n}\n\n#tylo-earnings .te-card{\n  min-width:0;\n\n  min-height:290px;\n\n  padding:25px 23px;\n\n  border-radius:20px;\n\n  background:#f7f8fc;\n\n  border:1px solid #e5e8f1;\n\n  box-shadow:\n    0 12px 35px rgba(25,35,61,.045);\n}\n\n#tylo-earnings .te-card.tylo{\n  background:\n    linear-gradient(\n      145deg,\n      #ffffff 0%,\n      #f5f0ff 100%\n    );\n\n  border:1.5px solid #cfc0ff;\n\n  box-shadow:\n    0 14px 38px rgba(91,32,244,.09);\n}\n\n\n\/* =========================================================\n   TAGS\n   ========================================================= *\/\n\n#tylo-earnings .te-tag{\n  display:inline-block;\n\n  padding:7px 10px;\n\n  border-radius:8px;\n\n  background:#e9edf5;\n\n  color:#586680;\n\n  font-size:10px;\n  line-height:1;\n\n  letter-spacing:.7px;\n\n  font-weight:850;\n}\n\n#tylo-earnings .tylo .te-tag{\n  background:#ebe4ff;\n\n  color:#5b20f4;\n}\n\n\n\/* =========================================================\n   MAIN NUMBERS\n   ========================================================= *\/\n\n#tylo-earnings .te-number{\n  margin:20px 0 3px;\n\n  color:#18233d;\n\n  font-size:clamp(30px,3.3vw,46px);\n  line-height:1.05;\n\n  letter-spacing:-1.8px;\n\n  font-weight:900;\n}\n\n#tylo-earnings .tylo .te-number{\n  color:#5b20f4;\n}\n\n#tylo-earnings .te-number-caption{\n  margin:0 0 19px;\n\n  color:#71809f;\n\n  font-size:11px;\n  line-height:1.4;\n\n  font-weight:700;\n}\n\n\n\/* =========================================================\n   RESULT DETAILS\n   ========================================================= *\/\n\n#tylo-earnings .te-detail{\n  display:flex;\n\n  justify-content:space-between;\n  align-items:center;\n\n  gap:12px;\n\n  padding:10px 0;\n\n  border-top:1px solid #e4e7ef;\n\n  color:#71809f;\n\n  font-size:11px;\n  line-height:1.3;\n}\n\n#tylo-earnings .te-detail strong{\n  color:#27344f;\n\n  text-align:right;\n\n  font-weight:800;\n}\n\n#tylo-earnings .te-detail .red{\n  color:#dc5368;\n}\n\n#tylo-earnings .te-detail .green{\n  color:#18a67d;\n}\n\n\n\/* =========================================================\n   EXTRA EARNINGS BOX\n   REDUCED ~15%\n   ========================================================= *\/\n\n#tylo-earnings .te-difference{\n  grid-column:1\/-1;\n\n  padding:17px 22px;\n\n  border:1px solid #d8ccff;\n\n  border-radius:17px;\n\n  background:\n    radial-gradient(\n      circle at 92% 30%,\n      rgba(91,32,244,.10),\n      transparent 35%\n    ),\n    linear-gradient(\n      135deg,\n      #faf9ff,\n      #f2edff\n    );\n\n  text-align:center;\n}\n\n#tylo-earnings .te-difference small{\n  display:block;\n\n  color:#6d5aaf;\n\n  font-size:9px;\n  line-height:1.3;\n\n  letter-spacing:1.2px;\n\n  font-weight:850;\n}\n\n#tylo-earnings .te-difference .te-extra{\n  margin:5px 0 3px;\n\n  color:#5b20f4;\n\n  font-size:clamp(27px,3.2vw,41px);\n  line-height:1.05;\n\n  letter-spacing:-1.4px;\n\n  font-weight:900;\n}\n\n#tylo-earnings .te-difference p{\n  margin:0;\n\n  color:#71809f;\n\n  font-size:11px;\n  line-height:1.45;\n}\n\n#tylo-earnings .te-difference p strong{\n  color:#26334e;\n}\n\n\n\/* =========================================================\n   CTA\n   MUCH SMALLER\n   ========================================================= *\/\n\n#tylo-earnings .te-cta{\n  grid-column:1\/-1;\n\n  display:flex;\n\n  width:340px;\n  max-width:100%;\n\n  min-height:48px;\n\n  margin:0 auto;\n\n  padding:13px 22px;\n\n  align-items:center;\n  justify-content:center;\n\n  border-radius:11px;\n\n  background:#5b20f4;\n\n  color:#ffffff !important;\n\n  text-align:center;\n\n  text-decoration:none !important;\n\n  font-size:12px;\n  line-height:1.2;\n\n  font-weight:850;\n\n  box-shadow:\n    0 9px 20px rgba(91,32,244,.17);\n\n  transition:\n    transform .2s ease,\n    box-shadow .2s ease;\n}\n\n#tylo-earnings .te-cta:hover{\n  transform:translateY(-1px);\n\n  box-shadow:\n    0 12px 24px rgba(91,32,244,.22);\n}\n\n\n\/* =========================================================\n   DISCLAIMER\n   ========================================================= *\/\n\n#tylo-earnings .te-disclaimer{\n  max-width:820px;\n\n  margin:20px auto 0;\n\n  color:#98a2b7;\n\n  font-size:10px;\n  line-height:1.6;\n\n  text-align:center;\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media(max-width:900px){\n\n  #tylo-earnings .te-shell{\n    padding:62px 26px 65px;\n  }\n\n  #tylo-earnings .te-layout{\n    grid-template-columns:1fr;\n  }\n\n  #tylo-earnings .te-controls{\n    padding:27px;\n  }\n\n  #tylo-earnings .te-number{\n    font-size:40px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media(max-width:620px){\n\n  #tylo-earnings .te-shell{\n    padding:48px 16px 52px;\n\n    border-radius:18px;\n  }\n\n  #tylo-earnings .te-heading{\n    margin-bottom:30px;\n  }\n\n  #tylo-earnings h2{\n    font-size:34px;\n\n    letter-spacing:-1.2px;\n  }\n\n  #tylo-earnings .te-heading p{\n    font-size:14px;\n  }\n\n  #tylo-earnings .te-controls{\n    padding:23px 20px;\n  }\n\n  #tylo-earnings .te-results{\n    grid-template-columns:1fr;\n  }\n\n  #tylo-earnings .te-card{\n    min-height:auto;\n  }\n\n  #tylo-earnings .te-difference,\n  #tylo-earnings .te-cta{\n    grid-column:1;\n  }\n\n  #tylo-earnings .te-cta{\n    width:100%;\n  }\n\n}\n\n<\/style>\n\n\n<section class=\"te-shell\">\n\n\n  <!-- =====================================================\n       HEADING\n       ===================================================== -->\n\n  <header class=\"te-heading\">\n\n    <div class=\"te-kicker\">\n      SEE THE DIFFERENCE\n    <\/div>\n\n    <h2>\n      Same rides. <span>More money<\/span> in your pocket.\n    <\/h2>\n\n    <p>\n      Adjust your driving activity and discover how much more you could keep with TYLO.\n    <\/p>\n\n  <\/header>\n\n\n  <!-- =====================================================\n       CALCULATOR + RESULTS\n       ===================================================== -->\n\n  <div class=\"te-layout\">\n\n\n    <!-- ===================================================\n         CALCULATOR\n         =================================================== -->\n\n    <div class=\"te-controls\">\n\n      <h3>\n        YOUR EARNINGS SIMULATOR\n      <\/h3>\n\n      <p class=\"te-muted\">\n        Move the sliders to customize your driving activity.\n      <\/p>\n\n\n      <!-- RIDES PER DAY -->\n\n      <div class=\"te-field\">\n\n        <div class=\"te-field-top\">\n\n          <label for=\"te-rides\">\n            Rides per day\n          <\/label>\n\n          <output id=\"te-rides-value\">\n            16\n          <\/output>\n\n        <\/div>\n\n        <input id=\"te-rides\" type=\"range\" min=\"5\" max=\"30\" value=\"16\" step=\"1\">\n\n        <div class=\"te-limits\">\n          <span>5 rides<\/span>\n          <span>30 rides<\/span>\n        <\/div>\n\n      <\/div>\n\n\n      <!-- AVERAGE FARE -->\n\n      <div class=\"te-field\">\n\n        <div class=\"te-field-top\">\n\n          <label for=\"te-fare\">\n            Average fare per ride\n          <\/label>\n\n          <output id=\"te-fare-value\">\n            $17\n          <\/output>\n\n        <\/div>\n\n        <input id=\"te-fare\" type=\"range\" min=\"10\" max=\"40\" value=\"17\" step=\"1\">\n\n        <div class=\"te-limits\">\n          <span>$10 USD<\/span>\n          <span>$40 USD<\/span>\n        <\/div>\n\n      <\/div>\n\n\n      <!-- WORKING DAYS -->\n\n      <div class=\"te-field\">\n\n        <div class=\"te-field-top\">\n\n          <label for=\"te-days\">\n            Working days per month\n          <\/label>\n\n          <output id=\"te-days-value\">\n            24\n          <\/output>\n\n        <\/div>\n\n        <input id=\"te-days\" type=\"range\" min=\"12\" max=\"30\" value=\"24\" step=\"1\">\n\n        <div class=\"te-limits\">\n          <span>12 days<\/span>\n          <span>30 days<\/span>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- ===================================================\n         RESULTS\n         =================================================== -->\n\n    <div class=\"te-results\">\n\n\n      <!-- TRADITIONAL APPS -->\n\n      <article class=\"te-card\">\n\n        <span class=\"te-tag\">\n          TRADITIONAL APPS\n        <\/span>\n\n        <div class=\"te-number\" id=\"te-other-net\">\n          $3,590\n        <\/div>\n\n        <div class=\"te-number-caption\">\n          Estimated monthly earnings\n        <\/div>\n\n\n        <div class=\"te-detail\">\n\n          <span>\n            Total fares\n          <\/span>\n\n          <strong id=\"te-other-gross\">\n            $6,528\n          <\/strong>\n\n        <\/div>\n\n\n        <div class=\"te-detail\">\n\n          <span>\n            Commission retained\n          <\/span>\n\n          <strong class=\"red\" id=\"te-other-fee\">\n            \u2212$2,938\n          <\/strong>\n\n        <\/div>\n\n\n        <div class=\"te-detail\">\n\n          <span>\n            Driver keeps\n          <\/span>\n\n          <strong id=\"te-other-percent\">\n            55% of fares\n          <\/strong>\n\n        <\/div>\n\n      <\/article>\n\n\n      <!-- =================================================\n           TYLO\n           ================================================= -->\n\n      <article class=\"te-card tylo\">\n\n        <span class=\"te-tag\">\n          TYLO MODEL\n        <\/span>\n\n        <div class=\"te-number\" id=\"te-tylo-net\">\n          $6,389\n        <\/div>\n\n        <div class=\"te-number-caption\">\n          Estimated monthly earnings\n        <\/div>\n\n\n        <div class=\"te-detail\">\n\n          <span>\n            Total fares\n          <\/span>\n\n          <strong id=\"te-tylo-gross\">\n            $6,528\n          <\/strong>\n\n        <\/div>\n\n\n        <div class=\"te-detail\">\n\n          <span>\n            Ride commission\n          <\/span>\n\n          <strong class=\"green\">\n            $0\n          <\/strong>\n\n        <\/div>\n\n\n        <div class=\"te-detail\">\n\n          <span>\n            Membership\n          <\/span>\n\n          <strong>\n            \u2212$139\n          <\/strong>\n\n        <\/div>\n\n      <\/article>\n\n\n      <!-- =================================================\n           EXTRA EARNINGS\n           ================================================= -->\n\n      <div class=\"te-difference\" aria-live=\"polite\">\n\n        <small>\n          YOUR POTENTIAL EXTRA EARNINGS WITH TYLO\n        <\/small>\n\n        <div class=\"te-extra\" id=\"te-extra\">\n          +$2,799 \/ month\n        <\/div>\n\n        <p>\n          Estimated annual difference:\n          <strong id=\"te-annual\">\n            +$33,583\n          <\/strong>\n        <\/p>\n\n      <\/div>\n\n\n      <!-- =================================================\n           CTA\n           ================================================= -->\n\n      <a class=\"te-cta\" href=\"#tylo-registration\">\n        BECOME A FOUNDING DRIVER &nbsp; \u2192\n      <\/a>\n\n\n    <\/div>\n\n  <\/div>\n\n\n  <!-- =====================================================\n       DISCLAIMER\n       ===================================================== -->\n\n  <p class=\"te-disclaimer\">\n    Illustrative comparison using identical gross fares and a\n    45% competitor commission. Figures exclude fuel, insurance,\n    taxes and other operating expenses. Actual earnings vary.\n    TYLO membership price shown is $139\/month.\n  <\/p>\n\n\n<\/section>\n\n\n<script>\n\n(function(){\n\n  function initTyloCalculator(){\n\n    const root =\n      document.getElementById('tylo-earnings');\n\n    if(\n      !root ||\n      root.dataset.initialized === 'yes'\n    ){\n      return;\n    }\n\n    root.dataset.initialized = 'yes';\n\n\n    function get(id){\n\n      return root.querySelector('#' + id);\n\n    }\n\n\n    function fmt(number){\n\n      return Math\n        .round(Math.abs(number))\n        .toLocaleString('en-US');\n\n    }\n\n\n    \/*\n      TYLO STANDARD MEMBERSHIP\n    *\/\n\n    const membership = 139;\n\n\n    \/*\n      FIXED COMPETITOR COMMISSION\n\n      We keep 45% internally for the comparison,\n      but the user no longer sees or controls this.\n    *\/\n\n    const competitorCommission = 45;\n\n\n    \/*\n      SLIDERS\n    *\/\n\n    const ranges = [\n      'rides',\n      'fare',\n      'days'\n    ];\n\n\n    function update(){\n\n      const rides =\n        Number(\n          get('te-rides').value\n        );\n\n\n      const fare =\n        Number(\n          get('te-fare').value\n        );\n\n\n      const days =\n        Number(\n          get('te-days').value\n        );\n\n\n      \/*\n        DISPLAY VALUES\n      *\/\n\n      get('te-rides-value').textContent =\n        rides;\n\n\n      get('te-fare-value').textContent =\n        '$' + fare;\n\n\n      get('te-days-value').textContent =\n        days;\n\n\n      \/*\n        TOTAL MONTHLY FARES\n      *\/\n\n      const gross =\n        rides *\n        fare *\n        days;\n\n\n      \/*\n        TRADITIONAL APPS\n\n        Fixed 45% commission.\n      *\/\n\n      const competitorFee =\n        gross *\n        competitorCommission \/\n        100;\n\n\n      const competitorNet =\n        gross -\n        competitorFee;\n\n\n      \/*\n        TYLO\n\n        0% ride commission\n        minus $139 membership\n      *\/\n\n      const tyloNet =\n        gross -\n        membership;\n\n\n      \/*\n        DIFFERENCE\n      *\/\n\n      const difference =\n        tyloNet -\n        competitorNet;\n\n\n      \/*\n        TRADITIONAL RESULTS\n      *\/\n\n      get('te-other-net').textContent =\n        '$' +\n        fmt(competitorNet);\n\n\n      get('te-other-gross').textContent =\n        '$' +\n        fmt(gross);\n\n\n      get('te-other-fee').textContent =\n        '\u2212$' +\n        fmt(competitorFee);\n\n\n      get('te-other-percent').textContent =\n        '55% of fares';\n\n\n      \/*\n        TYLO RESULTS\n      *\/\n\n      get('te-tylo-net').textContent =\n        '$' +\n        fmt(tyloNet);\n\n\n      get('te-tylo-gross').textContent =\n        '$' +\n        fmt(gross);\n\n\n      \/*\n        DIFFERENCE\n      *\/\n\n      function signed(number){\n\n        return (\n          number >= 0\n            ? '+'\n            : '\u2212'\n        )\n        +\n        '$'\n        +\n        fmt(number);\n\n      }\n\n\n      get('te-extra').textContent =\n        signed(difference) +\n        ' \/ month';\n\n\n      get('te-annual').textContent =\n        signed(difference * 12);\n\n\n      \/*\n        SLIDER PROGRESS\n      *\/\n\n      ranges.forEach(function(name){\n\n        const input =\n          get('te-' + name);\n\n\n        const progress =\n          (\n            Number(input.value) -\n            Number(input.min)\n          )\n          \/\n          (\n            Number(input.max) -\n            Number(input.min)\n          )\n          *\n          100;\n\n\n        input.style.background =\n          'linear-gradient(to right,#5b20f4 ' +\n          progress +\n          '%,#e5e8f1 ' +\n          progress +\n          '%)';\n\n      });\n\n    }\n\n\n    \/*\n      EVENTS\n    *\/\n\n    ranges.forEach(function(name){\n\n      get('te-' + name)\n        .addEventListener(\n          'input',\n          update\n        );\n\n    });\n\n\n    \/*\n      INITIAL CALCULATION\n    *\/\n\n    update();\n\n  }\n\n\n  if(\n    document.readyState === 'loading'\n  ){\n\n    document.addEventListener(\n      'DOMContentLoaded',\n      initTyloCalculator\n    );\n\n  }else{\n\n    initTyloCalculator();\n\n  }\n\n})();\n\n<\/script>\n\n<\/div>\n\n\n\n<div id=\"tylo-section-5\">\n\n<style>\n\n\/* =========================================================\n   TYLO \u2014 SECTION 5\n   APP EXPERIENCE \/ MOVING MOCKUPS\n   ========================================================= *\/\n\n#tylo-section-5{\n  width:100%;\n  box-sizing:border-box;\n  background:#ffffff;\n  color:#18233d;\n  overflow:hidden;\n  font-family:inherit;\n}\n\n#tylo-section-5 *{\n  box-sizing:border-box;\n}\n\n\n\/* =========================================================\n   MAIN SECTION\n   ========================================================= *\/\n\n#tylo-section-5 .s5-wrap{\n  width:100%;\n  max-width:1240px;\n\n  margin:0 auto;\n\n  padding:86px 38px 82px;\n\n  position:relative;\n\n  text-align:center;\n\n  background:\n    radial-gradient(\n      circle at 50% 48%,\n      rgba(91,32,244,.075),\n      transparent 32%\n    ),\n    radial-gradient(\n      circle at 8% 20%,\n      rgba(91,32,244,.035),\n      transparent 24%\n    ),\n    #ffffff;\n\n  border-radius:28px;\n}\n\n\n\/* =========================================================\n   HEADER\n   ========================================================= *\/\n\n#tylo-section-5 .s5-kicker{\n  display:inline-block;\n\n  margin-bottom:14px;\n\n  color:#5b20f4;\n\n  font-size:12px;\n  line-height:1;\n\n  letter-spacing:2.4px;\n\n  font-weight:850;\n\n  text-transform:uppercase;\n}\n\n#tylo-section-5 h2{\n  margin:0 auto 15px !important;\n\n  max-width:820px;\n\n  color:#18233d;\n\n  font-size:clamp(36px,4.5vw,58px);\n  line-height:1.06;\n\n  letter-spacing:-2.3px;\n\n  font-weight:850;\n}\n\n#tylo-section-5 h2 span{\n  color:#5b20f4;\n}\n\n#tylo-section-5 .s5-subtitle{\n  max-width:650px;\n\n  margin:0 auto;\n\n  color:#71809f;\n\n  font-size:16px;\n  line-height:1.6;\n\n  font-weight:500;\n}\n\n\n\/* =========================================================\n   MOCKUP STAGE\n   ========================================================= *\/\n\n#tylo-section-5 .s5-stage{\n\n  position:relative;\n\n  width:100%;\n  max-width:1040px;\n\n  height:575px;\n\n  margin:48px auto 0;\n\n  display:flex;\n\n  align-items:flex-end;\n\n  justify-content:center;\n\n  perspective:1400px;\n\n}\n\n\n\/* =========================================================\n   MOCKUP ITEMS\n   ========================================================= *\/\n\n#tylo-section-5 .s5-phone{\n\n  position:absolute;\n\n  bottom:0;\n\n  width:310px;\n\n  max-width:31%;\n\n  opacity:0;\n\n  transform-style:preserve-3d;\n\n  transition:\n    opacity .9s ease,\n    transform 1s cubic-bezier(.2,.75,.2,1);\n\n  will-change:\n    transform,\n    opacity;\n\n  filter:\n    drop-shadow(\n      0 24px 30px rgba(24,35,61,.13)\n    );\n}\n\n\n\/* LEFT *\/\n\n#tylo-section-5 .s5-phone.left{\n\n  left:10%;\n\n  transform:\n    translate3d(-55px,80px,0)\n    rotateY(14deg)\n    rotateZ(-5deg)\n    scale(.88);\n\n  z-index:2;\n}\n\n\n\/* CENTER *\/\n\n#tylo-section-5 .s5-phone.center{\n\n  left:50%;\n\n  transform:\n    translate3d(-50%,90px,60px)\n    rotateY(0deg)\n    rotateZ(0deg)\n    scale(.95);\n\n  z-index:4;\n\n  filter:\n    drop-shadow(\n      0 32px 42px rgba(91,32,244,.18)\n    );\n}\n\n\n\/* RIGHT *\/\n\n#tylo-section-5 .s5-phone.right{\n\n  right:10%;\n\n  transform:\n    translate3d(55px,80px,0)\n    rotateY(-14deg)\n    rotateZ(5deg)\n    scale(.88);\n\n  z-index:2;\n}\n\n\n\/* =========================================================\n   ACTIVE \/ REVEALED STATE\n   ========================================================= *\/\n\n#tylo-section-5.s5-visible .s5-phone{\n  opacity:1;\n}\n\n#tylo-section-5.s5-visible .s5-phone.left{\n\n  transform:\n    translate3d(-25px,0,0)\n    rotateY(10deg)\n    rotateZ(-4deg)\n    scale(.88);\n}\n\n#tylo-section-5.s5-visible .s5-phone.center{\n\n  transform:\n    translate3d(-50%,0,60px)\n    rotateY(0deg)\n    rotateZ(0deg)\n    scale(.95);\n}\n\n#tylo-section-5.s5-visible .s5-phone.right{\n\n  transform:\n    translate3d(25px,0,0)\n    rotateY(-10deg)\n    rotateZ(4deg)\n    scale(.88);\n}\n\n\n\/* =========================================================\n   SUBTLE FLOATING ANIMATION\n   ========================================================= *\/\n\n@keyframes tyloFloatLeft{\n\n  0%,100%{\n    margin-bottom:0;\n  }\n\n  50%{\n    margin-bottom:8px;\n  }\n\n}\n\n@keyframes tyloFloatCenter{\n\n  0%,100%{\n    margin-bottom:0;\n  }\n\n  50%{\n    margin-bottom:12px;\n  }\n\n}\n\n@keyframes tyloFloatRight{\n\n  0%,100%{\n    margin-bottom:0;\n  }\n\n  50%{\n    margin-bottom:7px;\n  }\n\n}\n\n#tylo-section-5.s5-visible .s5-phone.left{\n  animation:\n    tyloFloatLeft 5.5s ease-in-out infinite;\n}\n\n#tylo-section-5.s5-visible .s5-phone.center{\n  animation:\n    tyloFloatCenter 5.8s ease-in-out infinite;\n}\n\n#tylo-section-5.s5-visible .s5-phone.right{\n  animation:\n    tyloFloatRight 5.3s ease-in-out infinite;\n}\n\n\n\/* =========================================================\n   BOTTOM MESSAGE\n   ========================================================= *\/\n\n#tylo-section-5 .s5-bottom{\n\n  position:relative;\n\n  z-index:10;\n\n  margin:4px auto 0;\n\n  max-width:650px;\n\n  opacity:0;\n\n  transform:translateY(18px);\n\n  transition:\n    opacity .8s ease .35s,\n    transform .8s ease .35s;\n}\n\n#tylo-section-5.s5-visible .s5-bottom{\n\n  opacity:1;\n\n  transform:translateY(0);\n\n}\n\n#tylo-section-5 .s5-bottom strong{\n\n  color:#5b20f4;\n\n  font-size:18px;\n\n  font-weight:850;\n\n}\n\n#tylo-section-5 .s5-bottom span{\n\n  color:#18233d;\n\n  font-size:18px;\n\n  font-weight:750;\n\n}\n\n\n\/* =========================================================\n   DECORATIVE PURPLE GLOW\n   ========================================================= *\/\n\n#tylo-section-5 .s5-glow{\n\n  position:absolute;\n\n  left:50%;\n  bottom:40px;\n\n  width:420px;\n  height:120px;\n\n  transform:translateX(-50%);\n\n  background:\n    radial-gradient(\n      ellipse,\n      rgba(91,32,244,.13),\n      rgba(91,32,244,0) 70%\n    );\n\n  filter:blur(8px);\n\n  pointer-events:none;\n\n  z-index:0;\n}\n\n\n\/* =========================================================\n   MOBILE \/ TABLET\n   ========================================================= *\/\n\n@media(max-width:900px){\n\n  #tylo-section-5 .s5-wrap{\n\n    padding:70px 25px 70px;\n\n  }\n\n  #tylo-section-5 .s5-stage{\n\n    height:510px;\n\n  }\n\n  #tylo-section-5 .s5-phone{\n\n    width:270px;\n\n  }\n\n  #tylo-section-5 .s5-phone.left{\n    left:4%;\n  }\n\n  #tylo-section-5 .s5-phone.right{\n    right:4%;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media(max-width:620px){\n\n  #tylo-section-5 .s5-wrap{\n\n    padding:58px 16px 60px;\n\n    border-radius:20px;\n\n  }\n\n  #tylo-section-5 h2{\n\n    font-size:35px;\n\n    letter-spacing:-1.4px;\n\n  }\n\n  #tylo-section-5 .s5-subtitle{\n\n    font-size:14px;\n\n  }\n\n  #tylo-section-5 .s5-stage{\n\n    height:690px;\n\n    margin-top:36px;\n\n    display:block;\n\n  }\n\n  #tylo-section-5 .s5-phone{\n\n    position:absolute;\n\n    width:225px;\n\n    max-width:none;\n\n    left:50% !important;\n    right:auto !important;\n\n  }\n\n  #tylo-section-5 .s5-phone.left{\n\n    bottom:245px;\n\n    transform:\n      translate3d(-78%,40px,0)\n      rotateY(8deg)\n      rotateZ(-4deg)\n      scale(.82);\n\n    z-index:2;\n\n  }\n\n  #tylo-section-5 .s5-phone.center{\n\n    bottom:70px;\n\n    transform:\n      translate3d(-50%,50px,50px)\n      rotateY(0deg)\n      rotateZ(0deg)\n      scale(.88);\n\n    z-index:4;\n\n  }\n\n  #tylo-section-5 .s5-phone.right{\n\n    bottom:245px;\n\n    transform:\n      translate3d(-22%,40px,0)\n      rotateY(-8deg)\n      rotateZ(4deg)\n      scale(.82);\n\n    z-index:2;\n\n  }\n\n  #tylo-section-5.s5-visible .s5-phone.left{\n\n    transform:\n      translate3d(-78%,0,0)\n      rotateY(8deg)\n      rotateZ(-4deg)\n      scale(.82);\n\n  }\n\n  #tylo-section-5.s5-visible .s5-phone.center{\n\n    transform:\n      translate3d(-50%,0,50px)\n      rotateY(0deg)\n      rotateZ(0deg)\n      scale(.88);\n\n  }\n\n  #tylo-section-5.s5-visible .s5-phone.right{\n\n    transform:\n      translate3d(-22%,0,0)\n      rotateY(-8deg)\n      rotateZ(4deg)\n      scale(.82);\n\n  }\n\n  #tylo-section-5 .s5-bottom{\n\n    margin-top:0;\n\n  }\n\n  #tylo-section-5 .s5-bottom strong,\n  #tylo-section-5 .s5-bottom span{\n\n    font-size:16px;\n\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n   ========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n  #tylo-section-5 .s5-phone,\n  #tylo-section-5 .s5-bottom{\n\n    transition:none !important;\n\n  }\n\n  #tylo-section-5.s5-visible .s5-phone{\n\n    animation:none !important;\n\n  }\n\n}\n\n<\/style>\n\n\n<section class=\"s5-wrap\">\n\n\n  <!-- =====================================================\n       HEADER\n       ===================================================== -->\n\n  <div class=\"s5-kicker\">\n    THE TYLO EXPERIENCE\n  <\/div>\n\n  <h2>\n    Everything you need.<br>\n    <span>Right at your fingertips.<\/span>\n  <\/h2>\n\n  <p class=\"s5-subtitle\">\n    A simpler way to drive, manage your rides and stay in control.\n  <\/p>\n\n\n  <!-- =====================================================\n       MOCKUPS\n       ===================================================== -->\n\n  <div class=\"s5-stage\">\n\n    <div class=\"s5-glow\"><\/div>\n\n\n    <!-- LEFT MOCKUP -->\n\n    <img decoding=\"async\"\n      class=\"s5-phone left\"\n      src=\"https:\/\/sfo.mra.temporary.site\/website_d4f57039\/wp-content\/uploads\/2026\/09\/Imagen-de-ChatGPT-29-sept-2026-10_03_47-p.m.png\"\n      alt=\"TYLO driver app\"\n      loading=\"lazy\"\n    >\n\n\n    <!-- CENTER MOCKUP -->\n\n    <img decoding=\"async\"\n      class=\"s5-phone center\"\n      src=\"https:\/\/sfo.mra.temporary.site\/website_d4f57039\/wp-content\/uploads\/2026\/09\/Imagen-de-ChatGPT-29-sept-2026-10_00_00-p.m.png\"\n      alt=\"TYLO app experience\"\n      loading=\"lazy\"\n    >\n\n\n    <!-- RIGHT MOCKUP -->\n\n    <img decoding=\"async\"\n      class=\"s5-phone right\"\n      src=\"https:\/\/sfo.mra.temporary.site\/website_d4f57039\/wp-content\/uploads\/2026\/09\/Imagen-de-ChatGPT-29-sept-2026-09_55_49-p.m.png\"\n      alt=\"TYLO rideshare app\"\n      loading=\"lazy\"\n    >\n\n  <\/div>\n\n\n  <!-- =====================================================\n       BOTTOM MESSAGE\n       ===================================================== -->\n\n  <div class=\"s5-bottom\">\n\n    <span>\n      Built around the driver.\n    <\/span>\n\n    <strong>\n      Designed for the way you move.\n    <\/strong>\n\n  <\/div>\n\n\n<\/section>\n\n\n<script>\n\n(function(){\n\n  function initTyloSection5(){\n\n    const section =\n      document.getElementById('tylo-section-5');\n\n    if(!section) return;\n\n    if(section.dataset.ready === 'yes') return;\n\n    section.dataset.ready = 'yes';\n\n\n    \/* =====================================================\n       SCROLL REVEAL\n       ===================================================== *\/\n\n    const observer =\n      new IntersectionObserver(\n        function(entries){\n\n          entries.forEach(function(entry){\n\n            if(entry.isIntersecting){\n\n              section.classList.add('s5-visible');\n\n              observer.unobserve(section);\n\n            }\n\n          });\n\n        },\n        {\n          threshold:.18\n        }\n      );\n\n\n    observer.observe(section);\n\n\n    \/* =====================================================\n       SUBTLE MOUSE MOVEMENT\n       ===================================================== *\/\n\n    if(\n      window.matchMedia(\n        '(hover:hover) and (pointer:fine)'\n      ).matches\n    ){\n\n      const phones =\n        section.querySelectorAll('.s5-phone');\n\n\n      section.addEventListener(\n        'mousemove',\n        function(event){\n\n          const rect =\n            section.getBoundingClientRect();\n\n\n          const x =\n            (\n              event.clientX -\n              rect.left\n            ) \/\n            rect.width -\n            .5;\n\n\n          const y =\n            (\n              event.clientY -\n              rect.top\n            ) \/\n            rect.height -\n            .5;\n\n\n          phones.forEach(function(phone){\n\n            const depth =\n              phone.classList.contains('center')\n                ? 7\n                : 4;\n\n\n            const moveX =\n              x * depth;\n\n\n            const moveY =\n              y * depth;\n\n\n            phone.style.marginLeft =\n              moveX + 'px';\n\n            phone.style.marginTop =\n              moveY + 'px';\n\n          });\n\n        }\n      );\n\n\n      section.addEventListener(\n        'mouseleave',\n        function(){\n\n          phones.forEach(function(phone){\n\n            phone.style.marginLeft = '';\n            phone.style.marginTop = '';\n\n          });\n\n        }\n      );\n\n    }\n\n  }\n\n\n  if(\n    document.readyState === 'loading'\n  ){\n\n    document.addEventListener(\n      'DOMContentLoaded',\n      initTyloSection5\n    );\n\n  }else{\n\n    initTyloSection5();\n\n  }\n\n})();\n\n<\/script>\n\n<\/div>\n\n\n\n<section class=\"tylo-section6\">\n\n  <div class=\"tylo-s6-inner\">\n\n    <!-- HEADER -->\n    <div class=\"tylo-s6-header\">\n      <div class=\"tylo-s6-kicker\">FOUNDING DRIVER OFFER<\/div>\n\n      <h2>\n        Two months of Premium benefits.\n        <span>Just $59.<\/span>\n      <\/h2>\n\n      <p class=\"tylo-s6-subtitle\">\n        A one-time founding offer for the first 500 drivers,\n        starting when TYLO launches.\n      <\/p>\n    <\/div>\n\n\n    <!-- MAIN CONTENT -->\n    <div class=\"tylo-s6-content\">\n\n      <!-- OFFER CARD -->\n      <div class=\"tylo-s6-offer\">\n\n        <div class=\"tylo-s6-offer-label\">\n          FOUNDING DRIVER\n        <\/div>\n\n        <div class=\"tylo-s6-price\">\n          <span class=\"tylo-dollar\">$<\/span>59\n        <\/div>\n\n        <div class=\"tylo-s6-period\">\n          FOR YOUR FIRST 2 MONTHS\n        <\/div>\n\n        <div class=\"tylo-s6-launch\">\n          Starting when TYLO launches\n        <\/div>\n\n        <div class=\"tylo-s6-value\">\n          <span>2-month Premium value<\/span>\n          <strong>$358<\/strong>\n        <\/div>\n\n        <div class=\"tylo-s6-saving\">\n          SAVE $299 \u00b7 83% OFF\n        <\/div>\n\n      <\/div>\n\n\n      <!-- BENEFITS -->\n      <div class=\"tylo-s6-benefits\">\n\n        <div class=\"tylo-s6-benefits-title\">\n          YOUR FOUNDING DRIVER BENEFITS\n        <\/div>\n\n        <div class=\"tylo-s6-benefit\">\n          <div class=\"tylo-s6-check\">\u2713<\/div>\n          <div>\n            <strong>2 months of membership for just $59<\/strong>\n            <p>\n              Your Founding Driver membership begins when TYLO launches.\n            <\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"tylo-s6-benefit\">\n          <div class=\"tylo-s6-check\">\u2713<\/div>\n          <div>\n            <strong>All Premium benefits for 2 months<\/strong>\n            <p>\n              Enjoy the full Premium experience during your first two months.\n            <\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"tylo-s6-benefit\">\n          <div class=\"tylo-s6-check\">\u2713<\/div>\n          <div>\n            <strong>Priority support for Founding Drivers<\/strong>\n            <p>\n              Get priority assistance during the TYLO launch period.\n            <\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"tylo-s6-benefit\">\n          <div class=\"tylo-s6-check\">\u2713<\/div>\n          <div>\n            <strong>Founding Driver status<\/strong>\n            <p>\n              Join the first 500 drivers shaping the TYLO launch.\n            <\/p>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- FUTURE MEMBERSHIPS -->\n    <div class=\"tylo-s6-future\">\n\n      <div class=\"tylo-s6-future-label\">\n        AFTER THE FOUNDING OFFER\n      <\/div>\n\n      <div class=\"tylo-s6-plans\">\n\n        <div class=\"tylo-s6-plan\">\n          <span>WEEKLY<\/span>\n          <strong>$45<\/strong>\n          <small>\/ week<\/small>\n        <\/div>\n\n        <div class=\"tylo-s6-divider\"><\/div>\n\n        <div class=\"tylo-s6-plan\">\n          <span>STANDARD<\/span>\n          <strong>$139<\/strong>\n          <small>\/ month<\/small>\n        <\/div>\n\n        <div class=\"tylo-s6-divider\"><\/div>\n\n        <div class=\"tylo-s6-plan premium\">\n          <span>PREMIUM<\/span>\n          <strong>$179<\/strong>\n          <small>\/ month<\/small>\n        <\/div>\n\n      <\/div>\n\n      <p class=\"tylo-s6-future-note\">\n        Premium membership is the reference price for the benefits included in the Founding Driver offer.\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   TYLO \u2014 SECTION 6\n   FOUNDING DRIVER OFFER\n========================================================= *\/\n\n.tylo-section6 {\n  width: 100%;\n  background:\n    radial-gradient(\n      circle at 85% 20%,\n      rgba(111, 55, 255, 0.08),\n      transparent 32%\n    ),\n    radial-gradient(\n      circle at 10% 85%,\n      rgba(91, 43, 255, 0.05),\n      transparent 30%\n    ),\n    #ffffff;\n\n  padding: 95px 40px 85px;\n  box-sizing: border-box;\n  font-family: Arial, Helvetica, sans-serif;\n  color: #111936;\n}\n\n.tylo-s6-inner {\n  width: min(1180px, 100%);\n  margin: 0 auto;\n}\n\n\n\/* ---------- HEADER ---------- *\/\n\n.tylo-s6-header {\n  text-align: center;\n  max-width: 850px;\n  margin: 0 auto 55px;\n}\n\n.tylo-s6-kicker {\n  display: inline-block;\n  margin-bottom: 18px;\n\n  font-size: 14px;\n  font-weight: 800;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n\n  color: #5420f5;\n}\n\n.tylo-s6-header h2 {\n  margin: 0;\n\n  font-size: clamp(38px, 4vw, 60px);\n  line-height: 1.04;\n  letter-spacing: -2px;\n  font-weight: 800;\n\n  color: #111936;\n}\n\n.tylo-s6-header h2 span {\n  color: #5420f5;\n}\n\n.tylo-s6-subtitle {\n  max-width: 680px;\n  margin: 22px auto 0;\n\n  font-size: 18px;\n  line-height: 1.6;\n  color: #6c7898;\n}\n\n\n\/* ---------- MAIN CONTENT ---------- *\/\n\n.tylo-s6-content {\n  display: grid;\n  grid-template-columns: 0.82fr 1.18fr;\n  gap: 34px;\n  align-items: stretch;\n}\n\n\n\/* ---------- OFFER CARD ---------- *\/\n\n.tylo-s6-offer {\n  position: relative;\n\n  padding: 38px 38px 34px;\n\n  border-radius: 26px;\n\n  background:\n    linear-gradient(\n      145deg,\n      #f5f0ff 0%,\n      #ffffff 70%\n    );\n\n  border: 1px solid #ddd2ff;\n\n  box-shadow:\n    0 18px 45px rgba(73, 16, 237, 0.08);\n\n  text-align: center;\n\n  overflow: hidden;\n}\n\n.tylo-s6-offer::after {\n  content: \"\";\n  position: absolute;\n\n  width: 190px;\n  height: 190px;\n\n  right: -95px;\n  bottom: -100px;\n\n  border-radius: 50%;\n\n  background: rgba(102, 48, 255, 0.08);\n}\n\n.tylo-s6-offer-label {\n  display: inline-flex;\n  align-items: center;\n\n  padding: 9px 17px;\n\n  border-radius: 30px;\n\n  background: #e8deff;\n  color: #5420f5;\n\n  font-size: 12px;\n  font-weight: 800;\n  letter-spacing: 1.5px;\n}\n\n.tylo-s6-price {\n  margin-top: 22px;\n\n  font-size: clamp(72px, 7vw, 100px);\n  line-height: 0.95;\n  letter-spacing: -5px;\n\n  font-weight: 800;\n  color: #5420f5;\n}\n\n.tylo-dollar {\n  font-size: 0.55em;\n  vertical-align: top;\n  position: relative;\n  top: 8px;\n  letter-spacing: -2px;\n}\n\n.tylo-s6-period {\n  margin-top: 10px;\n\n  font-size: 14px;\n  font-weight: 800;\n  letter-spacing: 1.5px;\n\n  color: #111936;\n}\n\n.tylo-s6-launch {\n  margin-top: 10px;\n\n  font-size: 14px;\n  color: #74809d;\n}\n\n.tylo-s6-value {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  margin-top: 30px;\n  padding-top: 20px;\n\n  border-top: 1px solid #dddff0;\n\n  font-size: 14px;\n  color: #71809f;\n}\n\n.tylo-s6-value strong {\n  color: #111936;\n  font-size: 18px;\n}\n\n.tylo-s6-saving {\n  margin-top: 17px;\n\n  font-size: 15px;\n  font-weight: 800;\n\n  color: #5420f5;\n}\n\n\n\/* ---------- BENEFITS ---------- *\/\n\n.tylo-s6-benefits {\n  padding: 36px 40px;\n\n  border-radius: 26px;\n\n  background: #ffffff;\n\n  border: 1px solid #e4e7f2;\n\n  box-shadow:\n    0 18px 45px rgba(22, 31, 65, 0.06);\n}\n\n.tylo-s6-benefits-title {\n  margin-bottom: 24px;\n\n  font-size: 13px;\n  font-weight: 800;\n  letter-spacing: 2px;\n\n  color: #5420f5;\n}\n\n.tylo-s6-benefit {\n  display: flex;\n  gap: 17px;\n\n  padding: 18px 0;\n\n  border-bottom: 1px solid #edf0f7;\n}\n\n.tylo-s6-benefit:last-child {\n  border-bottom: none;\n  padding-bottom: 0;\n}\n\n.tylo-s6-check {\n  flex: 0 0 28px;\n\n  width: 28px;\n  height: 28px;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 50%;\n\n  background: #5420f5;\n  color: #ffffff;\n\n  font-size: 16px;\n  font-weight: 800;\n}\n\n.tylo-s6-benefit strong {\n  display: block;\n\n  font-size: 17px;\n  line-height: 1.3;\n\n  color: #18203e;\n}\n\n.tylo-s6-benefit p {\n  margin: 6px 0 0;\n\n  font-size: 14px;\n  line-height: 1.5;\n\n  color: #7783a1;\n}\n\n\n\/* ---------- FUTURE MEMBERSHIPS ---------- *\/\n\n.tylo-s6-future {\n  margin-top: 42px;\n\n  text-align: center;\n}\n\n.tylo-s6-future-label {\n  margin-bottom: 17px;\n\n  font-size: 12px;\n  font-weight: 800;\n  letter-spacing: 2px;\n\n  color: #7b86a2;\n}\n\n.tylo-s6-plans {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: 13px 22px;\n\n  border-radius: 50px;\n\n  background: #f7f8fc;\n  border: 1px solid #e5e8f1;\n}\n\n.tylo-s6-plan {\n  display: flex;\n  align-items: baseline;\n  gap: 7px;\n\n  padding: 0 18px;\n}\n\n.tylo-s6-plan span {\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: 1px;\n\n  color: #78839e;\n}\n\n.tylo-s6-plan strong {\n  font-size: 18px;\n  color: #18203e;\n}\n\n.tylo-s6-plan small {\n  font-size: 12px;\n  color: #8993aa;\n}\n\n.tylo-s6-plan.premium strong,\n.tylo-s6-plan.premium span {\n  color: #5420f5;\n}\n\n.tylo-s6-divider {\n  width: 1px;\n  height: 25px;\n\n  background: #dfe3ed;\n}\n\n.tylo-s6-future-note {\n  margin: 15px auto 0;\n\n  max-width: 650px;\n\n  font-size: 12px;\n  line-height: 1.5;\n\n  color: #8a94ac;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n  .tylo-section6 {\n    padding: 75px 25px 70px;\n  }\n\n  .tylo-s6-content {\n    grid-template-columns: 1fr;\n    max-width: 650px;\n    margin: 0 auto;\n  }\n\n  .tylo-s6-header {\n    margin-bottom: 42px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n  .tylo-section6 {\n    padding: 60px 18px 55px;\n  }\n\n  .tylo-s6-header h2 {\n    font-size: 39px;\n    letter-spacing: -1.5px;\n  }\n\n  .tylo-s6-subtitle {\n    font-size: 16px;\n  }\n\n  .tylo-s6-offer {\n    padding: 30px 25px;\n    border-radius: 22px;\n  }\n\n  .tylo-s6-price {\n    font-size: 82px;\n  }\n\n  .tylo-s6-benefits {\n    padding: 28px 24px;\n    border-radius: 22px;\n  }\n\n  .tylo-s6-benefit strong {\n    font-size: 15px;\n  }\n\n  .tylo-s6-benefit p {\n    font-size: 13px;\n  }\n\n  .tylo-s6-plans {\n    width: 100%;\n    box-sizing: border-box;\n\n    display: flex;\n    flex-direction: column;\n\n    border-radius: 20px;\n    padding: 15px;\n  }\n\n  .tylo-s6-plan {\n    width: 100%;\n    justify-content: center;\n    padding: 10px 5px;\n  }\n\n  .tylo-s6-divider {\n    width: 70%;\n    height: 1px;\n  }\n\n}\n\n<\/style>\n\n\n\n<style data-wp-block-html=\"css\">\n<style>\n\n\/* =========================================================\n   TYLO DRIVER REGISTRATION\n========================================================= *\/\n\n#tylo-registration {\n  font-family: Arial, Helvetica, sans-serif;\n  color:#07102f;\n  max-width:1120px;\n  margin:40px auto;\n  padding:32px 42px 25px;\n  background:#fff;\n  border:1px solid #e2e7f0;\n  border-radius:20px;\n  box-shadow:0 12px 40px rgba(24,51,107,.06);\n}\n\n#tylo-registration * {\n  box-sizing:border-box;\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.tylo-reg-badge {\n  width:max-content;\n  margin:0 auto;\n  padding:8px 26px;\n  border-radius:22px;\n  background:#edf3ff;\n  color:#1b59dd;\n  font-weight:700;\n  letter-spacing:4px;\n  font-size:13px;\n}\n\n#tylo-registration h2.tylo-title {\n  text-align:center;\n  font-size:42px;\n  line-height:1.15;\n  margin:14px 0 5px;\n  color:#07102f;\n  font-weight:800;\n}\n\n.tylo-blue {\n  color:#4352ff;\n}\n\n.tylo-subtitle {\n  text-align:center;\n  color:#59637c;\n  font-size:20px;\n  margin-bottom:30px;\n}\n\n\n\/* =========================================================\n   PLANS\n========================================================= *\/\n\n.tylo-plans {\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:18px;\n}\n\n.tylo-plan {\n  border:1px solid #d5dbe7;\n  border-radius:14px;\n  padding:22px;\n  cursor:pointer;\n  display:flex;\n  gap:16px;\n  min-height:125px;\n  transition:.2s;\n}\n\n.tylo-plan:hover {\n  border-color:#8ca4ff;\n}\n\n.tylo-plan.active {\n  border:2px solid #394cff;\n  background:#fbfcff;\n}\n\n.tylo-radio {\n  width:31px;\n  height:31px;\n  border:2px solid #8993a8;\n  border-radius:50%;\n  flex:none;\n  margin-top:4px;\n}\n\n.tylo-plan.active .tylo-radio {\n  border:9px solid #3156f5;\n}\n\n.tylo-plan h3 {\n  margin:0 0 8px;\n  font-size:21px;\n  color:#07102f;\n}\n\n.tylo-plan p {\n  margin:0;\n  color:#4f5973;\n  line-height:1.45;\n}\n\n.tylo-recommended {\n  display:inline-block;\n  background:linear-gradient(90deg,#245cff,#742cff);\n  color:white;\n  border-radius:18px;\n  padding:5px 13px;\n  font-size:12px;\n  margin-left:8px;\n}\n\n\n\/* =========================================================\n   FORM SECTIONS\n========================================================= *\/\n\n.tylo-section {\n  margin-top:28px;\n}\n\n.tylo-section-title {\n  font-size:22px;\n  font-weight:800;\n  margin-bottom:15px;\n}\n\n.tylo-grid-2 {\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:17px 22px;\n}\n\n.tylo-grid-3 {\n  display:grid;\n  grid-template-columns:1fr 1fr 1fr;\n  gap:22px;\n}\n\n.tylo-field-wrap label {\n  display:block;\n  font-size:16px;\n  margin-bottom:7px;\n}\n\n.tylo-required {\n  color:#e32236;\n}\n\n\n\/* =========================================================\n   INPUTS\n========================================================= *\/\n\n.tylo-field {\n  width:100%;\n  height:52px;\n  border:1px solid #cfd6e3;\n  border-radius:9px;\n  padding:0 16px;\n  font-size:16px;\n  color:#17203d;\n  background:#fff;\n  outline:none;\n}\n\n.tylo-field:focus {\n  border-color:#3156f5;\n  box-shadow:0 0 0 2px rgba(49,86,245,.08);\n}\n\n.tylo-field:disabled {\n  background:#f5f6f8;\n  color:#81899a;\n  cursor:not-allowed;\n}\n\n\n\/* =========================================================\n   TERMS\n========================================================= *\/\n\n.tylo-terms {\n  display:flex;\n  align-items:flex-start;\n  gap:12px;\n  margin-top:25px;\n  color:#35405f;\n  font-size:16px;\n}\n\n.tylo-terms input {\n  width:22px;\n  height:22px;\n  flex:none;\n  margin-top:1px;\n}\n\n.tylo-terms a {\n  color:#075de8;\n  text-decoration:underline;\n}\n\n\n\/* =========================================================\n   SUBMIT BUTTON\n========================================================= *\/\n\n#tylo-submit {\n  width:100%;\n  height:60px;\n  margin-top:22px;\n  border:0;\n  border-radius:9px;\n  color:#fff;\n  font-size:20px;\n  font-weight:800;\n  background:linear-gradient(90deg,#0868f9,#6c21ff);\n  cursor:pointer;\n  transition:.2s;\n}\n\n#tylo-submit:hover {\n  opacity:.94;\n}\n\n#tylo-submit:disabled {\n  opacity:.65;\n  cursor:not-allowed;\n}\n\n\n\/* =========================================================\n   STRIPE MESSAGE\n========================================================= *\/\n\n.tylo-secure {\n  text-align:center;\n  color:#66708a;\n  margin-top:14px;\n  font-size:14px;\n}\n\n.tylo-stripe {\n  font-size:19px;\n  color:#5433d5;\n  font-weight:800;\n}\n\n\n\/* =========================================================\n   FORM MESSAGE\n========================================================= *\/\n\n#tylo-message {\n  display:none;\n  margin-top:15px;\n  padding:14px 16px;\n  border-radius:8px;\n  background:#eef5ff;\n  color:#194da7;\n  text-align:center;\n  line-height:1.5;\n}\n\n#tylo-message.success {\n  background:#edfdf5;\n  color:#087443;\n}\n\n#tylo-message.error {\n  background:#fff1f1;\n  color:#b42318;\n}\n\n\n\/* =========================================================\n   LOADING\n========================================================= *\/\n\n.tylo-loading {\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  gap:10px;\n}\n\n.tylo-spinner {\n  width:18px;\n  height:18px;\n  border:3px solid rgba(255,255,255,.35);\n  border-top-color:#fff;\n  border-radius:50%;\n  animation:tyloSpin .7s linear infinite;\n}\n\n@keyframes tyloSpin {\n  to {\n    transform:rotate(360deg);\n  }\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:760px) {\n\n  #tylo-registration {\n    margin:20px 10px;\n    padding:25px 18px;\n  }\n\n  #tylo-registration h2.tylo-title {\n    font-size:31px;\n  }\n\n  .tylo-subtitle {\n    font-size:17px;\n  }\n\n  .tylo-plans,\n  .tylo-grid-2,\n  .tylo-grid-3 {\n    grid-template-columns:1fr;\n  }\n\n  .tylo-recommended {\n    margin-top:7px;\n    margin-left:0;\n  }\n\n  #tylo-submit {\n    font-size:17px;\n  }\n\n}\n<\/style>\n\n<div id=\"tylo-registration\">\n\n<style>\n\n\/* =========================================================\n   TYLO \u2014 SECTION 7\n   DRIVER REGISTRATION\n========================================================= *\/\n\n#tylo-registration{\n  width:100%;\n  max-width:1240px;\n  margin:0 auto;\n\n  padding:82px 38px 78px;\n\n  box-sizing:border-box;\n\n  background:\n    radial-gradient(\n      circle at 88% 12%,\n      rgba(91,32,244,.065),\n      transparent 28%\n    ),\n    radial-gradient(\n      circle at 8% 82%,\n      rgba(91,32,244,.045),\n      transparent 28%\n    ),\n    #ffffff;\n\n  color:#18233d;\n\n  font-family:\n    Arial,\n    Helvetica,\n    sans-serif;\n}\n\n#tylo-registration *,\n#tylo-registration *::before,\n#tylo-registration *::after{\n  box-sizing:border-box;\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.tylo-reg-header{\n  max-width:780px;\n  margin:0 auto 42px;\n  text-align:center;\n}\n\n.tylo-reg-kicker{\n  display:inline-block;\n\n  margin-bottom:15px;\n\n  color:#5b20f4;\n\n  font-size:12px;\n  line-height:1;\n\n  font-weight:800;\n  letter-spacing:2.5px;\n\n  text-transform:uppercase;\n}\n\n#tylo-registration h2.tylo-reg-title{\n  margin:0 0 15px !important;\n  padding:0 !important;\n\n  color:#18233d !important;\n\n  font-family:\n    Arial,\n    Helvetica,\n    sans-serif !important;\n\n  font-size:clamp(35px,4vw,52px) !important;\n\n  line-height:1.07 !important;\n\n  letter-spacing:-1.8px !important;\n\n  font-weight:800 !important;\n\n  text-align:center !important;\n}\n\n.tylo-reg-purple{\n  color:#5b20f4;\n}\n\n.tylo-reg-subtitle{\n  max-width:620px;\n\n  margin:0 auto;\n\n  color:#71809f;\n\n  font-size:16px;\n  line-height:1.6;\n\n  text-align:center;\n}\n\n\n\/* =========================================================\n   REGISTRATION CARD\n========================================================= *\/\n\n.tylo-reg-card{\n\n  width:100%;\n\n  max-width:1050px;\n\n  margin:0 auto;\n\n  padding:30px;\n\n  background:#ffffff;\n\n  border:1px solid #e4e8f1;\n\n  border-radius:24px;\n\n  box-shadow:\n    0 18px 50px rgba(24,35,61,.065);\n}\n\n\n\/* =========================================================\n   PLAN SELECTOR\n========================================================= *\/\n\n.tylo-plan-heading{\n\n  margin:0 0 17px;\n\n  color:#26334e;\n\n  font-size:12px;\n\n  font-weight:800;\n\n  letter-spacing:1.5px;\n\n  text-transform:uppercase;\n}\n\n.tylo-plans{\n\n  display:grid;\n\n  grid-template-columns:1fr 1fr;\n\n  gap:15px;\n\n  margin-bottom:30px;\n}\n\n.tylo-plan{\n\n  position:relative;\n\n  display:flex;\n\n  align-items:flex-start;\n\n  gap:15px;\n\n  min-height:145px;\n\n  padding:22px;\n\n  border:1px solid #dfe4ee;\n\n  border-radius:17px;\n\n  background:#ffffff;\n\n  cursor:pointer;\n\n  transition:\n    border-color .2s ease,\n    background .2s ease,\n    box-shadow .2s ease,\n    transform .2s ease;\n}\n\n.tylo-plan:hover{\n\n  transform:translateY(-1px);\n\n  border-color:#bfb1ff;\n\n}\n\n.tylo-plan.active{\n\n  border:1.5px solid #5b20f4;\n\n  background:\n    linear-gradient(\n      145deg,\n      #fbfaff,\n      #f6f1ff\n    );\n\n  box-shadow:\n    0 8px 25px rgba(91,32,244,.08);\n}\n\n\n\/* RADIO *\/\n\n.tylo-radio{\n\n  flex:0 0 23px;\n\n  width:23px;\n  height:23px;\n\n  margin-top:2px;\n\n  border:2px solid #9aa4b9;\n\n  border-radius:50%;\n\n  background:#ffffff;\n\n  position:relative;\n}\n\n.tylo-plan.active .tylo-radio{\n\n  border:6px solid #5b20f4;\n\n}\n\n\n\/* PLAN CONTENT *\/\n\n.tylo-plan-content{\n\n  flex:1;\n}\n\n.tylo-plan h3{\n\n  margin:0 0 7px;\n\n  color:#18233d;\n\n  font-size:19px;\n  line-height:1.25;\n\n  font-weight:800;\n}\n\n.tylo-plan.active h3{\n\n  color:#4d19df;\n\n}\n\n.tylo-plan p{\n\n  margin:0;\n\n  color:#71809f;\n\n  font-size:13px;\n\n  line-height:1.5;\n}\n\n\n\/* PRICE *\/\n\n.tylo-plan-price{\n\n  display:inline-block;\n\n  margin-top:11px;\n\n  color:#5b20f4;\n\n  font-size:12px;\n\n  font-weight:800;\n}\n\n\n\/* BADGE *\/\n\n.tylo-recommended{\n\n  display:inline-block;\n\n  margin-left:7px;\n\n  padding:5px 9px;\n\n  border-radius:20px;\n\n  background:#e9e1ff;\n\n  color:#5b20f4;\n\n  font-size:9px;\n\n  line-height:1;\n\n  letter-spacing:.6px;\n\n  font-weight:800;\n\n  text-transform:uppercase;\n\n  vertical-align:middle;\n}\n\n\n\/* =========================================================\n   FORM SECTION\n========================================================= *\/\n\n.tylo-form-section{\n\n  margin-top:27px;\n\n  padding-top:27px;\n\n  border-top:1px solid #edf0f5;\n}\n\n.tylo-section-title{\n\n  margin:0 0 17px;\n\n  color:#18233d;\n\n  font-size:18px;\n\n  line-height:1.3;\n\n  font-weight:800;\n}\n\n.tylo-section-subtitle{\n\n  margin:-9px 0 20px;\n\n  color:#7b86a0;\n\n  font-size:13px;\n\n  line-height:1.5;\n}\n\n\n\/* =========================================================\n   GRID\n========================================================= *\/\n\n.tylo-grid-2{\n\n  display:grid;\n\n  grid-template-columns:1fr 1fr;\n\n  gap:17px 20px;\n}\n\n.tylo-grid-3{\n\n  display:grid;\n\n  grid-template-columns:\n    1fr\n    1fr\n    1fr;\n\n  gap:17px 20px;\n}\n\n\n\/* =========================================================\n   FIELDS\n========================================================= *\/\n\n.tylo-field-wrap label{\n\n  display:block;\n\n  margin:0 0 7px;\n\n  color:#34415d;\n\n  font-size:12px;\n\n  line-height:1.3;\n\n  font-weight:750;\n}\n\n.tylo-required{\n\n  color:#e34c60;\n}\n\n.tylo-field{\n\n  width:100%;\n  height:48px;\n\n  padding:0 14px;\n\n  border:1px solid #d5dbe7;\n\n  border-radius:10px;\n\n  background:#ffffff;\n\n  color:#18233d;\n\n  font-family:\n    Arial,\n    Helvetica,\n    sans-serif;\n\n  font-size:14px;\n\n  outline:none;\n\n  transition:\n    border-color .2s ease,\n    box-shadow .2s ease;\n}\n\n.tylo-field::placeholder{\n\n  color:#a1aabd;\n\n}\n\n.tylo-field:focus{\n\n  border-color:#6a42ed;\n\n  box-shadow:\n    0 0 0 3px rgba(91,32,244,.08);\n\n}\n\n.tylo-field:disabled{\n\n  background:#f5f6f9;\n\n  color:#8b94a7;\n\n  cursor:not-allowed;\n}\n\n\n\/* =========================================================\n   LOCATION INFO\n========================================================= *\/\n\n.tylo-location-note{\n\n  margin-top:10px;\n\n  padding:11px 13px;\n\n  border-radius:10px;\n\n  background:#f7f5ff;\n\n  border:1px solid #e7e0ff;\n\n  color:#756a9a;\n\n  font-size:11px;\n\n  line-height:1.45;\n}\n\n\n\/* =========================================================\n   TERMS & PRIVACY\n========================================================= *\/\n\n.tylo-terms{\n\n  display:flex;\n\n  align-items:flex-start;\n\n  gap:11px;\n\n  margin-top:26px;\n\n  color:#68748e;\n\n  font-size:12px;\n\n  line-height:1.5;\n}\n\n.tylo-terms input{\n\n  flex:0 0 17px;\n\n  width:17px;\n  height:17px;\n\n  margin:1px 0 0;\n\n  accent-color:#5b20f4;\n}\n\n\n\/* REAL LEGAL LINKS *\/\n\n.tylo-terms a{\n\n  color:#5b20f4;\n\n  font-weight:700;\n\n  text-decoration:underline;\n\n  text-decoration-thickness:1px;\n\n  text-underline-offset:2px;\n\n  transition:\n    color .2s ease;\n}\n\n.tylo-terms a:hover{\n\n  color:#3510b5;\n\n}\n\n\n\/* =========================================================\n   SUBMIT BUTTON\n========================================================= *\/\n\n#tylo-submit{\n\n  display:flex;\n\n  align-items:center;\n  justify-content:center;\n\n  width:100%;\n\n  min-height:54px;\n\n  margin-top:21px;\n\n  padding:14px 20px;\n\n  border:0;\n\n  border-radius:11px;\n\n  background:#5b20f4;\n\n  color:#ffffff;\n\n  font-family:\n    Arial,\n    Helvetica,\n    sans-serif;\n\n  font-size:13px;\n\n  line-height:1.2;\n\n  font-weight:850;\n\n  letter-spacing:.1px;\n\n  cursor:pointer;\n\n  box-shadow:\n    0 10px 23px rgba(91,32,244,.17);\n\n  transition:\n    transform .2s ease,\n    box-shadow .2s ease,\n    opacity .2s ease;\n}\n\n#tylo-submit:hover{\n\n  transform:translateY(-1px);\n\n  box-shadow:\n    0 13px 27px rgba(91,32,244,.22);\n}\n\n#tylo-submit:disabled{\n\n  opacity:.75;\n\n  cursor:wait;\n\n  transform:none;\n}\n\n\n\/* =========================================================\n   STRIPE NOTE\n========================================================= *\/\n\n.tylo-secure{\n\n  display:block;\n\n  margin-top:12px;\n\n  color:#8993a8;\n\n  font-size:11px;\n\n  text-align:center;\n}\n\n.tylo-stripe{\n\n  color:#635bff;\n\n  font-size:14px;\n\n  font-weight:850;\n}\n\n\n\/* =========================================================\n   MESSAGE\n========================================================= *\/\n\n#tylo-message{\n\n  display:none;\n\n  margin-top:15px;\n\n  padding:14px;\n\n  border-radius:10px;\n\n  font-size:13px;\n\n  line-height:1.5;\n\n  text-align:center;\n}\n\n\n\/* =========================================================\n   SPINNER\n========================================================= *\/\n\n.tylo-spinner{\n\n  display:inline-block;\n\n  width:18px;\n  height:18px;\n\n  margin-right:9px;\n\n  border:3px solid rgba(255,255,255,.4);\n\n  border-top-color:#ffffff;\n\n  border-radius:50%;\n\n  vertical-align:-5px;\n\n  animation:\n    tylo-spin .8s linear infinite;\n}\n\n@keyframes tylo-spin{\n\n  to{\n    transform:rotate(360deg);\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:760px){\n\n  #tylo-registration{\n\n    padding:\n      58px\n      16px\n      58px;\n\n  }\n\n  .tylo-reg-header{\n\n    margin-bottom:30px;\n\n  }\n\n  #tylo-registration h2.tylo-reg-title{\n\n    font-size:34px !important;\n\n    letter-spacing:-1.2px !important;\n\n  }\n\n  .tylo-reg-subtitle{\n\n    font-size:14px;\n\n  }\n\n  .tylo-reg-card{\n\n    padding:20px;\n\n    border-radius:19px;\n\n  }\n\n  .tylo-plans{\n\n    grid-template-columns:1fr;\n\n  }\n\n  .tylo-grid-2,\n  .tylo-grid-3{\n\n    grid-template-columns:1fr;\n\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media(max-width:430px){\n\n  #tylo-registration{\n\n    padding-left:12px;\n    padding-right:12px;\n\n  }\n\n  .tylo-reg-card{\n\n    padding:16px;\n\n  }\n\n  .tylo-plan{\n\n    padding:18px;\n\n  }\n\n  .tylo-plan h3{\n\n    font-size:17px;\n\n  }\n\n  .tylo-recommended{\n\n    display:block;\n\n    width:max-content;\n\n    margin:8px 0 0;\n\n  }\n\n}\n\n<\/style>\n\n\n<!-- =======================================================\n     HEADER\n======================================================= -->\n\n<div class=\"tylo-reg-header\">\n\n  <div class=\"tylo-reg-kicker\">\n    DRIVER REGISTRATION\n  <\/div>\n\n  <h2 class=\"tylo-reg-title\">\n    Be one of the <span class=\"tylo-reg-purple\">first 500.<\/span>\n  <\/h2>\n\n  <p class=\"tylo-reg-subtitle\">\n    Complete your Founding Driver registration.\n    The first 500 eligible drivers receive the special $59 launch offer.\n  <\/p>\n\n<\/div>\n\n\n<!-- =======================================================\n     REGISTRATION CARD\n======================================================= -->\n\n<div class=\"tylo-reg-card\">\n\n\n  <!-- PLAN SELECTION -->\n\n  <div class=\"tylo-plan-heading\">\n    CHOOSE YOUR REGISTRATION\n  <\/div>\n\n\n  <div class=\"tylo-plans\">\n\n\n    <!-- FOUNDING DRIVER -->\n\n    <div class=\"tylo-plan active\" id=\"tylo-founding\" onclick=\"tyloChoosePlan('founding')\">\n\n      <span class=\"tylo-radio\"><\/span>\n\n      <div class=\"tylo-plan-content\">\n\n        <h3>\n\n          Founding Driver \u2014 $59\n\n          <span class=\"tylo-recommended\">\n            First 500\n          <\/span>\n\n        <\/h3>\n\n        <p>\n          Get 2 months of Premium benefits starting when TYLO launches,\n          plus priority support as a Founding Driver.\n        <\/p>\n\n        <span class=\"tylo-plan-price\">\n          One-time $59 offer\n        <\/span>\n\n      <\/div>\n\n    <\/div>\n\n\n  <\/div>\n\n\n  <!-- FORM -->\n\n  <form id=\"tylo-form\">\n\n\n    <!-- PERSONAL INFORMATION -->\n\n    <div class=\"tylo-form-section\">\n\n      <div class=\"tylo-section-title\">\n        Personal Information\n      <\/div>\n\n      <div class=\"tylo-section-subtitle\">\n        Tell us a little about yourself.\n      <\/div>\n\n\n      <div class=\"tylo-grid-2\">\n\n\n        <div class=\"tylo-field-wrap\">\n\n          <label>\n            First Name\n            <span class=\"tylo-required\">*<\/span>\n          <\/label>\n\n          <input class=\"tylo-field\" name=\"first_name\" placeholder=\"First name\" autocomplete=\"given-name\" required=\"\">\n\n        <\/div>\n\n\n        <div class=\"tylo-field-wrap\">\n\n          <label>\n            Last Name\n            <span class=\"tylo-required\">*<\/span>\n          <\/label>\n\n          <input class=\"tylo-field\" name=\"last_name\" placeholder=\"Last name\" autocomplete=\"family-name\" required=\"\">\n\n        <\/div>\n\n\n        <div class=\"tylo-field-wrap\">\n\n          <label>\n            Email\n            <span class=\"tylo-required\">*<\/span>\n          <\/label>\n\n          <input class=\"tylo-field\" name=\"email\" type=\"email\" placeholder=\"you@email.com\" autocomplete=\"email\" required=\"\">\n\n        <\/div>\n\n\n        <div class=\"tylo-field-wrap\">\n\n          <label>\n            Phone\n            <span class=\"tylo-required\">*<\/span>\n          <\/label>\n\n          <input class=\"tylo-field\" id=\"tylo-phone\" name=\"phone\" inputmode=\"numeric\" maxlength=\"14\" placeholder=\"(305) 123-4567\" autocomplete=\"tel\" required=\"\">\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- VEHICLE -->\n\n    <div class=\"tylo-form-section\">\n\n      <div class=\"tylo-section-title\">\n        Vehicle Information\n      <\/div>\n\n      <div class=\"tylo-section-subtitle\">\n        Tell us about the vehicle you plan to drive.\n      <\/div>\n\n\n      <div class=\"tylo-grid-3\">\n\n\n        <div class=\"tylo-field-wrap\">\n\n          <label>\n            Year\n            <span class=\"tylo-required\">*<\/span>\n          <\/label>\n\n          <select class=\"tylo-field\" id=\"tylo-year\" name=\"vehicle_year\" required=\"\">\n\n            <option value=\"\">\n              Select year\n            <\/option>\n\n          <\/select>\n\n        <\/div>\n\n\n        <div class=\"tylo-field-wrap\">\n\n          <label>\n            Make\n            <span class=\"tylo-required\">*<\/span>\n          <\/label>\n\n          <select class=\"tylo-field\" id=\"tylo-make\" name=\"vehicle_make\" required=\"\">\n\n            <option value=\"\">\n              Select make\n            <\/option>\n\n          <\/select>\n\n        <\/div>\n\n\n        <div class=\"tylo-field-wrap\">\n\n          <label>\n            Model\n            <span class=\"tylo-required\">*<\/span>\n          <\/label>\n\n          <select class=\"tylo-field\" id=\"tylo-model\" name=\"vehicle_model\" required=\"\" disabled=\"\">\n\n            <option value=\"\">\n              Select model\n            <\/option>\n\n          <\/select>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- LOCATION -->\n\n    <div class=\"tylo-form-section\">\n\n      <div class=\"tylo-section-title\">\n        Location\n      <\/div>\n\n      <div class=\"tylo-section-subtitle\">\n        TYLO is preparing to launch in Florida and Illinois.\n      <\/div>\n\n\n      <div class=\"tylo-grid-2\">\n\n\n        <div class=\"tylo-field-wrap\">\n\n          <label>\n            ZIP Code\n            <span class=\"tylo-required\">*<\/span>\n          <\/label>\n\n          <input class=\"tylo-field\" id=\"tylo-zip\" name=\"zip\" inputmode=\"numeric\" maxlength=\"5\" placeholder=\"Enter ZIP code\" required=\"\">\n\n        <\/div>\n\n\n        <div class=\"tylo-field-wrap\">\n\n          <label>\n            City\n          <\/label>\n\n          <input class=\"tylo-field\" id=\"tylo-city\" name=\"city_display\" placeholder=\"City will appear automatically\" disabled=\"\">\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"tylo-location-note\">\n\n        Enter your ZIP Code to identify your launch market.\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- INTERNAL DATA -->\n\n    <input type=\"hidden\" id=\"tylo-market\" name=\"market\">\n\n    <input type=\"hidden\" id=\"tylo-plan-value\" name=\"registration_plan\" value=\"founding\">\n\n\n    <!-- ===================================================\n         TERMS & PRIVACY\n         REAL LINKS TO TYLO LEGAL PAGES\n    ==================================================== -->\n\n    <label class=\"tylo-terms\">\n\n      <input type=\"checkbox\" required=\"\">\n\n      <span>\n\n        I agree to TYLO's\n\n        <a href=\"https:\/\/tyloapp.com\/?page_id=32\" target=\"_blank\" rel=\"noopener noreferrer\">\n          Terms &amp; Conditions\n        <\/a>\n\n        and\n\n        <a href=\"https:\/\/tyloapp.com\/?page_id=35\" target=\"_blank\" rel=\"noopener noreferrer\">\n          Privacy Policy\n        <\/a>.\n\n        <span class=\"tylo-required\">*<\/span>\n\n      <\/span>\n\n    <\/label>\n\n\n    <!-- SUBMIT -->\n\n    <button id=\"tylo-submit\" type=\"submit\">\n\n      SECURE MY FOUNDING DRIVER SPOT \u2014 $59\n      &nbsp; \u2192\n\n    <\/button>\n\n\n    <!-- STRIPE -->\n\n    <div class=\"tylo-secure\" id=\"tylo-secure-payment\">\n\n      \ud83d\udd12 &nbsp;\n      Secure payment powered by\n      <span class=\"tylo-stripe\">\n        stripe\n      <\/span>\n\n    <\/div>\n\n\n    <!-- MESSAGE -->\n\n    <div id=\"tylo-message\"><\/div>\n\n\n  <\/form>\n\n<\/div>\n\n\n<script>\n\n\/* =========================================================\n   TYLO REGISTRATION\n   GOOGLE SHEETS + STRIPE\n========================================================= *\/\n\nlet tyloSelectedPlan = \"founding\";\n\n\n\/* =========================================================\n   VEHICLE DATABASE\n========================================================= *\/\n\nconst tyloVehicles = {\n\n  \"Acura\":[\n    \"ILX\",\"Integra\",\"MDX\",\"RDX\",\"TLX\"\n  ],\n\n  \"Audi\":[\n    \"A3\",\"A4\",\"A5\",\"A6\",\"Q3\",\"Q5\",\"Q7\",\"Q8\"\n  ],\n\n  \"BMW\":[\n    \"2 Series\",\"3 Series\",\"4 Series\",\"5 Series\",\n    \"7 Series\",\"X1\",\"X3\",\"X5\",\"X7\"\n  ],\n\n  \"Buick\":[\n    \"Enclave\",\"Encore\",\"Envision\"\n  ],\n\n  \"Cadillac\":[\n    \"CT4\",\"CT5\",\"Escalade\",\"XT4\",\"XT5\",\"XT6\"\n  ],\n\n  \"Chevrolet\":[\n    \"Blazer\",\"Bolt EV\",\"Equinox\",\"Malibu\",\n    \"Suburban\",\"Tahoe\",\"Trailblazer\",\"Traverse\"\n  ],\n\n  \"Chrysler\":[\n    \"300\",\"Pacifica\",\"Voyager\"\n  ],\n\n  \"Dodge\":[\n    \"Charger\",\"Durango\",\"Hornet\"\n  ],\n\n  \"Ford\":[\n    \"Bronco\",\"Edge\",\"Escape\",\"Expedition\",\n    \"Explorer\",\"Mustang Mach-E\",\"Maverick\"\n  ],\n\n  \"Genesis\":[\n    \"G70\",\"G80\",\"G90\",\"GV60\",\"GV70\",\"GV80\"\n  ],\n\n  \"GMC\":[\n    \"Acadia\",\"Terrain\",\"Yukon\"\n  ],\n\n  \"Honda\":[\n    \"Accord\",\"Civic\",\"CR-V\",\"HR-V\",\n    \"Odyssey\",\"Passport\",\"Pilot\",\"Prologue\"\n  ],\n\n  \"Hyundai\":[\n    \"Elantra\",\"Ioniq 5\",\"Ioniq 6\",\"Kona\",\n    \"Palisade\",\"Santa Fe\",\"Sonata\",\n    \"Tucson\",\"Venue\"\n  ],\n\n  \"Infiniti\":[\n    \"Q50\",\"QX50\",\"QX55\",\"QX60\",\"QX80\"\n  ],\n\n  \"Jeep\":[\n    \"Cherokee\",\"Compass\",\"Grand Cherokee\",\n    \"Renegade\",\"Wagoneer\",\"Wrangler\"\n  ],\n\n  \"Kia\":[\n    \"Carnival\",\"EV6\",\"Forte\",\"K5\",\"Niro\",\n    \"Seltos\",\"Sorento\",\"Soul\",\n    \"Sportage\",\"Telluride\"\n  ],\n\n  \"Lexus\":[\n    \"ES\",\"GX\",\"IS\",\"NX\",\"RX\",\"TX\",\"UX\"\n  ],\n\n  \"Lincoln\":[\n    \"Aviator\",\"Corsair\",\"Nautilus\",\"Navigator\"\n  ],\n\n  \"Mazda\":[\n    \"CX-30\",\"CX-5\",\"CX-50\",\"CX-70\",\n    \"CX-90\",\"Mazda3\"\n  ],\n\n  \"Mercedes-Benz\":[\n    \"A-Class\",\"C-Class\",\"E-Class\",\n    \"GLA\",\"GLB\",\"GLC\",\"GLE\",\"GLS\"\n  ],\n\n  \"Mitsubishi\":[\n    \"Eclipse Cross\",\"Outlander\",\n    \"Outlander Sport\"\n  ],\n\n  \"Nissan\":[\n    \"Altima\",\"Ariya\",\"Armada\",\"Kicks\",\n    \"Murano\",\"Pathfinder\",\"Rogue\",\n    \"Sentra\",\"Versa\"\n  ],\n\n  \"Polestar\":[\n    \"2\",\"3\"\n  ],\n\n  \"Subaru\":[\n    \"Ascent\",\"Crosstrek\",\"Forester\",\n    \"Impreza\",\"Legacy\",\"Outback\",\"Solterra\"\n  ],\n\n  \"Tesla\":[\n    \"Model 3\",\"Model S\",\"Model X\",\"Model Y\"\n  ],\n\n  \"Toyota\":[\n    \"4Runner\",\"Camry\",\"Corolla\",\"Crown\",\n    \"Grand Highlander\",\"Highlander\",\n    \"Prius\",\"RAV4\",\"Sequoia\",\n    \"Sienna\",\"Venza\"\n  ],\n\n  \"Volkswagen\":[\n    \"Atlas\",\"Atlas Cross Sport\",\"ID.4\",\n    \"Jetta\",\"Taos\",\"Tiguan\"\n  ],\n\n  \"Volvo\":[\n    \"S60\",\"S90\",\"XC40\",\"XC60\",\"XC90\"\n  ]\n\n};\n\n\n\/* =========================================================\n   YEAR\n========================================================= *\/\n\nconst tyloYear =\n  document.getElementById(\"tylo-year\");\n\nconst currentYear =\n  new Date().getFullYear();\n\nfor(\n  let y=currentYear+1;\n  y>=2005;\n  y--\n){\n\n  tyloYear.add(\n    new Option(y,y)\n  );\n\n}\n\n\n\/* =========================================================\n   MAKE\n========================================================= *\/\n\nconst tyloMake =\n  document.getElementById(\"tylo-make\");\n\nconst tyloModel =\n  document.getElementById(\"tylo-model\");\n\n\nObject.keys(tyloVehicles)\n  .sort()\n  .forEach(function(make){\n\n    tyloMake.add(\n      new Option(make,make)\n    );\n\n  });\n\n\n\/* =========================================================\n   MODEL\n========================================================= *\/\n\ntyloMake.addEventListener(\n  \"change\",\n  function(){\n\n    tyloModel.innerHTML =\n      '<option value=\"\">Select model<\/option>';\n\n    if(this.value){\n\n      tyloVehicles[this.value]\n        .forEach(function(model){\n\n          tyloModel.add(\n            new Option(model,model)\n          );\n\n        });\n\n      tyloModel.disabled=false;\n\n    }\n\n    else{\n\n      tyloModel.disabled=true;\n\n    }\n\n  }\n);\n\n\n\/* =========================================================\n   PHONE FORMAT\n========================================================= *\/\n\ndocument\n  .getElementById(\"tylo-phone\")\n  .addEventListener(\n    \"input\",\n    function(){\n\n      let numbers =\n        this.value\n          .replace(\/\\D\/g,\"\")\n          .slice(0,10);\n\n      if(numbers.length > 6){\n\n        this.value =\n          \"(\" +\n          numbers.slice(0,3) +\n          \") \" +\n          numbers.slice(3,6) +\n          \"-\" +\n          numbers.slice(6);\n\n      }\n\n      else if(numbers.length > 3){\n\n        this.value =\n          \"(\" +\n          numbers.slice(0,3) +\n          \") \" +\n          numbers.slice(3);\n\n      }\n\n      else if(numbers.length > 0){\n\n        this.value =\n          \"(\" +\n          numbers;\n\n      }\n\n    }\n  );\n\n\n\/* =========================================================\n   FLORIDA ZIP DETECTION\n========================================================= *\/\n\nfunction tyloDetectMarket(zip){\n\n  const number =\n    parseInt(zip,10);\n\n\n  \/* MIAMI-DADE *\/\n\n  if(\n    (number >= 33010 && number <= 33018) ||\n    (number >= 33030 && number <= 33035) ||\n    (number >= 33039 && number <= 33039) ||\n    (number >= 33054 && number <= 33056) ||\n    (number >= 33101 && number <= 33196)\n  ){\n\n    return {\n      city:\"Miami Area\",\n      market:\"Miami-Dade\"\n    };\n\n  }\n\n\n  \/* BROWARD *\/\n\n  if(\n    (number >= 33004 && number <= 33029) ||\n    (number >= 33060 && number <= 33076) ||\n    (number >= 33301 && number <= 33351)\n  ){\n\n    return {\n      city:\"Broward County\",\n      market:\"Broward\"\n    };\n\n  }\n\n\n  \/* ORLANDO *\/\n\n  if(\n    number >= 32801 &&\n    number <= 32839\n  ){\n\n    return {\n      city:\"Orlando\",\n      market:\"Orlando\"\n    };\n\n  }\n\n\n  \/* TAMPA *\/\n\n  if(\n    number >= 33602 &&\n    number <= 33647\n  ){\n\n    return {\n      city:\"Tampa\",\n      market:\"Tampa\"\n    };\n\n  }\n\n\n  \/* OTHER FLORIDA *\/\n\n  if(\n    number >= 32000 &&\n    number <= 34999\n  ){\n\n    return {\n      city:\"Florida\",\n      market:\"Future Market\"\n    };\n\n  }\n\n\n  \/* ILLINOIS *\/\n\n  if(\n    number >= 60000 &&\n    number <= 62999\n  ){\n\n    return {\n      city:\"Illinois\",\n      market:\"Illinois\"\n    };\n\n  }\n\n\n  return null;\n\n}\n\n\n\/* =========================================================\n   ZIP INPUT\n========================================================= *\/\n\ndocument\n  .getElementById(\"tylo-zip\")\n  .addEventListener(\n    \"input\",\n    function(){\n\n      this.value =\n        this.value\n          .replace(\/\\D\/g,\"\")\n          .slice(0,5);\n\n\n      const city =\n        document.getElementById(\"tylo-city\");\n\n      const market =\n        document.getElementById(\"tylo-market\");\n\n\n      if(this.value.length < 5){\n\n        city.value=\"\";\n        market.value=\"\";\n\n        return;\n\n      }\n\n\n      const result =\n        tyloDetectMarket(\n          this.value\n        );\n\n\n      if(result){\n\n        city.value =\n          result.city;\n\n        market.value =\n          result.market;\n\n      }\n\n      else{\n\n        city.value =\n          \"ZIP outside launch markets\";\n\n        market.value =\n          \"Outside launch markets\";\n\n      }\n\n    }\n  );\n\n\n\/* =========================================================\n   GOOGLE SHEETS + STRIPE\n========================================================= *\/\n\nconst TYLO_GOOGLE_SCRIPT_URL =\n\"https:\/\/script.google.com\/macros\/s\/AKfycbxSXPF2xi7Jg2AUI6fhX3cNEnKHPTK2VOPp-qHivHqTUP7TLQk-C0cX3axjdz7pLcCymA\/exec\";\n\n\nconst TYLO_STRIPE_PAYMENT_URL =\n\"https:\/\/buy.stripe.com\/eVq6oGeDXfPR9t7djS1gs02\";\n\n\n\/* =========================================================\n   FORM SUBMIT\n========================================================= *\/\n\ndocument\n  .getElementById(\"tylo-form\")\n  .addEventListener(\n    \"submit\",\n    async function(event){\n\n      event.preventDefault();\n\n      const form = this;\n\n      const message =\n        document.getElementById(\"tylo-message\");\n\n      const submitButton =\n        document.getElementById(\"tylo-submit\");\n\n      const zip =\n        document.getElementById(\"tylo-zip\").value;\n\n      const city =\n        document.getElementById(\"tylo-city\").value;\n\n      const market =\n        document.getElementById(\"tylo-market\").value;\n\n\n      \/* =====================================================\n         VALIDATION\n      ===================================================== *\/\n\n      if(!market){\n\n        message.style.display = \"block\";\n        message.style.background = \"#fff1f1\";\n        message.style.border = \"1px solid #ffcaca\";\n        message.style.color = \"#a51d1d\";\n\n        message.innerHTML =\n          \"Please enter a valid Florida or Illinois ZIP Code.\";\n\n        return;\n      }\n\n\n      \/* =====================================================\n         DATA\n      ===================================================== *\/\n\n      const data = {\n\n        registrationType:\n          \"Founding Driver\",\n\n        firstName:\n          form\n            .querySelector('[name=\"first_name\"]')\n            .value\n            .trim(),\n\n        lastName:\n          form\n            .querySelector('[name=\"last_name\"]')\n            .value\n            .trim(),\n\n        email:\n          form\n            .querySelector('[name=\"email\"]')\n            .value\n            .trim(),\n\n        phone:\n          form\n            .querySelector('[name=\"phone\"]')\n            .value\n            .trim(),\n\n        vehicleYear:\n          form\n            .querySelector('[name=\"vehicle_year\"]')\n            .value,\n\n        vehicleMake:\n          form\n            .querySelector('[name=\"vehicle_make\"]')\n            .value,\n\n        vehicleModel:\n          form\n            .querySelector('[name=\"vehicle_model\"]')\n            .value,\n\n        zipCode:\n          zip,\n\n        city:\n          city,\n\n        \/* IMPORTANT:\n           This is NOT a completed registration.\n           The driver has only submitted the information\n           and is now being sent to Stripe for payment.\n        *\/\n\n        paymentStatus:\n          \"Pending Payment\",\n\n        stripePaymentId:\n          \"\",\n\n        amount:\n          \"59\",\n\n        source:\n          \"TYLO Website\"\n\n      };\n\n\n      \/* =====================================================\n         LOADING STATE\n      ===================================================== *\/\n\n      submitButton.disabled = true;\n\n      submitButton.innerHTML =\n        '<span class=\"tylo-spinner\"><\/span>' +\n        'SECURING YOUR SPOT...';\n\n\n      message.style.display = \"block\";\n      message.style.background = \"#eef5ff\";\n      message.style.border = \"1px solid #cbdcff\";\n      message.style.color = \"#194da7\";\n\n\n      message.innerHTML =\n        '<div style=\"padding:10px;\">' +\n\n        '<strong style=\"font-size:17px;\">' +\n        'You\\'re almost there! \ud83c\udf89' +\n        '<\/strong><br><br>' +\n\n        '<span style=\"font-size:13px;line-height:1.5;\">' +\n        'Your information is ready.<br>' +\n        'Complete your $59 Founding Driver reservation to secure your spot.' +\n        '<\/span>' +\n\n        '<\/div>';\n\n\n      \/* =====================================================\n         SAVE PENDING REGISTRATION\n         WITHOUT WAITING FOR THE RESPONSE\n      ===================================================== *\/\n\n      try{\n\n        const payload =\n          JSON.stringify(data);\n\n\n        \/*\n         * sendBeacon is designed to send data while\n         * the browser is leaving the current page.\n         *\/\n\n        let sent = false;\n\n\n        if(navigator.sendBeacon){\n\n          try{\n\n            sent =\n              navigator.sendBeacon(\n                TYLO_GOOGLE_SCRIPT_URL,\n                new Blob(\n                  [payload],\n                  {\n                    type:\n                      \"text\/plain;charset=UTF-8\"\n                  }\n                )\n              );\n\n          }catch(beaconError){\n\n            console.warn(\n              \"TYLO beacon error:\",\n              beaconError\n            );\n\n          }\n\n        }\n\n\n        \/*\n         * Fallback if sendBeacon cannot be used.\n         *\/\n\n        if(!sent){\n\n          fetch(\n            TYLO_GOOGLE_SCRIPT_URL,\n            {\n              method:\"POST\",\n\n              mode:\"no-cors\",\n\n              keepalive:true,\n\n              headers:{\n                \"Content-Type\":\n                  \"text\/plain;charset=utf-8\"\n              },\n\n              body:\n                payload\n            }\n          ).catch(function(error){\n\n            console.warn(\n              \"TYLO background save error:\",\n              error\n            );\n\n          });\n\n        }\n\n\n        \/* ===================================================\n           STRIPE\n        =================================================== *\/\n\n        \/*\n         * Prefill the email already entered by the driver.\n         *\/\n\n        const stripeUrl =\n          TYLO_STRIPE_PAYMENT_URL +\n          \"?prefilled_email=\" +\n          encodeURIComponent(data.email);\n\n\n        \/*\n         * Do NOT show \"Registration Saved\".\n         * Do NOT wait for Google Sheets.\n         * Send the driver to Stripe almost immediately.\n         *\/\n\n        setTimeout(\n          function(){\n\n            window.location.replace(\n              stripeUrl\n            );\n\n          },\n          350\n        );\n\n\n      }catch(error){\n\n        console.error(\n          \"TYLO registration error:\",\n          error\n        );\n\n\n        message.style.display = \"block\";\n        message.style.background = \"#fff1f1\";\n        message.style.border = \"1px solid #ffcaca\";\n        message.style.color = \"#a51d1d\";\n\n        message.innerHTML =\n          '<div style=\"padding:12px;\">' +\n\n          '<strong>' +\n          'Something went wrong.' +\n          '<\/strong><br>' +\n\n          'Please try again.' +\n\n          '<\/div>';\n\n\n        submitButton.disabled = false;\n\n        submitButton.innerHTML =\n          \"SECURE MY FOUNDING DRIVER SPOT \u2014 $59 &nbsp; \u2192\";\n\n      }\n\n    }\n  );\n\n<\/script>\n\n<\/div>\n\n\n\n<style>\n\/* =========================================================\n   TYLO \u2014 COMPACT LANDING FOOTER\n   ========================================================= *\/\n\n.tylo-footer {\n  position: relative;\n  width: 100%;\n  background: #ffffff;\n  overflow: hidden;\n  padding: 58px 7% 22px;\n  color: #182044;\n  font-family: Arial, Helvetica, sans-serif;\n  box-sizing: border-box;\n}\n\n\/* Soft decorative background *\/\n.tylo-footer::after {\n  content: \"\";\n  position: absolute;\n  width: 420px;\n  height: 420px;\n  right: -210px;\n  top: 20px;\n  border-radius: 50%;\n  background: radial-gradient(\n    circle,\n    rgba(92, 45, 255, 0.09) 0%,\n    rgba(92, 45, 255, 0.035) 45%,\n    rgba(92, 45, 255, 0) 72%\n  );\n  pointer-events: none;\n}\n\n\/* Main footer content *\/\n.tylo-footer-inner {\n  position: relative;\n  z-index: 2;\n  max-width: 1180px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 1.5fr 1fr 1fr;\n  gap: 70px;\n  align-items: start;\n}\n\n\/* ---------------------------------------------------------\n   BRAND\n   --------------------------------------------------------- *\/\n\n.tylo-footer-brand {\n  max-width: 360px;\n}\n\n.tylo-footer-logo {\n  display: inline-block;\n  margin-bottom: 13px;\n  font-size: 42px;\n  line-height: 0.9;\n  font-weight: 900;\n  letter-spacing: -4px;\n  color: #5118f5;\n  text-decoration: none;\n}\n\n.tylo-footer-logo span {\n  font-size: 13px;\n  vertical-align: top;\n  margin-left: 3px;\n  letter-spacing: 0;\n  color: #687398;\n  position: relative;\n  top: -3px;\n}\n\n.tylo-footer-tagline {\n  margin: 0 0 12px;\n  font-size: 13px;\n  line-height: 1.4;\n  font-weight: 700;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  color: #536187;\n}\n\n.tylo-footer-description {\n  margin: 0;\n  max-width: 330px;\n  font-size: 14px;\n  line-height: 1.65;\n  color: #71809f;\n}\n\n\/* ---------------------------------------------------------\n   SOCIAL\n   --------------------------------------------------------- *\/\n\n.tylo-footer-social {\n  display: flex;\n  align-items: center;\n  gap: 17px;\n  margin-top: 20px;\n}\n\n.tylo-footer-social a {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 27px;\n  height: 27px;\n  border-radius: 50%;\n  color: #667394;\n  text-decoration: none;\n  font-size: 12px;\n  font-weight: 700;\n  transition: all 0.2s ease;\n}\n\n.tylo-footer-social a:hover {\n  color: #5118f5;\n  transform: translateY(-2px);\n}\n\n\/* ---------------------------------------------------------\n   COLUMNS\n   --------------------------------------------------------- *\/\n\n.tylo-footer-column {\n  padding-left: 28px;\n  border-left: 1px solid #e8ebf4;\n}\n\n.tylo-footer-heading {\n  margin: 2px 0 18px;\n  font-size: 12px;\n  line-height: 1;\n  font-weight: 800;\n  letter-spacing: 2.5px;\n  text-transform: uppercase;\n  color: #25345d;\n}\n\n.tylo-footer-links {\n  display: flex;\n  flex-direction: column;\n  gap: 13px;\n}\n\n.tylo-footer-links a {\n  color: #5f6d8d;\n  text-decoration: none;\n  font-size: 14px;\n  line-height: 1.3;\n  transition: color 0.2s ease;\n}\n\n.tylo-footer-links a:hover {\n  color: #5118f5;\n}\n\n\/* ---------------------------------------------------------\n   BOTTOM LINE\n   --------------------------------------------------------- *\/\n\n.tylo-footer-bottom {\n  position: relative;\n  z-index: 2;\n  max-width: 1180px;\n  margin: 38px auto 0;\n  padding-top: 17px;\n  border-top: 1px solid #e9ecf4;\n}\n\n.tylo-footer-copy {\n  margin: 0;\n  font-size: 11px;\n  color: #8a95ae;\n}\n\n\/* ---------------------------------------------------------\n   MOBILE\n   --------------------------------------------------------- *\/\n\n@media (max-width: 800px) {\n\n  .tylo-footer {\n    padding: 45px 24px 20px;\n  }\n\n  .tylo-footer-inner {\n    grid-template-columns: 1fr 1fr;\n    gap: 35px 30px;\n  }\n\n  .tylo-footer-brand {\n    grid-column: 1 \/ -1;\n    max-width: 100%;\n  }\n\n  .tylo-footer-column {\n    padding-left: 0;\n    border-left: none;\n  }\n\n  .tylo-footer-bottom {\n    margin-top: 32px;\n  }\n}\n\n@media (max-width: 520px) {\n\n  .tylo-footer {\n    padding: 40px 22px 18px;\n  }\n\n  .tylo-footer-inner {\n    grid-template-columns: 1fr;\n    gap: 30px;\n  }\n\n  .tylo-footer-brand {\n    grid-column: auto;\n  }\n\n  .tylo-footer-logo {\n    font-size: 38px;\n  }\n\n  .tylo-footer-heading {\n    margin-bottom: 14px;\n  }\n\n  .tylo-footer-links {\n    gap: 11px;\n  }\n}\n<\/style>\n\n\n<footer class=\"tylo-footer\">\n\n  <div class=\"tylo-footer-inner\">\n\n    <!-- BRAND -->\n    <div class=\"tylo-footer-brand\">\n\n      <a href=\"\/\" class=\"tylo-footer-logo\">\n        Tylo<span>\u00ae<\/span>\n      <\/a>\n\n      <p class=\"tylo-footer-tagline\">\n        Drive more. Keep more.\n      <\/p>\n\n      <p class=\"tylo-footer-description\">\n        The rideshare platform built for drivers.\n        Keep more of what you earn and drive on your terms.\n      <\/p>\n\n      <div class=\"tylo-footer-social\">\n\n        <a href=\"#\" aria-label=\"Instagram\">\n          IG\n        <\/a>\n\n        <a href=\"#\" aria-label=\"Facebook\">\n          f\n        <\/a>\n\n        <a href=\"#\" aria-label=\"YouTube\">\n          \u25b6\n        <\/a>\n\n        <a href=\"#\" aria-label=\"LinkedIn\">\n          in\n        <\/a>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- DRIVERS -->\n    <div class=\"tylo-footer-column\">\n\n      <div class=\"tylo-footer-heading\">\n        Drivers\n      <\/div>\n\n      <div class=\"tylo-footer-links\">\n\n        <!-- GO DIRECTLY TO REGISTRATION FORM -->\n        <a href=\"#tylo-registration\">\n          Driver Registration\n        <\/a>\n\n        <a href=\"#founding-driver\">\n          Founding Driver\n        <\/a>\n\n        <a href=\"#waitlist\">\n          Join the Waitlist\n        <\/a>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- LEGAL -->\n    <div class=\"tylo-footer-column\">\n\n      <div class=\"tylo-footer-heading\">\n        Legal\n      <\/div>\n\n      <div class=\"tylo-footer-links\">\n\n        <!-- TERMS & CONDITIONS \u2014 PAGE 32 -->\n        <a href=\"?page_id=32\">\n          Terms &amp; Conditions\n        <\/a>\n\n        <!-- PRIVACY POLICY \u2014 PAGE 35 -->\n        <a href=\"?page_id=35\">\n          Privacy Policy\n        <\/a>\n\n        <!-- REFUND POLICY \u2014 PAGE 37 -->\n        <a href=\"?page_id=37\">\n          Refund Policy\n        <\/a>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n  <!-- ONLY SMALL COPYRIGHT LINE -->\n  <div class=\"tylo-footer-bottom\">\n\n    <p class=\"tylo-footer-copy\">\n      \u00a9 2026 TYLO APP CORP.\n    <\/p>\n\n  <\/div>\n\n<\/footer>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tylo THE FIRST 500 BECOME A TYLO FOUNDING DRIVER. Drive more. Keep 100%. Launching in the U.S. \u00b7 December 10, 2026 SECURE MY FOUNDING SPOT \u2192 \u25b7 Watch video WHY TYLO \u2713 0% Commission Keep more of every ride you complete. \u2713 Lower Fares Better prices for riders without cutting driver earnings. \u2713 Higher Earnings [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tyloapp.com\/es\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tyloapp.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tyloapp.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tyloapp.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tyloapp.com\/es\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":20,"href":"https:\/\/tyloapp.com\/es\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":61,"href":"https:\/\/tyloapp.com\/es\/wp-json\/wp\/v2\/pages\/12\/revisions\/61"}],"wp:attachment":[{"href":"https:\/\/tyloapp.com\/es\/wp-json\/wp\/v2\/media?parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}