/* The cursive face for the drawn signature in the screens section below -
   an @import must sit before every rule in the file. */
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

/* ====================================================================
   GoDocX.ai - public landing page (web-parity 2026-08-21)

   Loaded ONLY by Views/Shared/_Layout.cshtml, the layout the public
   marketing pages use. Deliberately NOT part of custom.css: that file is
   a copy of the App's stylesheet plus the signed-in overrides, and
   dragging all of it onto the marketing pages would collide with
   HomeStyle. Keep landing-page styling here and nowhere else.

   Note #header is position:fixed on these pages, so the hero carries its
   own top padding to clear it - the old .banner did that with a 750px
   background image, which is now gone.
   ==================================================================== */

.gx-hero {
    background: linear-gradient(160deg, #2B3990 0%, #1B2566 45%, #061024 100%);
    color: #fff;
    text-align: center;
    padding: clamp(80px, 7vw, 104px) 24px clamp(44px, 5vw, 68px); /* top clears the fixed #header */
}

/* The headline sits on one line at this size, and the sub-heading wraps to two
   underneath it. Do not remove the cap - without it the hero runs the full
   width of a large monitor as a single stretched line. */
.gx-hero-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* HomeStyle sets "body p { text-align:left }". A rule aimed at the element
   beats an inherited value however far up it sits, so text-align:center on
   .gx-hero never reached its paragraphs - the free-plan note sat hard against
   the left edge and the subtitle's second line was left-aligned inside its
   centred box. One class in the selector is enough to outrank it. */
.gx-hero p {
    text-align: center;
}

.gx-hero-title {
    color: #fff;
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.04;
    margin: 0;
    text-wrap: balance;
}

.gx-hero-sub {
    color: #C2CDEA;
    font-size: clamp(15px, 1.5vw, 18px);
    margin: 16px auto 28px;
    max-width: 52ch;
}

/* Email capture: one white pill holding the field and the button. */
.gx-capture {
    display: flex;
    max-width: 470px;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 14px 34px rgba(6, 16, 36, .34);
    gap: 6px;
}

.gx-capture-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 11px 14px;
    font: inherit;
    font-size: 15px;
    color: #061024;
}

    .gx-capture-input::placeholder {
        color: #8A94A8;
    }

.gx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 22px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.gx-btn-dark {
    background: #061024;
    color: #fff;
}

    .gx-btn-dark:hover {
        background: #14224a;
        color: #fff;
    }

.gx-btn-ember {
    background: #FE5B22;
    color: #fff;
}

    .gx-btn-ember:hover {
        background: #e64d18;
        color: #fff;
    }

.gx-hero-note {
    font-size: 12.5px;
    color: #9DACD0;
    margin-top: 14px;
}

.gx-hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.gx-stores {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

    .gx-stores img {
        height: 42px;
        width: auto;
    }

/* Proof strip directly under the hero. */
.gx-proof {
    background: #F4F6FB;
    border-bottom: 1px solid #DFE5F2;
}

.gx-proof-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: clamp(24px, 5vw, 64px);
    padding: 22px 24px;
    flex-wrap: wrap;
    text-align: center;
}

    .gx-proof-inner b {
        display: block;
        font-size: 21px;
        font-weight: 800;
        letter-spacing: -.03em;
        color: #061024;
        font-variant-numeric: tabular-nums;
    }

    .gx-proof-inner span {
        font-size: 12.5px;
        color: #5A6780;
        font-weight: 600;
    }

/* ====================================================================
   BLUE & WHITE SCHEME (web-parity 2026-08-21)

   The public pages were built around an orange accent (#f37721) on warm
   cream tints. The owner asked for blue and white, so the accent becomes
   the brand indigo #2B3990 and every warm tint becomes a cool one.

   Most of it is done by re-pointing the theme's own CSS variables, which
   LayoutStyle defines on :root - that recolours buttons, links and badges
   across the whole page at once. The hardcoded hexes underneath are
   overridden individually below.

   This file loads after LayoutStyle and HomeStyle, so these win. Review
   stars stay gold (#fca802) on purpose - blue stars do not read as stars.
   ==================================================================== */
:root {
    --secondary: #2B3990;
    --secondary-dark: #1B2566;
    --secondary-light: #5A6BD8;
    --secondary-label-light-color: #EEF1FC;
    --orange: #2B3990;
}

/* ---------------------------------------------------------------------------
   The top bar is white.

   Everything in that bar was built for a dark background, so the whole set has
   to move together: the markup carries class="navbar-dark", which paints the
   links, the "Sign in" link and the hamburger white, and the TRY FOR FREE
   button is .btn-white. Left alone, all of it would be white on white. The
   logo is swapped to its dark-text file in _HomeHeaderPartial.cshtml.

   Two rules are needed just to get the background to take, and both need the
   over-qualified selector. The header is <header class="bg-primary" id="header">
   and LayoutStyle sets .bg-primary { background-color: var(--primary)
   !important }, which beats any ordinary rule however specific; HomeStyle then
   adds header#header { background:#2e364c }. On top of that the navbar INSIDE
   the header paints its own slate over it via .navbar-home { background:#2f374a
   !important }, so colouring the header alone changes nothing visible.
   --------------------------------------------------------------------------- */
html body header#header.bg-primary {
    background-color: #FFFFFF !important;
}

html body header#header .navbar-home {
    background: transparent !important;
}

/* A hairline instead of a shadow: the bar is fixed, and once the page scrolls
   past the blue hero it would otherwise dissolve into the white sections. */
html body header#header {
    border-bottom: 1px solid #E6E9F3;
}

/* Menu links: navbar-dark gives these rgba(255,255,255,.85). */
html body header#header .navbar-nav .nav-link {
    color: #1B2340 !important;
    font-weight: 600;
}

html body header#header .navbar-nav .nav-link:hover,
html body header#header .navbar-nav .nav-link:focus,
html body header#header .navbar-nav .show > .nav-link {
    color: #2B3990 !important;
}

/* The hamburger, on phones. Its bars are a background-image with the white
   baked into the SVG, so a colour property cannot reach them - the whole
   image has to be replaced with the same drawing in navy. */
html body header#header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(27, 35, 64, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

html body header#header .navbar-toggler {
    color: #1B2340;
    border-color: #E6E9F3;
}

/* TRY FOR FREE was a white button reading against navy. On a white bar it has
   to become the filled one. The person icon inside it is an inline SVG filled
   with var(--primary), which would leave it invisible on the blue. */
html body header#header .btn-white {
    color: #FFFFFF !important;
    background-color: #2B3990 !important;
    border-color: #2B3990 !important;
}

html body header#header .btn-white:hover,
html body header#header .btn-white:focus {
    color: #FFFFFF !important;
    background-color: #1B2566 !important;
    border-color: #1B2566 !important;
}

/* Only the <g>. The icon also carries a full-size backing path with
   fill="none", and colouring every path turned that into a white block over
   the whole button. The real shapes sit inside the g and inherit from it. */
html body header#header .btn-white svg g {
    fill: #FFFFFF !important;
}

/* Tighten the bar. HomeStyle gives it "html nav.navbar { padding:40px 0 }",
   which made a header roughly 140px tall - most of it empty space around a
   30px logo. The extra qualifiers are only there to outrank that selector. */
html body header#header nav.navbar {
    padding: 10px 0;
}

html body header#header.sticky nav.navbar {
    padding: 8px 0;
}

/* The rest of the height was under the menu itself, not around it: the theme
   gives .nav-link a full 1rem of padding top and bottom, so each link stood
   51px tall around 19px of text and set the floor for the whole bar. Halving
   it lets the 44px button become the tallest thing in there, which is what
   should be deciding the height. Desktop only - on phones these links stack
   into the overlay menu and need the bigger tap targets. */
@media (min-width: 992px) {
    html body header#header .navbar-nav .nav-link {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
}

/* Buttons sit on indigo, so their text must be white - the theme had them
   dark because the orange was light enough to carry dark text. */
.btn-secondary,
.btn-secondary.disabled,
.btn-secondary:disabled {
    color: #fff !important;
    background-color: #2B3990;
    border-color: #2B3990;
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        color: #fff !important;
        background-color: #1B2566;
        border-color: #1B2566;
    }

/* Outline buttons (TRY FOR FREE in the header, plan buttons). */
.btn-outline-secondary {
    color: #2B3990;
    border-color: #2B3990;
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus {
        color: #fff;
        background-color: #2B3990;
        border-color: #2B3990;
    }

/* Accents that were hardcoded orange. */
html .navbar-light .navbar-nav .nav-link.active,
html .navbar-light .navbar-nav .show > .nav-link,
html .navbar-light .navbar-nav .nav-link:focus,
html .navbar-light .navbar-nav .nav-link:hover,
.footer-middle a:hover,
.footer-copyright a:hover {
    color: #5A6BD8;
}

html .owl-carousel .owl-dots button.owl-dot.active,
html .owl-carousel .owl-dots button.owl-dot:hover,
ul.social-list li a,
.footer-head::after {
    background-color: #2B3990;
}

@media only screen and (max-width: 991px) {
    html .navbar-light .navbar-toggler {
        background: #2B3990;
    }
}

/* Warm cream panels become cool blue-white. */
section.pink-oval {
    background: #F4F6FB;
}

.plan-list .col-sm-4,
.container.plan-table .table-responsive {
    background: #FFFFFF;
    border: 1px solid #E4EAF6;
}

.container.plan-table thead {
    background: #E8EDFA;
    color: #061024;
}

.plan-table .table td {
    border-color: #DFE5F2;
}

/* Plan prices and section headings pick up the accent. */
.plan-list .price,
.plan-list h2,
.plan-list .plan-price {
    color: #2B3990;
}

/* The header logo is a wide lockup; the theme caps navbar images at 1.75rem
   which renders it too small to read. Give it room on the public header. */
#header .navbar-brand img#navbar-logo {
    height: 30px;
    max-height: 30px;
    width: auto;
}

/* The plan balloons come from sprite.png with the orange baked into the
   image, so they cannot be recoloured with a colour property. Rotating the
   hue turns the orange to the brand blue without needing a new sprite.
   Replace with blue artwork when convenient and drop this filter. */
.plan-list .plan-title::before {
    filter: hue-rotate(205deg) saturate(1.25);
}

/* The middle plan sits on a dark panel, so its accent must be light -
   #2B3990 on #394157 is unreadable. */
.plan-list .col-sm-4:nth-child(2)::before {
    background: #1B2566;
}

.plan-list .col-sm-4:nth-child(2) .plan-price,
.plan-list .col-sm-4:nth-child(2) .plan-price span {
    color: #FFFFFF;
}

.plan-list .col-sm-4:nth-child(2) .btn-outline-secondary {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, .65);
}

    .plan-list .col-sm-4:nth-child(2) .btn-outline-secondary:hover,
    .plan-list .col-sm-4:nth-child(2) .btn-outline-secondary:focus {
        background-color: #FFFFFF;
        border-color: #FFFFFF;
        color: #1B2566;
    }

/* Remaining orange baked into images. Same reasoning as the plan balloons:
   these are PNGs, so no colour property reaches them and the hue is shifted
   instead. Swap in blue artwork later and delete this block.
     - feature icons carry their peach circle inside the image
     - oval-nude.png draws the curved band above and below .pink-oval
     - main-list bullets are ticks cut from sprite.png */
.module-feature-box img,
section.pink-oval::before,
section.pink-oval::after,
.main-list li::before {
    filter: hue-rotate(205deg) saturate(1.15);
}

/* ---- Narrow screens -------------------------------------------------
   The capture pill is 470px wide, which is wider than a phone, so it
   pushed the whole hero sideways and clipped the headline. Below 560px
   the field and button stack and everything is held inside the viewport. */
@media (max-width: 560px) {
    .gx-hero {
        padding-left: 18px;
        padding-right: 18px;
    }

    .gx-hero-title {
        font-size: clamp(26px, 8vw, 34px);
        letter-spacing: -.02em;
    }

    .gx-hero-sub {
        font-size: 15px;
    }

    .gx-capture {
        flex-direction: column;
        max-width: 100%;
        gap: 8px;
    }

    .gx-capture-input {
        text-align: center;
        padding: 12px;
    }

    .gx-btn {
        width: 100%;
    }

    .gx-proof-inner {
        gap: 20px 26px;
    }

        .gx-proof-inner b {
            font-size: 18px;
        }

    .gx-stores img {
        height: 36px;
    }
}

/* Long words in the hero wrap rather than pushing the page sideways. This used
   to set max-width:100% on .gx-hero-inner and .gx-proof-inner as well, which
   silently cancelled their own 780px and 1100px caps - the headline then ran
   the full width of a large monitor as a single stretched line, and the proof
   strip spread with it. Those caps are the layout; do not reintroduce a
   blanket max-width here. */
.gx-hero,
.gx-hero-inner,
.gx-proof-inner {
    overflow-wrap: break-word;
}

/* AI allowances inside each plan card. Deliberately quiet next to the price:
   a stack of small lines under a label, not a second headline. The same block
   appears on /Sign-up, styled to match in custom.css. */
.plan-list .plan-ai {
    margin: 18px auto 20px;
    padding-top: 14px;
    border-top: 1px solid #E4EAF6;
    max-width: 210px;
    text-align: center;
}

    .plan-list .plan-ai span {
        display: block;
        font-size: 13px;
        line-height: 1.75;
        color: #46506B;
    }

    .plan-list .plan-ai .plan-ai-head {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: #2B3990;
        margin-bottom: 4px;
    }

/* Plan icons: documents, not balloons.

   The theme drew these from sprite.png with the old orange baked in, which is
   why they were being hue-rotated to blue. These replace the sprite outright,
   so the filter has to come off too or the new blue would be rotated again.
   Widths differ because the icon widens with the plan - one page, one signed
   page, two, three - the same escalation the balloons had.

   Two colourways: the highlighted plan sits on navy, where a navy icon is
   invisible. Same drawings, lighter stroke. *_SEL_* rules below carry them. */
.plan-list .plan-title.plan-doc-1::before, .plan-list .plan-title.plan-doc-2::before,
.plan-list .plan-title.plan-doc-3::before, .plan-list .plan-title.plan-doc-4::before {
    filter: none;
    background-repeat: no-repeat;
    background-position: center bottom !important;
    background-size: contain;
    height: 62px;
}

.plan-list .plan-title.plan-doc-1::before { width: 31px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 64' fill='none' stroke='%232B3990' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M20 8 v8 h8'/%3E%3Cpath d='M10 28 h12'/%3E%3Cpath d='M10 36 h12'/%3E%3Cpath d='M10 44 h8'/%3E%3C/svg%3E"); }
.plan-list .plan-title.plan-doc-2::before { width: 31px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 64' fill='none' stroke='%232B3990' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M20 8 v8 h8'/%3E%3Cpath d='M10 28 h12'/%3E%3Cpath d='M10 36 h12'/%3E%3Cpath d='M10 45 c2 .5 3-1.2 3.6-3 .4-1.3 0-2.1-.7-1.8-.9 .4-.8 2.1 0 3.5 .7 1.3 1.8 1.9 2.9 1.9 1.2 0 1.9-1.5 3.8-2.3'/%3E%3C/svg%3E"); }
.plan-list .plan-title.plan-doc-3::before { width: 56px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 64' fill='none' stroke='%232B3990' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M18 8 v8 h8'/%3E%3Cpath d='M8 28 h12'/%3E%3Cpath d='M8 36 h12'/%3E%3Cpath d='M8 44 h8'/%3E%3Cpath d='M30 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M46 8 v8 h8'/%3E%3Cpath d='M36 28 h12'/%3E%3Cpath d='M36 36 h12'/%3E%3Cpath d='M36 44 h8'/%3E%3C/svg%3E"); }
.plan-list .plan-title.plan-doc-4::before { width: 81px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 64' fill='none' stroke='%232B3990' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M18 8 v8 h8'/%3E%3Cpath d='M8 28 h12'/%3E%3Cpath d='M8 36 h12'/%3E%3Cpath d='M8 44 h8'/%3E%3Cpath d='M30 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M46 8 v8 h8'/%3E%3Cpath d='M36 28 h12'/%3E%3Cpath d='M36 36 h12'/%3E%3Cpath d='M36 44 h8'/%3E%3Cpath d='M58 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M74 8 v8 h8'/%3E%3Cpath d='M64 28 h12'/%3E%3Cpath d='M64 36 h12'/%3E%3Cpath d='M64 44 h8'/%3E%3C/svg%3E"); }

/* The highlighted column on this page is the navy one. */
.plan-list .col-sm-4:nth-child(2) .plan-title.plan-doc-1::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 64' fill='none' stroke='%23C6D0F5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M20 8 v8 h8'/%3E%3Cpath d='M10 28 h12'/%3E%3Cpath d='M10 36 h12'/%3E%3Cpath d='M10 44 h8'/%3E%3C/svg%3E"); }
.plan-list .col-sm-4:nth-child(2) .plan-title.plan-doc-2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 64' fill='none' stroke='%23C6D0F5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M20 8 v8 h8'/%3E%3Cpath d='M10 28 h12'/%3E%3Cpath d='M10 36 h12'/%3E%3Cpath d='M10 45 c2 .5 3-1.2 3.6-3 .4-1.3 0-2.1-.7-1.8-.9 .4-.8 2.1 0 3.5 .7 1.3 1.8 1.9 2.9 1.9 1.2 0 1.9-1.5 3.8-2.3'/%3E%3C/svg%3E"); }
.plan-list .col-sm-4:nth-child(2) .plan-title.plan-doc-3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 64' fill='none' stroke='%23C6D0F5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M18 8 v8 h8'/%3E%3Cpath d='M8 28 h12'/%3E%3Cpath d='M8 36 h12'/%3E%3Cpath d='M8 44 h8'/%3E%3Cpath d='M30 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M46 8 v8 h8'/%3E%3Cpath d='M36 28 h12'/%3E%3Cpath d='M36 36 h12'/%3E%3Cpath d='M36 44 h8'/%3E%3C/svg%3E"); }
.plan-list .col-sm-4:nth-child(2) .plan-title.plan-doc-4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 64' fill='none' stroke='%23C6D0F5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M18 8 v8 h8'/%3E%3Cpath d='M8 28 h12'/%3E%3Cpath d='M8 36 h12'/%3E%3Cpath d='M8 44 h8'/%3E%3Cpath d='M30 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M46 8 v8 h8'/%3E%3Cpath d='M36 28 h12'/%3E%3Cpath d='M36 36 h12'/%3E%3Cpath d='M36 44 h8'/%3E%3Cpath d='M58 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M74 8 v8 h8'/%3E%3Cpath d='M64 28 h12'/%3E%3Cpath d='M64 36 h12'/%3E%3Cpath d='M64 44 h8'/%3E%3C/svg%3E"); }

/* The tick in the feature comparison table is another sprite.png cut with the
   old orange baked into the artwork, on the Pro column only (td:nth-child(4)).
   No colour property can reach it, so the hue goes round to blue - the same
   treatment the plan balloons had before they were replaced outright. Swap in
   blue artwork when there is some, and drop this. */
.container.plan-table tr td:nth-child(4) span.feat-icon {
    filter: hue-rotate(205deg) saturate(1.15);
}

/* ---------------------------------------------------------------------------
   "This is what you actually get" - three product screenshots.

   Sits between the proof strip and the pricing: show the product before asking
   for money. The screenshots do the work, so the cards around them stay quiet -
   thin border, no heavy shadow, no coloured panel competing with the image.

   Each frame is a fixed 16:10 window with the image cropped to fill from the
   top, so three screenshots of different heights still line up. Cards whose
   file has not been supplied yet render .gx-shot-pending instead, which is why
   the frame carries its own background.
   --------------------------------------------------------------------------- */
.gx-shots {
    background: #FFFFFF;
    padding: clamp(48px, 6vw, 84px) 24px;
}

.gx-shots-inner {
    max-width: 1160px;
    margin: 0 auto;
}

.gx-shots-title {
    text-align: center;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -.03em;
    color: #0D1533;
    margin: 0 0 clamp(28px, 4vw, 48px);
}

/* The three screens are DRAWN with markup (owner's call 2026-09-03: no raw
   screenshots on the marketing page - real ones carried test data and were
   unreadable at card size). Each row: copy beside a browser-framed
   illustration, sides alternating. Sharp at any size, nothing real leaks. */
.gx-shots-rows {
    display: grid;
    gap: clamp(44px, 6vw, 80px);
}

.gx-shot-row {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(26px, 4vw, 60px);
    align-items: center;
}

.gx-shot-row--flip .gx-shot-copy { order: 2; }
.gx-shot-row--flip .gx-shot-frame { order: 1; }

.gx-shot-tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #2B3990;
    background: #EEF1FA;
    border-radius: 999px;
    padding: 4px 14px;
    margin-bottom: 14px;
}

.gx-shot-copy h3 {
    font-size: clamp(20px, 2.3vw, 27px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #0D1533;
    margin: 0 0 10px;
}

.gx-shot-copy p {
    font-size: 15.5px;
    line-height: 1.65;
    color: #4E5A78;
    margin: 0;
    max-width: 44ch;
}

/* the browser window around each illustration */
.gx-shot-frame {
    border: 1px solid #E4EAF6;
    border-radius: 14px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 24px 60px rgba(16, 24, 51, .14);
}

.gx-shot-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #F3F5FB;
    border-bottom: 1px solid #E4EAF6;
}

    .gx-shot-bar i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #D7DEEF;
    }

    .gx-shot-bar span {
        margin-left: 8px;
        font-size: 11px;
        color: #808AA4;
        background: #fff;
        border: 1px solid #E4EAF6;
        border-radius: 999px;
        padding: 2px 14px;
    }

/* ---- the drawn screens ---- */
.mk { padding: 22px 26px 26px; background: #FBFCFE; }
.mk-chip { font-size: 10px; font-weight: 800; letter-spacing: .06em; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }

/* 1 - editor */
.mk-toolbar { display: flex; gap: 10px; margin-bottom: 18px; }
.mk-tb { flex: 1; text-align: center; font-size: 12px; font-weight: 800; border: 1.5px solid #2B3990; color: #2B3990; border-radius: 9px; padding: 8px 0; background: #fff; }
.mk-tb--solid { background: #101833; border-color: #101833; color: #fff; }
.mk-doc { background: #fff; border: 1px solid #E4EAF6; border-radius: 10px; box-shadow: 0 6px 22px rgba(16,24,51,.06); padding: 26px 30px 24px; }
.mk-doc h4 { font-family: Georgia, "Times New Roman", serif; font-size: 16px; margin: 0 0 12px; color: #1a1a1a; }
.mk-line { height: 7px; border-radius: 4px; background: #E9EDF7; margin: 9px 0; }
.mk-line.w80 { width: 80%; }
.mk-line.w60 { width: 60%; }
.mk-line.w90 { width: 90%; }
.mk-signrow { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.mk-signlabel { font-family: Georgia, serif; font-size: 13.5px; color: #1a1a1a; }
.mk-signed { display: flex; align-items: stretch; border-radius: 6px; overflow: hidden; box-shadow: 0 3px 12px rgba(16,24,51,.14); }
.mk-ink { background: #fff; border: 1px solid #101833; border-right: none; border-radius: 6px 0 0 6px; padding: 4px 14px; font-family: "Allura", "Segoe Script", cursive; font-size: 25px; color: #21295c; display: flex; align-items: center; }
.mk-stamp { background: #2B3990; color: #fff; font-size: 7.5px; line-height: 1.35; padding: 5px 8px; display: flex; flex-direction: column; justify-content: center; border-radius: 0 6px 6px 0; }
    .mk-stamp b { font-size: 8px; }
.mk-field { margin-top: 20px; border: 1.5px dashed #7C86CF; background: #F3F5FB; color: #2B3990; border-radius: 6px; padding: 10px 16px; font-size: 11px; font-weight: 800; letter-spacing: .04em; width: max-content; }
.mk-next { margin-top: 18px; display: flex; justify-content: flex-end; }
.mk-pill { background: #fff; border: 1px solid #E4EAF6; border-radius: 999px; padding: 8px 18px; font-size: 12px; font-weight: 800; color: #2B3990; box-shadow: 0 4px 14px rgba(16,24,51,.10); }

/* 2 - create with AI */
.mk-ai-hero { background: linear-gradient(135deg, #2B3990 0%, #061024 100%); border-radius: 12px; color: #fff; padding: 16px 20px; margin-bottom: 14px; }
    .mk-ai-hero b { font-size: 14.5px; display: block; margin-bottom: 3px; }
    .mk-ai-hero span { font-size: 11.5px; opacity: .8; }
.mk-ai-label { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #808AA4; margin: 0 0 6px; }
.mk-ai-input { background: #fff; border: 1.5px solid #7C86CF; border-radius: 10px; padding: 14px 16px 34px; font-size: 13px; color: #33415C; line-height: 1.6; }
.mk-caret { display: inline-block; width: 2px; height: 14px; background: #2B3990; vertical-align: -2px; margin-left: 1px; animation: mkblink 1.1s steps(1) infinite; }
@keyframes mkblink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mk-caret { animation: none; } }
.mk-ai-btn { margin-top: 14px; background: linear-gradient(135deg, #2B3990 0%, #061024 100%); color: #fff; text-align: center; font-size: 13px; font-weight: 800; border-radius: 999px; padding: 12px 0; }
.mk-ai-result { margin-top: 14px; display: flex; align-items: center; gap: 10px; background: #EAF6EF; border: 1px solid #BFE3CD; color: #0E7A46; font-size: 12px; font-weight: 700; border-radius: 10px; padding: 10px 14px; }

/* 3 - dashboard */
.mk-hello { background: linear-gradient(135deg, #2B3990 0%, #061024 100%); border-radius: 12px; color: #fff; text-align: center; padding: 16px 18px 18px; margin-bottom: 14px; }
    .mk-hello b { font-size: 14.5px; display: block; margin-bottom: 10px; }
    .mk-hello .mk-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
        .mk-hello .mk-actions i { font-style: normal; font-size: 10.5px; font-weight: 800; border: 1px solid rgba(255,255,255,.55); border-radius: 8px; padding: 5px 12px; }
            .mk-hello .mk-actions i:first-child { background: #fff; color: #2B3990; border-color: #fff; }
.mk-card { background: #fff; border: 1px solid #E4EAF6; border-radius: 12px; padding: 14px 16px; }
    .mk-card h5 { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: #808AA4; margin: 0 0 10px; }
.mk-docrow { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-top: 1px solid #F0F3FA; }
    .mk-docrow:first-of-type { border-top: none; }
.mk-ico { width: 30px; height: 30px; border-radius: 8px; background: #EEF1FA; display: grid; place-items: center; font-size: 13px; }
.mk-docrow .who { flex: 1; min-width: 0; }
    .mk-docrow .who b { display: block; font-size: 13px; color: #101833; }
    .mk-docrow .who span { font-size: 11px; color: #808AA4; }
.chip-sign { background: #2B3990; color: #fff; }
.chip-new { background: #EAF6EF; color: #0E7A46; }
.chip-pending { background: #FFF4E2; color: #8A6423; }
.chip-needs { background: #FBEDEC; color: #B3261E; }
.mk-newtag { font-size: 9px; font-weight: 900; letter-spacing: .08em; color: #0E7A46; background: #EAF6EF; border-radius: 999px; padding: 2px 7px; margin-left: 6px; vertical-align: 1px; }

/* words above, screen below on small screens */
@media (max-width: 900px) {
    .gx-shot-row, .gx-shot-row--flip {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .gx-shot-row--flip .gx-shot-copy { order: 1; }
    .gx-shot-row--flip .gx-shot-frame { order: 2; }
    .gx-shot-copy p { max-width: none; }
}

/* ---------------------------------------------------------------------------
   Closing call to action, immediately above the footer.

   Deliberately mirrors the hero - same gradient, same capture pill - so the
   page opens and closes on the same offer instead of trailing off after the
   client logos. The gradient runs the other way so the two bands do not look
   like a copy-paste when the page is scrolled quickly.
   --------------------------------------------------------------------------- */
.gx-cta {
    background: linear-gradient(200deg, #1B2566 0%, #2B3990 45%, #061024 100%);
    color: #fff;
    text-align: center;
    padding: clamp(52px, 6vw, 88px) 24px;
}

.gx-cta-inner {
    max-width: 680px;
    margin: 0 auto;
}

.gx-cta-title {
    color: #fff;
    font-size: clamp(26px, 3.6vw, 42px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin: 0;
}

.gx-cta-sub {
    color: #C2CDEA;
    font-size: clamp(15px, 1.5vw, 17px);
    margin: 14px auto 26px;
    max-width: 46ch;
}

.gx-cta-note {
    font-size: 12.5px;
    color: #9DACD0;
    margin-top: 14px;
}

/* Same override as the hero: HomeStyle sets "body p { text-align:left }", and a
   rule on the element beats the centred value inherited from this section. */
.gx-cta p {
    text-align: center;
}

/* Light button for the signed-in case - the ember orange of the hero's
   equivalent would be the only warm thing left on the page. */
.gx-btn-light {
    background: #fff;
    color: #1B2566;
}

    .gx-btn-light:hover {
        background: #E7ECFA;
        color: #1B2566;
    }

/* Two things the footer does that only make sense when it follows a light
   section, both scoped to pages that actually carry the closing band so every
   other marketing page keeps them.

   The arc: footer#footer::before is a 130px image pinned at top:-130px, so it
   is painted OVER the end of whatever comes before it. Against the old pale
   client-logos strip it read as a swoosh; against the band it draws an orange
   curve straight through the email box. It is decorative, so it goes.

   The strip: the footer opens with "Brilliant Solutions for Your Contracts"
   and its own Get Started button. Directly beneath the band that is two calls
   to action in a row, the second weaker than the first. */
body:has(.gx-cta) footer#footer::before {
    display: none;
}

body:has(.gx-cta) footer#footer .footer-top {
    display: none;
}

body:has(.gx-cta) footer#footer {
    padding-top: 12px;
}

/* The client-logos band sits on a warm sepia city photo - the last visibly
   orange thing left on the page. Rather than edit the JPG, a blue layer is
   blended over it in "color" mode: that takes the hue and saturation from the
   layer and the LIGHTNESS from the photograph, so the skyline keeps all its
   detail and simply turns cool. The photo is pale to begin with, so the result
   stays light enough for the dark heading to read against it.

   Only background-image and the blend are set; position, size and repeat are
   left to HomeStyle's shorthand underneath. Delete these two rules to get the
   original photo back. */
section.client {
    background-image: linear-gradient(170deg, #2B3990 0%, #5A6BD8 60%, #8FA2E8 100%),
                      url(../images/client-bg.jpg);
    background-blend-mode: color;
}

/* ---------------------------------------------------------------------------
   Hero: pen artwork on the left, copy on the right, with a revolving line in
   place of a fixed sub-heading.

   Single column by default and two columns from 900px up, so the phone gets
   the artwork above the words rather than a squeezed pair of columns. The
   two-column state also switches the copy to left-aligned, which means undoing
   the centring the hero applies by default - including the "gx-hero p" rule
   further up that exists to beat HomeStyle's "body p { text-align:left }".
   --------------------------------------------------------------------------- */
.gx-hero-art {
    max-width: 340px;
    margin: 0 auto 8px;
}

/* The revolving line. Five absolutely positioned items share one box, each
   fading in for its turn: a 20s cycle, 4s per line, staggered by the delays
   below. The box carries a fixed height because its children are taken out of
   flow - without it the hero would collapse around them and the email box
   would jump every time the line changed. */
.gx-rotator {
    position: relative;
    height: 1.6em;
    overflow: hidden;
    margin: 14px auto 26px;
    max-width: 46ch;
    color: #C2CDEA;
    font-size: clamp(15px, 1.6vw, 19px);
}

    .gx-rotator b {
        position: absolute;
        left: 0;
        right: 0;
        opacity: 0;
        font-weight: 700;
        animation: gx-rotate 20s infinite;
    }

        .gx-rotator b:nth-child(1) { animation-delay: 0s; }
        .gx-rotator b:nth-child(2) { animation-delay: 4s; }
        .gx-rotator b:nth-child(3) { animation-delay: 8s; }
        .gx-rotator b:nth-child(4) { animation-delay: 12s; }
        .gx-rotator b:nth-child(5) { animation-delay: 16s; }

@keyframes gx-rotate {
    0%   { opacity: 0; transform: translateY(12px); }
    2%   { opacity: 1; transform: translateY(0); }
    18%  { opacity: 1; transform: translateY(0); }
    20%  { opacity: 0; transform: translateY(-12px); }
    100% { opacity: 0; transform: translateY(-12px); }
}

/* Anyone who has asked their system for less motion gets the first line, still. */
@media (prefers-reduced-motion: reduce) {
    .gx-rotator b {
        animation: none;
    }

        .gx-rotator b:nth-child(1) {
            opacity: 1;
            transform: none;
        }
}

@media (min-width: 900px) {
    .gx-hero-inner {
        max-width: 1140px;
        display: grid;
        grid-template-columns: 340px 1fr;
        gap: 48px;
        align-items: center;
        text-align: left;
    }

    .gx-hero-art {
        margin: 0;
    }

    /* Undo the hero's centring for the copy column. */
    .gx-hero-copy,
    .gx-hero .gx-hero-copy p,
    .gx-hero-copy .gx-hero-title {
        text-align: left;
    }

    .gx-hero-copy .gx-rotator,
    .gx-hero-copy .gx-capture {
        margin-left: 0;
    }

    .gx-hero-copy .gx-stores {
        justify-content: flex-start;
    }
}

/* ---------------------------------------------------------------------------
   The footer, in brand navy.

   It was the only thing left on the theme's slate #2e364c: the recolour covered
   the header, hero, pricing and sections, but never came down this far, so the
   page ran blue all the way and then stopped dead on grey. #061024 is the same
   navy the closing band fades into, so the two now meet rather than butt.

   The accents underneath were sized for slate and go with it: a #666 divider is
   invisible on navy, and the #2B3990 underline beneath "About" and "Support" is
   barely a shade off the new background. Both lift to something that reads.
   --------------------------------------------------------------------------- */
footer#footer {
    background: #061024;
}

/* The divider rules between footer blocks - #666 against slate, nothing at all
   against navy. */
footer#footer > .container:not(:last-child) {
    border-bottom-color: rgba(255, 255, 255, .13);
}

/* Section underlines and link hovers: the brand indigo disappears into navy,
   so the footer uses the lighter tint of it. */
footer#footer .footer-head::after {
    background-color: #8FA2E8;
}

footer#footer .footer-middle a:hover,
footer#footer .footer-copyright a:hover {
    color: #8FA2E8;
}

/* The decorative arc above the footer is orange artwork baked into a PNG. It is
   hidden on the home page, which has the closing band, but every other page
   still shows it - and an orange curve is now the only warm thing on any of
   them. No colour property reaches a background image, so the hue is rotated,
   the same treatment the plan sprite gets. */
footer#footer::before {
    filter: hue-rotate(205deg) saturate(1.15);
}