/*
    The /start marketing pages.

    Colours, type, buttons, cards, tabs and form styling all come from jollysimple.css, which is
    loaded before this. What is here is only what these pages have and the admin does not:
    the navigation bar, the hero, the pricing cards, the mascot and the footer.

    The palette block that used to sit at the top of this file has gone. It defined the same
    colours a second time under different names, which is how the marketing pages and the
    dashboard managed to drift apart in the first place.
*/

/* ── Navigation ─────────────────────────────

   Three things make this glossy rather than plain, and none of them needs markup:

     ::before  a three colour strip along the very top, the same green, amber and plum
               as the stripes in the mark, so the brand is stated before anything is read
     ::after   a single soft highlight sitting over the bar, which is what reads as gloss
     nth-child each link takes one of the three brand colours in turn on hover, so running
               a cursor along the bar lights it up in sequence instead of all one colour
*/
.site-nav {
    position: relative;
    width: 100%;
    background: linear-gradient(180deg, #fff 0%, var(--b3-primary-tint) 100%);
    border-bottom: 1px solid rgba(15, 120, 98, .14);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 6px 20px rgba(46, 38, 32, .06);
}

    /* The stripes. 3px, three hard stops, no gradient bleed between them. */
    .site-nav::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg,
            var(--b3-green) 0%, var(--b3-green) 33.333%,
            var(--b3-plum) 33.333%, var(--b3-plum) 66.666%,
            var(--b3-amber) 66.666%, var(--b3-amber) 100%);
        z-index: 2;
    }

    /* The sheen. Sits above the bar and below the links, and ignores the pointer. */
    .site-nav::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 0;
        right: 0;
        height: 60%;
        background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 100%);
        pointer-events: none;
        z-index: 1;
    }

    .site-nav > .uk-container {
        position: relative;
        z-index: 3;
    }

    .site-nav .uk-navbar-left .uk-logo {
        padding-right: 24px;
        flex-shrink: 0;
    }

    .site-nav .uk-navbar-nav > li > a {
        position: relative;
        font-weight: 700;
        font-size: .9rem;
        color: var(--b3-ink);
        min-height: 64px;
        padding: 0 16px;
        margin: 0 2px;
        border-radius: var(--b3-radius-pill);
        transition: color .18s ease, background-color .18s ease;
    }

        /* The pill grows behind the label rather than the label moving. */
        .site-nav .uk-navbar-nav > li > a::before {
            content: '';
            position: absolute;
            left: 6px;
            right: 6px;
            top: 14px;
            bottom: 14px;
            border-radius: var(--b3-radius-pill);
            background: currentColor;
            opacity: 0;
            transform: scale(.9);
            transition: opacity .18s ease, transform .18s ease;
            z-index: -1;
        }

        .site-nav .uk-navbar-nav > li > a:hover::before,
        .site-nav .uk-navbar-nav > li.uk-active > a::before {
            opacity: .12;
            transform: scale(1);
        }

    /* Each link takes the next brand colour along, then starts again. */
    .site-nav .uk-navbar-nav > li:nth-child(3n+1) > a:hover,
    .site-nav .uk-navbar-nav > li:nth-child(3n+1).uk-active > a { color: var(--b3-green); }

    .site-nav .uk-navbar-nav > li:nth-child(3n+2) > a:hover,
    .site-nav .uk-navbar-nav > li:nth-child(3n+2).uk-active > a { color: var(--b3-plum); }

    .site-nav .uk-navbar-nav > li:nth-child(3n) > a:hover,
    .site-nav .uk-navbar-nav > li:nth-child(3n).uk-active > a { color: var(--b3-amber-ink); }

    /* Stuck to the top: same gloss, deeper shadow. The tint is what the sheen shows up
       against, so washing it out to plain white in sticky mode is what made it go flat. */
    .uk-navbar-sticky.site-nav,
    .site-nav.uk-navbar-sticky {
        box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 26px rgba(46, 38, 32, .13);
    }

    /* The account icon button, so it does not sit flat next to a glossy button. */
    .site-nav .uk-navbar-right .uk-icon-button {
        color: var(--b3-primary);
        background: rgba(255, 255, 255, .75);
        border: 1px solid rgba(15, 120, 98, .18);
        transition: background-color .18s ease, color .18s ease, border-color .18s ease;
    }

        .site-nav .uk-navbar-right .uk-icon-button:hover {
            background: var(--b3-primary);
            border-color: var(--b3-primary);
            color: #fff;
        }

    /* The one call to action on the bar gets a lit top edge and a coloured shadow. */
    .site-nav .btn-primary {
        background: linear-gradient(180deg, var(--b3-primary-lit) 0%, var(--b3-primary) 55%, var(--b3-primary-dark) 100%);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 16px var(--b3-primary-shadow);
        border: none;
    }

        .site-nav .btn-primary:hover,
        .site-nav .btn-primary:focus {
            background: linear-gradient(180deg, #1aa588 0%, var(--b3-primary-lit) 55%, var(--b3-primary) 100%);
            box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 8px 20px rgba(15, 120, 98, .42);
        }

@media (max-width: 1350px) {
    .uk-navbar-nav { gap: 0; }

    .site-nav .uk-navbar-nav > li > a {
        font-size: .9rem;
        padding: 0 11px;
        margin: 0 1px;
    }
}

@media (max-width: 1100px) {
    .uk-navbar-nav { gap: 0; }

    .site-nav .uk-navbar-nav > li > a {
        font-size: .75rem;
        padding: 0 7px;
        margin: 0;
    }
}

/* ── Hero badge ───────────────────────────── */
.hero-badge {
    display: inline-block;
    background: var(--b3-primary-tint);
    color: var(--b3-primary);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: var(--b3-radius-pill);
}

/* ── Section backgrounds ──────────────────── */
.bg-alt {
    background: var(--b3-surface);
    border-top: 1px solid var(--b3-border);
    border-bottom: 1px solid var(--b3-border);
}

.bg-dark {
    background: var(--b3-ink);
    color: #fff !important;
}

    .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 {
        color: #fff;
    }

/* ── Stat strip ───────────────────────────── */
.stat-strip {
    background: var(--b3-ink);
}

.stat-value {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.stat-label {
    font-size: .82rem;
    opacity: .7;
    margin-top: 4px;
    color: #fff;
}

/* ── Cards on the marketing pages lift on hover; the admin's do not ────────── */
.uk-card-default {
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1);
}

    .uk-card-default:hover {
        transform: translateY(-4px);
        box-shadow: var(--b3-shadow);
    }

.uk-border-rounded {
    border-radius: var(--b3-radius);
}

/* ── Pricing ──────────────────────────────── */
.price-card-highlight {
    border: 2px solid var(--b3-primary) !important;
}

.price-badge-amber,
.price-badge-grey {
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 3px 12px;
    border-radius: var(--b3-radius-pill);
    text-transform: uppercase;
}

.price-badge-amber { background: var(--b3-primary); }
.price-badge-grey { background: var(--b3-muted); }

.price-big {
    font-size: 3rem;
    font-weight: 800;
    color: var(--b3-ink);
    line-height: 1;
}

.number-big-amber {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--b3-primary);
}

/* ── Accordion ────────────────────────────── */
.uk-accordion-title {
    color: var(--b3-ink) !important;
    font-weight: 700;
    font-size: 1rem;
}

/* ── Closing banner ───────────────────────── */
.cta-banner {
    background: var(--b3-primary);
}

/* ── Footer ───────────────────────────────── */
footer {
    background: var(--b3-ink);
    color: #c9bfb2;
}

    footer a {
        color: #c9bfb2 !important;
    }

        footer a:hover {
            color: #fff !important;
        }

blockquote {
    font-style: italic;
    font-size: .95rem;
    border-left: 3px solid rgba(255, 255, 255, .25);
    padding-left: 16px;
    margin: 0;
    color: rgba(255, 255, 255, .85);
}


/* ════════════════════════════════════════════════════════════════════
   Hero: the three column grid and the card stack animation
   ════════════════════════════════════════════════════════════════════ */

.hero {
    position: relative;
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    align-items: center;
    min-height: 92vh;
    padding: 80px 40px;
    overflow: hidden;
    gap: 0 32px;
}

/* ─── Card columns ─── */
.card-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    position: relative;
    z-index: 10;
}

    .card-col.right {
        align-items: center;
    }

/* ─── Outer card: rotation lives here.
                   - border         → cream mount; is part of the box model so rotates perfectly
                   - filter         → drop-shadow follows the actual rendered shape, not the axis
                   - NO box-shadow  → box-shadow always aligns to viewport axis, not element axis ─── */
.Item-card {
    flex-shrink: 0;
    width: 160px;
    height: 160px;
    border-radius: 21px; /* 16px inner + 5px border */

    border: 5px solid white;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.14)) drop-shadow(0 2px 5px rgba(0,0,0,0.08));
    opacity: 0;
}

/* ─── Inner clip: handles overflow + radius for the image ─── */
.card-inner {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.Item-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.88) brightness(0.98);
}

/* ─── Flipper ─── */
.card-flipper {
    width: 100%;
    height: 100%;
}

/* ─── Entrance animation ─── */
@keyframes cardRise {
    0% {
        opacity: 0;
        transform: rotate(var(--rot)) translateY(30px) scale(0.93);
    }

    100% {
        opacity: 1;
        transform: rotate(var(--rot)) translateY(0) scale(1);
    }
}

.Item-card.entering {
    animation: cardRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── Flip keyframes ─── */
@keyframes flipOut {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@keyframes flipIn {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.card-flipper.flip-out {
    animation: flipOut 0.22s ease-in forwards;
}

.card-flipper.flip-in {
    animation: flipIn 0.22s ease-out forwards;
}

/* ════════════════════════════════════════
                   HERO CENTRE TEXT
                ════════════════════════════════════════ */
.hero-middle {
    text-align: center;
    padding: 0 24px;
    z-index: 20;
}


/* ─── Responsive: hide cards on narrow screens ─── */
@media (max-width: 860px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 60px 24px;
    }

    .card-col {
        display: none;
    }

    .hero::before, .hero::after {
        display: none;
    }
}

@keyframes float {
    0%, to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

/* ════════════════════════════════════════════════════════════════════
   Bagsworth in the hero

   The image sits above a small card that says in three lines what he is for. The card
   overlaps the picture slightly so the two read as one object, and the whole thing floats
   on the same six second cycle the rest of the page uses. Nothing here is decorative
   only: the three ticks are the three ways to sell, in their own colours.
   ════════════════════════════════════════════════════════════════════ */

.b3-hero-mascot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
}

.b3-bagsworth {
    display: block;
    width: 100%;
    max-width: 330px;
    height: auto;
    animation: float 6s ease-in-out infinite;
    /* A soft shadow under him rather than a box, since the PNG has no background. */
    filter: drop-shadow(0 18px 26px rgba(46, 38, 32, .20));
}

.b3-speech {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin-top: -14px;
    padding: 18px 22px 14px;
    background: var(--b3-surface);
    border: 1px solid var(--b3-border);
    border-radius: var(--b3-radius);
    z-index: 2;
}

    /* The tail, pointing back up at him. Two triangles so the border shows through. */
    .b3-speech::before,
    .b3-speech::after {
        content: '';
        position: absolute;
        left: 38px;
        width: 0;
        height: 0;
        border-style: solid;
    }

    .b3-speech::before {
        top: -11px;
        border-width: 0 11px 11px 11px;
        border-color: transparent transparent var(--b3-border) transparent;
    }

    .b3-speech::after {
        top: -10px;
        border-width: 0 10px 10px 10px;
        border-color: transparent transparent var(--b3-surface) transparent;
    }

.b3-speech-name {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--b3-ink);
    letter-spacing: -.01em;
}

.b3-speech-body {
    margin: 4px 0 10px;
    font-size: .9rem;
    color: var(--b3-muted);
}

.b3-speech-list {
    margin: 0;
    font-size: .88rem;
    font-weight: 700;
    color: var(--b3-ink);
}

    .b3-speech-list > li {
        margin: 0;
        padding: 3px 0;
    }

        .b3-speech-list > li::before {
            display: none;
        }

    .b3-speech-list .uk-icon {
        margin-right: 8px;
    }

/* Narrow screens: he goes under the words and shrinks, rather than being dropped.
   He is the only face the product has, so losing him costs more than the space. */
@media (max-width: 959px) {
    .b3-hero-mascot {
        margin-top: 32px;
    }

    .b3-bagsworth {
        max-width: 240px;
    }

    .b3-speech {
        max-width: 300px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PETAL GLASS: the marketing pages
   ═══════════════════════════════════════════════════════════════════════════

   The wash, the glass panels and the hue all come from jollysimple.css, so most of
   this look arrives here without a line of code. What is left is the handful of
   places these pages paint their own solid colour over it.
   ─────────────────────────────────────────────────────────────────────────── */

/* The bar is glass now rather than a white to tint gradient, so the wash shows
   through it as the page scrolls under. The three colour strip stays: it is the
   one place the brand's three hues appear together. */
.site-nav {
    background: rgba(255, 255, 255, .62);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid rgba(255, 255, 255, .85);
    box-shadow: 0 6px 24px rgba(76, 54, 92, .07);
}

    /* The sheen belonged to the solid bar. On glass it reads as a smear. */
    .site-nav::after {
        display: none;
    }

/* An alternating band was a way of breaking up a flat page. The page is not flat
   any more, so the band is a pane of slightly clearer glass instead. */
.bg-alt {
    background: rgba(255, 255, 255, .5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, .8);
    border-bottom: 1px solid rgba(255, 255, 255, .8);
}

/* The dark bands stay dark, because a page of nothing but light needs somewhere
   for the eye to rest. Violet ink rather than brown black, to match the rest. */
.bg-dark,
.stat-strip {
    background: linear-gradient(140deg, #4a3b58, #2f2639);
}

/* Cards lift on hover here. With glass, lifting the shadow alone is not enough
   to notice, so the pane clears slightly as well. */
.uk-card-default:hover {
    background: var(--b3-glass-strong);
}

.price-card-highlight {
    background: var(--b3-glass-strong) !important;
    box-shadow: 0 20px 50px rgba(76, 54, 92, .16) !important;
}

/* The wordmark in the bar, set in type. It shrinks with the bar when it sticks,
   the same way the image did. */
.site-nav .uk-logo.b3-wordmark {
    font-size: 1.7rem;
    transition: font-size .3s ease-in-out;
}

.uk-navbar-sticky .site-nav .uk-logo.b3-wordmark,
.uk-navbar-sticky.site-nav .uk-logo.b3-wordmark {
    font-size: 1.4rem;
}

/* The bar centres its items with flex; a text logo has to say so itself, or it
   sits on the top edge where an image's own height used to hold it down. */
.site-nav .uk-logo.b3-wordmark {
    display: flex;
    align-items: center;
    min-height: 64px;
    line-height: 1;
}

/* The gap before the numeral, closed by hand.

   Tracking is set in em and so scales with the size, but the space either side of a
   glyph is drawn by the font and does not: the t leaves a gap on its right and the 3
   leaves one on its left, and at the 1.7rem this bar uses those two add up to a hole
   the eye reads as a word break. Letters want proportionally tighter spacing as they
   get bigger, not the same, which is why this needs saying only here and why nothing
   is wrong with the 1.45rem one in the admin panel.

   Pulling the numeral rather than tightening the whole word leaves the rhythm of
   basket alone and closes only the join that is wrong.

   The value is the one that looked right on the real page rather than the one that
   looked right in a test render, and it is a good deal more than the arithmetic
   suggested: the bar sits the wordmark against a lot of white, and the join has to be
   properly closed rather than merely correct to read as one word. In em, so it holds
   when the bar shrinks to 1.4rem on scroll. */
.site-nav .uk-logo.b3-wordmark span {
    margin-left: -0.2em;
}