/* ---------------------------------------------------------------------------
   Producer-facing content (FCT-87).

   Loaded last, after responsive.css, so these rules win. Everything here is
   scoped to the new sections or to #home, deliberately: the template's own
   rules stay untouched, and this file can be removed to get the old page back.

   The template's hero was built for a one-word headline (170px, 55px line
   height). The new headline is a sentence, so #home needs real overrides
   rather than tweaks.
   --------------------------------------------------------------------------- */

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

/* The template reserves 800px for a one-word headline. This copy needs far
   less, and the space left over is where the video card now sits. */
/* Content-sized, not fixed. A fixed height was overflowed by the stacked
   buttons on a phone, which threw the card out of the hero entirely. The
   bottom padding is the room the video card overlaps into, so the composition
   holds however long the copy gets. */
#home.slider_parallax {
    height: auto;
    padding-bottom: 226px;
}

/* The hero is the page's h1. The template styled .hero-text h2, so the colour
   and weight it used to inherit have to be stated here. */
#home .hero-text h1 {
    color: #fff;
    font-weight: 500;
    font-size: 64px;
    line-height: 1.14;
    padding-top: 100px;
    letter-spacing: -0.5px;
    text-transform: none;
    margin-bottom: 22px;
}

#home .hero-text p {
    font-size: 22px;
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto 34px;
}

#home .hero-text .fd-hero-actions {
    margin-top: 0;
}

#home .hero-text .fd-hero-actions .btn {
    margin: 0 8px 12px;
}

/* The template's .btn-home-bg-two is itself an outline button, so it serves as the
   secondary action. This is its solid counterpart, so the two hero buttons read as
   a primary and a secondary rather than as two equal choices. */
.fd-btn-primary,
.fd-btn-primary:focus {
    background: #A7CF00;
    border: 1px solid #A7CF00;
    border-radius: 0;
    color: #fff;
    padding: 12px 30px;
    text-transform: uppercase;
    transition: all 0.2s ease 0s;
}

.fd-btn-primary:hover {
    background: #fff;
    border-color: #fff;
    color: #202020;
}

/* The line under the hero buttons that says where the closed registration leads
   instead. Sits on the gradient, so it is light-on-dark like the rest of the hero. */
#home .hero-text .fd-hero-note {
    font-family: Montserrat, serif;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin: 6px auto 0;
    max-width: 620px;
}

#home .hero-text .fd-hero-note a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

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

/* White line drawings of food, as on the social media posts. They live in the
   gutters beside the centred copy, so they never sit behind a word. Placement is
   per drawing, from the custom properties set on it in index.html. */
#home .fd-hero-doodles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Above the doodles, so a drawing that strays inwards on some width goes under
   the copy rather than over it. */
#home > .container {
    position: relative;
    z-index: 1;
}

#home .fd-doodle-defs {
    position: absolute;
}

#home .fd-doodle {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 64px;
    height: 64px;
    transform: rotate(var(--r, 0deg));
    color: rgba(255, 255, 255, 0.85);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Between tablet and desktop the gutters are narrow: smaller drawings, and the
   inner column of them goes, since it would reach the copy. */
@media (max-width: 1199px) {
    #home .fd-doodle {
        width: 44px;
        height: 44px;
    }

    #home .fd-doodle-inner {
        display: none;
    }
}

/* A phone has no gutters, the copy fills the width. Only the four marked data-m
   remain, small and fainter, in a loose row in the free band between the hero
   note and the video card — enough to carry the look, not enough to crowd. */
@media (max-width: 768px) {
    #home .fd-doodle {
        display: none;
    }

    /* Bottom-anchored: the band's distance from the hero's bottom edge is fixed
       (the card overlaps the last 90px), its distance from the top is not. */
    #home .fd-doodle[data-m] {
        display: block;
        left: var(--mx);
        top: auto;
        bottom: var(--mb);
        transform: rotate(var(--mr));
        width: 32px;
        height: 32px;
        color: rgba(255, 255, 255, 0.7);
    }
}

/* ---------- Closed call to action ---------- */

/* Both the hero and the registration button are disabled until launch. Keeping
   them visible is the point — they show there is something to register for — so
   they must read as "not yet", never as "broken" or as "try clicking harder".
   :hover is neutralised too: without this the primary button still turns white on
   hover and invites the click it will not accept. */
.fd-btn-soon,
.fd-btn-soon:hover,
.fd-btn-soon:focus,
.fd-btn-soon[disabled],
.fd-btn-soon[disabled]:hover,
.fd-btn-soon[disabled]:focus {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.55);
    color: rgba(255, 255, 255, 0.75);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

/* On the light registration section the same button needs dark ink to stay
   readable; it is the only place .fd-btn-soon sits on white. */
.fd-btn-register.fd-btn-soon,
.fd-btn-register.fd-btn-soon:hover,
.fd-btn-register.fd-btn-soon:focus,
.fd-btn-register.fd-btn-soon[disabled],
.fd-btn-register.fd-btn-soon[disabled]:hover,
.fd-btn-register.fd-btn-soon[disabled]:focus {
    border: 2px dashed #b9bdb0;
    color: #8a8f82;
}

/* ---------- Shared section furniture ---------- */

/* The template hangs negative left margins on .section-header for its own
   centred layout. The new sections are text-left, so reset them here only. */
.fd-section .section-header h2,
.fd-section .section-header p {
    margin-left: 0;
}

.fd-section .section-header h2 {
    font-size: 44px;
    letter-spacing: 2px;
}

.fd-section {
    padding-top: 70px;
    padding-bottom: 70px;
}

.fd-section-alt {
    background: #F2F1EF;
}

/* style.css gives every .section-header a 50px top margin on top of the section's own
   padding: 120px from a section's edge to its title, 190px of white after the section
   above. The padding alone is the gap. */
.fd-section .section-header {
    margin-top: 0;
}

.fd-lead {
    font-family: Montserrat, serif;
    font-size: 21px;
    line-height: 1.6;
    max-width: 780px;
    margin: 0 auto 34px;
    text-align: center;
}

.fd-quote {
    font-family: Montserrat, serif;
    font-size: 25px;
    line-height: 1.5;
    font-weight: 600;
    color: #202020;
    border-left: 5px solid #A7CF00;
    padding: 6px 0 6px 24px;
    margin: 40px auto 0;
    max-width: 760px;
    text-align: left;
}

/* ---------- Problem list ---------- */

.fd-pains {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 820px;
}

.fd-pains li {
    font-family: Montserrat, serif;
    font-size: 19px;
    line-height: 1.55;
    padding: 14px 0 14px 38px;
    position: relative;
    border-bottom: 1px solid #e5e5e5;
    /* The section is text-center for its heading; the list reads as a list. */
    text-align: left;
}

.fd-pains li:last-child {
    border-bottom: none;
}

.fd-pains li:before {
    content: "—";
    color: #A7CF00;
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 14px;
}

/* ---------- Numbered "what we're building" steps ---------- */

.fd-steps {
    list-style: none;
    counter-reset: fd-step;
    padding: 0;
    margin: 0;
}

.fd-steps li {
    counter-increment: fd-step;
    position: relative;
    padding: 0 0 30px 66px;
    min-height: 52px;
}

.fd-steps li:before {
    content: counter(fd-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 50%;
    background: #A7CF00;
    color: #fff;
    font-family: Montserrat, serif;
    font-weight: 700;
    font-size: 20px;
}

.fd-steps h3 {
    font-family: Montserrat, serif;
    font-size: 20px;
    font-weight: 700;
    margin: 10px 0 6px;
    letter-spacing: 0;
}

.fd-steps p {
    font-family: Montserrat, serif;
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
    color: #444444;
}

/* ---------- Status: today vs. later ---------- */

.fd-status {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: 5px solid #A7CF00;
    padding: 28px 30px 22px;
    height: 100%;
    margin-bottom: 24px;
}

.fd-status-later {
    border-top-color: #b9b9b9;
}

.fd-status h3 {
    font-family: Montserrat, serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.fd-status ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fd-status li {
    font-family: Montserrat, serif;
    font-size: 17px;
    line-height: 1.55;
    padding: 9px 0 9px 26px;
    position: relative;
}

.fd-status li:before {
    content: "\2713";
    color: #A7CF00;
    position: absolute;
    left: 0;
    top: 9px;
    font-weight: 700;
}

.fd-status-later li:before {
    content: "\2022";
    color: #999999;
}

.fd-note {
    font-family: Montserrat, serif;
    font-size: 18px;
    line-height: 1.6;
    max-width: 820px;
    margin: 26px auto 0;
    text-align: center;
    color: #444444;
}

/* ---------- Benefits ---------- */

.fd-benefits {
    margin-top: 10px;
}

.fd-benefit {
    padding: 22px 26px 18px;
    border-left: 4px solid #A7CF00;
    margin-bottom: 26px;
    height: 100%;
}

.fd-benefit h3 {
    font-family: Montserrat, serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 8px;
}

/* Side-by-side cards: reserve two lines for the heading so a heading that wraps
   does not push its own body text out of line with its neighbours'. */
@media (min-width: 768px) {
    .fd-benefit h3 {
        min-height: 2.5em;
    }
}

.fd-benefit p {
    font-family: Montserrat, serif;
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
    color: #444444;
}

/* ---------- About us ---------- */

/* Photo and quote side by side on the same 820px measure as the notes; the facts row
   below reuses .fd-benefit unchanged. */
.fd-about {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 820px;
    margin: 0 auto 40px;
}

.fd-about-photo {
    flex: 0 0 240px;
    width: 240px;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 8px;
    border-bottom: 4px solid #A7CF00;
}

.fd-about-text {
    font-family: Montserrat, serif;
    font-size: 19px;
    line-height: 1.6;
    margin: 0 0 14px;
}

.fd-about-sign {
    font-family: Montserrat, serif;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #444444;
}

@media (max-width: 767px) {
    .fd-about {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .fd-about-photo {
        flex-basis: auto;
        width: 200px;
    }

    .fd-about-text {
        font-size: 17px;
    }
}

/* ---------- Customer view (phone screenshots) ---------- */

#appshots[hidden] {
    display: none;
}

/* A grid rather than wrapping flex: with four frames, flex leaves a lonely fourth on its own
   row as soon as the container narrows. The grid steps 4 -> 2 -> 1 instead, so the rows stay
   even at every width. */
.fd-appshot-frames {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 40px auto 0;
    justify-items: center;
}

.fd-appshot {
    margin: 0;
    max-width: 230px;
    width: 100%;
    text-align: center;
}

/* A plain device frame drawn in CSS rather than a PNG bezel: no extra asset to load,
   and it cannot go out of date with a phone generation. The aspect ratio is the one
   the screenshots are taken at, so the image fills it without letterboxing. */
.fd-appshot-phone {
    border: 8px solid #202020;
    border-radius: 26px;
    background: #202020;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    aspect-ratio: 375 / 812;
}

.fd-appshot-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.fd-appshot-caption {
    font-family: Montserrat, serif;
    font-size: 15px;
    line-height: 1.5;
    color: #444444;
    margin-top: 16px;
}

/* ---------- Launch section ---------- */

.fd-section-dark {
    background: #202020;
}

.fd-section-dark .section-header h2 {
    color: #fff;
}

.fd-lead-invert {
    color: #f0f0f0;
}

.fd-section-dark .fd-status {
    background: transparent;
    border: 1px solid #444444;
    border-top: 5px solid #A7CF00;
}

.fd-section-dark .fd-status h3,
.fd-section-dark .fd-status li {
    color: #f0f0f0;
}

.fd-section-dark .fd-status-later {
    border-top-color: #666666;
}

/* display:flex on the element itself beats the user agent's [hidden]{display:none},
   so without this the countdown shows 0/00/00/00 whenever it is switched off. */
.fd-countdown[hidden],
.fd-launch-fallback[hidden],
.fd-offer[hidden] {
    display: none;
}

.fd-countdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 0 0 34px;
}

.fd-cd-cell {
    background: #A7CF00;
    color: #fff;
    min-width: 118px;
    padding: 18px 10px 14px;
    text-align: center;
}

.fd-cd-num {
    display: block;
    font-family: Montserrat, serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    /* Tabular figures stop the seconds cell jittering on every tick. */
    font-variant-numeric: tabular-nums;
}

.fd-cd-label {
    display: block;
    font-family: Montserrat, serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 6px;
    opacity: 0.9;
}

.fd-launch-fallback {
    font-family: Montserrat, serif;
    font-size: 19px;
    line-height: 1.6;
    color: #f0f0f0;
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
}

/* ---------- Early-bird offer ---------- */

/* Same frame as the roadmap columns below, so it reads as a statement of fact in the launch
   section rather than as an ad dropped on top of it. */
.fd-offer {
    max-width: 760px;
    margin: 0 auto 34px;
    padding: 26px 28px;
    border: 1px solid #444444;
    border-top: 5px solid #A7CF00;
    text-align: center;
}

/* Deliberately the same block as .fd-cd-cell: the two scarcities on this section — time and
   places — should read as one statement, not as two competing badges. */
.fd-offer-seats {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    background: #A7CF00;
    color: #fff;
    padding: 10px 22px 8px;
    margin: 0 0 18px;
}

.fd-offer-seats-num {
    font-family: Montserrat, serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
}

.fd-offer-seats-label {
    font-family: Montserrat, serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.fd-offer-head {
    font-family: Montserrat, serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    margin: 0 0 12px;
}

.fd-offer-body {
    font-family: Montserrat, serif;
    font-size: 17px;
    line-height: 1.6;
    color: #f0f0f0;
    margin: 0 0 12px;
}

/* ---------- Launch notification ---------- */

.fd-notify {
    max-width: 560px;
    margin: 0 auto 46px;
    text-align: center;
}

/* Address on its own line, then captcha and button side by side beneath it. Everything keeps
   the one 560px measure the block is built on: the row is full width, the captcha takes the
   fixed width its widget needs, and the button takes what is left. */
.fd-notify-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Shared by both forms on the page. The captcha widget renders an iframe at its own fixed
   size, so it neither grows nor shrinks — only the button flexes to fill what is left, and the
   pair ends up exactly as wide as the fields above it. */
.fd-form-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.fd-form-actions .h-captcha {
    flex: 0 0 auto;
    line-height: 0;
}

.fd-form-actions .btn {
    flex: 1 1 auto;
}

.fd-notify-form .form-control {
    width: 100%;
    height: 56px;
    border: 1px solid #444444;
    border-radius: 0;
    background: #fff;
    color: #202020;
    font-family: Montserrat, serif;
    font-size: 17px;
    padding: 0 18px;
    box-shadow: none;
}

.fd-notify-form .form-control:focus {
    border-color: #A7CF00;
    box-shadow: none;
}

.fd-btn-notify,
.fd-btn-notify:focus {
    background: #A7CF00;
    border: 1px solid #A7CF00;
    border-radius: 0;
    color: #fff;
    font-family: Montserrat, serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    height: 56px;
    padding: 0 30px;
    transition: all 0.2s ease 0s;
}

.fd-btn-notify:hover {
    background: #fff;
    border-color: #fff;
    color: #202020;
}

/* The result line spans the whole form row rather than squeezing in beside the
   field, so a long message from web3forms does not shove the button off. */
.fd-notify-output {
    width: 100%;
    min-height: 0;
}

.fd-notify-output p {
    font-family: Montserrat, serif;
    font-size: 15px;
    color: #f0f0f0;
    margin: 0;
}

.fd-notify-note {
    font-family: Montserrat, serif;
    font-size: 14px;
    line-height: 1.6;
    color: #b6b6b6;
    margin: 14px 0 0;
}

/* ---------- Explainer video ---------- */

#video[hidden] {
    display: none;
}

/* The card is pulled up over the hero so it is visible without scrolling on a
   laptop. The negative margin lives on the section, so when there is no video
   the whole thing disappears and the hero simply ends where it ends. */
/* Uses the id so this wins over `.fd-section`'s responsive padding, which is
   declared later in this file at the same specificity and was silently adding
   50px back on top of the card. */
#video.fd-video-section {
    background: transparent;
    padding-top: 0;
    padding-bottom: 64px;
    margin-top: -180px;
    position: relative;
    z-index: 5;
}

/* Bootstrap 3's .sr-only is present but the heading needs to be reliably out of
   flow regardless of which stylesheet wins, so state it here too. */
.fd-video-title.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Sits on the hero gradient now, not on a grey band. */
.fd-video-title {
    font-family: Montserrat, serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    margin: 0 0 14px;
}

.fd-video-frame {
    max-width: 760px;
    margin: 0 auto;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
}

/* 16:9 without the padding-top hack, so the poster and the player that
   replaces it occupy exactly the same box and nothing jumps on click. */
.fd-video-facade,
.fd-video-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #202020;
    border: 0;
    padding: 0;
    margin: 0;
}

.fd-video-facade {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.fd-video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The play affordance: a white disc with a triangle cut from borders, so it
   needs no image and stays crisp at any size. */
.fd-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    border-radius: 50%;
    background: #A7CF00;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, background 0.2s ease;
}

.fd-video-play:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -15px 0 0 -9px;
    border-style: solid;
    border-width: 15px 0 15px 24px;
    border-color: transparent transparent transparent #fff;
}

.fd-video-facade:hover .fd-video-play,
.fd-video-facade:focus .fd-video-play {
    transform: scale(1.08);
    background: #202020;
}

.fd-video-facade:focus {
    outline: 3px solid #A7CF00;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .fd-video-play {
        transition: none;
    }

    .fd-video-facade:hover .fd-video-play,
    .fd-video-facade:focus .fd-video-play {
        transform: none;
    }
}

/* ---------- Language menu ---------- */

/* These were <a href="#">, which jquery.nav.js hijacked and then threw on
   ("Cannot read properties of undefined (reading 'top')"). Buttons styled to
   match the dropdown links the template already renders. */
.fd-lang-option {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    padding: 3px 20px;
    line-height: 1.42857143;
    color: #333333;
    white-space: nowrap;
}

.fd-lang-option:hover,
.fd-lang-option:focus {
    background: #f5f5f5;
    color: #262626;
}

/* ---------- Registration block ---------- */

/* One measure for the whole block, matching the video card's 760px, so the page
   repeats a single column width instead of using a Bootstrap offset here and a
   full-width container there. This is what made the form look unaligned. */
.fd-measure {
    max-width: 760px;
    margin: 0 auto;
}

/* Inside the measure these no longer need their own narrower caps — their edges
   should line up with the fields. */
.fd-measure .fd-form-intro,
.fd-measure .fd-privacy-note {
    max-width: 100%;
}

.fd-register-cta {
    text-align: center;
    margin: 0 0 8px;
}

.fd-btn-register,
.fd-btn-register:focus {
    display: inline-block;
    background: #A7CF00;
    border: 2px solid #A7CF00;
    border-radius: 0;
    color: #fff;
    font-family: Montserrat, serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 19px 56px;
    transition: all 0.2s ease 0s;
}

.fd-btn-register:hover {
    background: #202020;
    border-color: #202020;
    color: #fff;
}

.fd-register-note {
    font-family: Montserrat, serif;
    font-size: 14px;
    color: #6d7266;
    margin: 14px 0 0;
}

/* Rule with the word sitting in the gap — marks the drop from the primary action
   to the secondary one. */
.fd-or {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 42px 0 30px;
    font-family: Montserrat, serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8a8f82;
}

.fd-or:before,
.fd-or:after {
    content: "";
    flex: 1;
    height: 1px;
    background: #d8dad0;
}

.fd-form-heading {
    font-family: Montserrat, serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    margin: 0 0 26px;
}

/* ---------- Form ---------- */

.fd-form-intro {
    font-family: Montserrat, serif;
    font-size: 19px;
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto 30px;
    text-align: center;
}

.fd-field-label {
    display: block;
    font-family: Montserrat, serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: left;
}

/* Below the button now, like the launch form's own note: the last thing each form says is
   what happens to what you just typed. */
.fd-privacy-note {
    font-family: Montserrat, serif;
    font-size: 14px;
    line-height: 1.6;
    color: #444444;
    max-width: 720px;
    margin: 14px auto 0;
    text-align: center;
}

/* Honeypot: never shown to a person, so anything that fills it is a bot. */
.fd-botcheck {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* ---------- Consumer pointer in the footer ---------- */

.fd-consumer-pointer {
    font-family: Montserrat, serif;
    font-size: 15px;
    line-height: 1.6;
    padding: 0 0 6px;
}

.fd-consumer-pointer a {
    color: #A7CF00;
    font-weight: 700;
}

/* ---------- Mobile navigation panel ---------- */

/* The burger takes over at 1199px, not at Bootstrap's 767px: Bootstrap 3's container
   is a fixed 970px from 992 to 1199, and in it the six items no longer fit on one line
   — "Sprache" dropped to a second row under the others. The bar is shown only where it
   fits in one row; everywhere else the panel does the job.

   Below the breakpoint the panel is ours, not Bootstrap's — see mobile-nav.js for
   why. The !important declarations are not decoration: they have to beat BS3's
   `.collapse { display: none }` on the same element, and any inline height a
   Bootstrap build might still set on it. An author !important outranks an inline
   declaration, which is exactly the case that was broken here. */
@media (max-width: 1199px) {
    /* From 768px up, BS3 hides the toggle and puts the two header columns side by
       side. Undo both, so 768–1199 gets exactly the phone header: logo row, toggle on
       the right, panel dropping below. */
    #fd-nav-toggle.navbar-toggle {
        display: block;
    }

    #menu .col-md-3.col-sm-3,
    #menu .col-md-9.col-sm-9 {
        float: none;
        width: 100%;
    }

    /* BS3 also floats the toggle's wrapper left from 768px, which shrink-wraps it and
       parks the toggle on top of the logo instead of at the right edge. */
    #menu .navbar-header {
        float: none;
    }

    /* With the logo on a row of its own, the headline sits right under it rather than
       beside it. responsive.css gives the hero 50px of extra room for exactly this, but
       only up to 768px — so 769–1199 had the headline nearly touching the logo. */
    #home .hero-text {
        margin-top: 50px;
    }

    #navbar.navbar-collapse {
        display: none !important;
        height: auto !important;
        max-height: none;
        overflow: visible;
        border-top: 0;
        box-shadow: none;
        padding: 0;
    }

    /* Bootstrap puts position:relative on every column, which would make the column
       the panel's containing block — and the column is 30px narrower than the
       viewport, so `right: 15px` landed 30px short. Static here hands the job to
       #menu. Scoped to this header and this breakpoint; nothing else in the column
       is positioned against it. */
    #menu .col-md-9.col-sm-9 {
        position: static;
    }

    /* The panel is exactly as wide as the video card below it, not the viewport. It is anchored to the header's .container, which
       sits 15px left of the page's other containers: the .row around it has
       `width: 100%` plus Bootstrap's -15px margin, so it starts left of the page
       and ends short of it. Hence 30px on the left (that shift plus the container
       padding) and 0 on the right (the shift cancels the padding). This holds at
       every Bootstrap container width, the fluid phone one included.
       `top` is deliberately omitted: with auto, an absolutely positioned box keeps
       its static position, so the panel stays exactly where it dropped and opening
       it shifts nothing. */
    #menu .container {
        position: relative;
    }

    #navbar.navbar-collapse.fd-nav-open {
        display: block !important;
        position: absolute;
        left: 30px;
        right: 0;
        /* The video card is capped at 760px and centred (.fd-video-frame), so from
           992px up it is narrower than the content column. Same cap, same centring:
           with both left and right set, the auto margins split what the cap leaves. */
        max-width: 760px;
        z-index: 30;
        border-radius: 8px;
        margin: 10px auto 0;
        padding: 6px 0;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
        /* Fallback for browsers without backdrop-filter: opaque enough to read
           white text on, since nothing will be blurring the hero behind it. */
        background: rgba(22, 22, 22, 0.88);
        border: 1px solid rgba(255, 255, 255, 0.16);
    }

    /* Where the browser can blur what is behind it, the panel becomes glass: the
       banner's colour stays strong (saturate pushes it back up, because blurring
       averages colour towards grey) and the headline stays visible underneath
       without competing with the menu. */
    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        #navbar.navbar-collapse.fd-nav-open {
            background: rgba(20, 20, 20, 0.32);
            /* 10px, not 18: at 18 the headline behind dissolves completely and the
               panel might as well be opaque. At 6 it is legible and competes with
               the menu. 10 leaves soft shapes — you can tell something is there,
               you cannot read it. */
            -webkit-backdrop-filter: blur(4px) saturate(160%);
            backdrop-filter: blur(4px) saturate(160%);
        }
    }

    /* The template puts `transition: all .5s` on every button and link. Inside a
       panel that appears and disappears, that animates state changes that should
       be instant and is the likeliest source of a brief flash on tap. Nothing in
       here is meant to animate. */
    #navbar.fd-nav-open,
    #navbar.fd-nav-open * {
        transition: none !important;
    }

    #navbar.fd-nav-open #nav {
        margin: 0;
        float: none;
    }

    #navbar.fd-nav-open #nav > li {
        float: none;
        display: block;
    }

    /* 48px of height per row: a thumb target, not a mouse target. */
    #navbar.fd-nav-open #nav > li > a,
    #navbar.fd-nav-open #nav > li .transparent-button {
        display: block;
        width: 100%;
        text-align: left;
        padding: 14px 22px;
        line-height: 20px;
        color: #fff;
        /* The panel is deliberately light, and the top of it sits over the bright
           end of the gradient. A shadow carries the label there without darkening
           the glass, which is the whole point of letting the banner through. */
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    }

    #navbar.fd-nav-open #nav > li + li > a {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* Tinted with white rather than a flat grey: on glass a solid colour would
       cover the very background the panel is meant to let through. */
    #navbar.fd-nav-open #nav > li > a:hover,
    #navbar.fd-nav-open #nav > li > a:focus,
    #navbar.fd-nav-open #nav > li > a:active {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    /* The language dropdown keeps running on Bootstrap; it only needs to sit inside
       the panel rather than hang off its edge. */
    /* The wrapper shrink-wraps the button by default, which left the submenu below
       resolving its width against ~100px. Block-level and auto: it then fills the
       row it sits in without overhanging it, which a percentage would do — the row
       is inset a few pixels from the panel edge. */
    /* margin: style.css indents the wrapper 50px for the desktop bar, which in the
       panel made "Sprache" look like a submenu of the row above it. It is a row of
       its own: same inset as the others, and the same divider above it. */
    #navbar.fd-nav-open .dropdown-customized {
        position: static;
        display: block;
        width: auto;
        margin: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* max-width is the one that matters: style.css caps EVERY .dropdown-menu at
       100px, which is why width:100% alone left a little box floating inside a
       345px panel. The template's language menu is the only dropdown on the page,
       so the cap exists for the desktop bar and has to be lifted here. */
    #navbar.fd-nav-open .dropdown-menu {
        position: static;
        float: none;
        /* auto, not 100%: the wrapper is inset a few pixels inside the panel, and a
           percentage would resolve to the full panel width and hang over the edge.
           A block-level box with auto fills exactly what is available. */
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.1);
    }

    /* Every state spelled out, and native button rendering switched off: a <button>
       that falls back to its default look for even one frame shows a light box with
       a light border — exactly the white flash this panel must not produce. */
    #navbar.fd-nav-open .dropdown-menu .fd-lang-option,
    #navbar.fd-nav-open .dropdown-menu .fd-lang-option:hover,
    #navbar.fd-nav-open .dropdown-menu .fd-lang-option:focus,
    #navbar.fd-nav-open .dropdown-menu .fd-lang-option:active {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        text-align: left;
        padding: 12px 34px;
        color: #f0f0f0;
        background: transparent;
        border: 0;
        outline: none;
        box-shadow: none;
    }

    #navbar.fd-nav-open .dropdown-menu .fd-lang-option:hover,
    #navbar.fd-nav-open .dropdown-menu .fd-lang-option:focus {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    /* Only the colour here; the pinning lives in one place above, for both widths. */
    #navbar.fd-nav-open #languageDropdown {
        color: #fff;
    }
}

/* Above 768px the hero gradient runs left to right and ends in the same red as
   the template's burger, which then all but disappears. Green, the colour at the
   other end, stands out there. Below 768px the gradient runs top to bottom, the
   burger sits on green, and red stays. */
@media (min-width: 769px) and (max-width: 1199px) {
    #fd-nav-toggle.navbar-toggle {
        border-color: #A7CF00;
    }

    #fd-nav-toggle.navbar-toggle .icon-bar {
        background: #A7CF00;
    }
}

/* ---------- The language toggle, at every width ---------- */

/* style.css gives EVERY <button> a coloured background and border, and
   .transparent-button takes it back with `border-color: currentcolor` — which in
   the nav bar is white. With the template's `transition: all .5s` on top, each
   state change animates between those, which is the white frame that flashed when
   the menu opened. The mobile panel pinned this button and the flash went; the
   wide layout was still unpinned, so it kept happening there.

   Every state spelled out, native rendering off, nothing animated. */
#navbar #languageDropdown,
#navbar #languageDropdown:hover,
#navbar #languageDropdown:focus,
#navbar #languageDropdown:active,
#navbar .dropdown.open > #languageDropdown {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
}

#navbar #languageDropdown,
#navbar #languageDropdown * {
    transition: none !important;
}

/* ---------- Language menu on the wide layout ---------- */

/* The mobile panel became glass; this was left as the untouched Bootstrap 3
   widget — a 100px white box with grey text hanging under a dark bar. Same
   treatment here, so the two layouts agree. It floats over the hero gradient
   just like the mobile panel does, so the same material works. Starts where the bar
   does — below 1200px the language menu lives in the panel. */
@media (min-width: 1200px) {
    #navbar .dropdown-menu {
        /* style.css caps every .dropdown-menu at 100px; lifted here as on mobile. */
        max-width: none;
        min-width: 170px;
        padding: 6px 0;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 8px;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
        /* Fallback first: without a blur behind it, white text needs an opaque panel. */
        background: rgba(22, 22, 22, 0.88);
    }

    #navbar .dropdown-menu .fd-lang-option,
    #navbar .dropdown-menu .fd-lang-option:hover,
    #navbar .dropdown-menu .fd-lang-option:focus,
    #navbar .dropdown-menu .fd-lang-option:active {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        text-align: left;
        padding: 11px 18px;
        color: #fff;
        background: transparent;
        border: 0;
        outline: none;
        box-shadow: none;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    }

    #navbar .dropdown-menu .fd-lang-option:hover,
    #navbar .dropdown-menu .fd-lang-option:focus {
        background: rgba(255, 255, 255, 0.12);
    }

    /* Same reasoning as in the panel: the template animates every property on
       every button, which is what produced the brief flash on opening. */
    #navbar .dropdown-menu,
    #navbar .dropdown-menu * {
        transition: none !important;
    }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    @media (min-width: 1200px) {
        #navbar .dropdown-menu {
            background: rgba(20, 20, 20, 0.32);
            -webkit-backdrop-filter: blur(4px) saturate(160%);
            backdrop-filter: blur(4px) saturate(160%);
        }
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
    #home.slider_parallax {
        padding-bottom: 232px;
    }

    #home .hero-text h1 {
        font-size: 50px;
        padding-top: 90px;
    }

    #video.fd-video-section {
        margin-top: -160px;
    }

    #home .hero-text p {
        font-size: 20px;
    }

    .fd-section .section-header h2 {
        font-size: 34px;
    }
}

/* Two per row from tablet down: four 230px frames plus gaps no longer fit. */
@media (max-width: 1199px) {
    .fd-appshot-frames {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 560px;
    }
}

/* One per row once two would each be too small to read. */
@media (max-width: 575px) {
    .fd-appshot-frames {
        grid-template-columns: minmax(0, 1fr);
        max-width: 260px;
        gap: 34px;
    }
}

@media (max-width: 768px) {
    /* 160, not 140: the extra 20px is the band the food doodles sit in. */
    #home.slider_parallax {
        padding-bottom: 160px;
    }

    #home .hero-text h1 {
        font-size: 38px;
        padding-top: 90px;
    }

    #video.fd-video-section {
        margin-top: -90px;
        padding-bottom: 44px;
    }

    .fd-btn-register {
        display: block;
        width: 100%;
        padding: 17px 20px;
        font-size: 17px;
    }

    #home .hero-text p {
        font-size: 18px;
    }

    .fd-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .fd-lead,
    .fd-quote {
        font-size: 18px;
    }

    .fd-quote {
        text-align: left;
    }

    .fd-pains li,
    .fd-steps p,
    .fd-status li,
    .fd-benefit p {
        font-size: 16px;
    }

    .fd-cd-cell {
        min-width: 72px;
        padding: 12px 6px 10px;
    }

    .fd-cd-num {
        font-size: 30px;
    }

    .fd-cd-label {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .fd-launch-fallback {
        font-size: 17px;
    }

    .fd-offer {
        padding: 20px 18px;
    }

    /* Under ~340px of usable width the captcha alone fills the line, so the row becomes a
       column again and the button takes the full measure. */
    .fd-form-actions {
        flex-direction: column;
    }

    .fd-form-actions .btn {
        width: 100%;
    }


    .fd-offer-seats {
        padding: 8px 18px 6px;
    }

    .fd-offer-seats-num {
        font-size: 32px;
    }

    .fd-offer-head {
        font-size: 19px;
    }

    .fd-offer-body {
        font-size: 16px;
    }


    .fd-video-play {
        width: 62px;
        height: 62px;
        margin: -31px 0 0 -31px;
    }

    .fd-video-play:after {
        margin: -11px 0 0 -6px;
        border-width: 11px 0 11px 18px;
    }
}

@media only screen and (max-width: 480px) {
    #home.slider_parallax {
        padding-bottom: 160px;
    }

    #home .hero-text h1 {
        font-size: 31px;
        padding-top: 80px;
    }

    #video.fd-video-section {
        margin-top: -85px;
    }

    #home .hero-text .fd-hero-actions .btn {
        display: block;
        margin: 0 auto 12px;
        max-width: 260px;
    }
}