/*
 * WeafBooks marketing — laid out the way QuickBooks lays out a page.
 *
 * The old page was tight: 22-slide banner carousel, a scrolling ticker, emoji in
 * coloured squares, six colours of gradient, 13px body copy. Everything competed
 * and nothing had room. This is the opposite instinct — one accent, one typeface,
 * a large type scale, and a lot of air. Whitespace is the design.
 */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* One accent, used only on things you can act on. Blue, after yourbooks.in. */
    --accent: #2f80ed;
    --accent-dark: #1b5a8f;
    --accent-wash: #e8f1fc;

    /* The footer and the closing band are the two places the brand is allowed to
       fill the width, so they get the gradient rather than the flat colour. */
    --deep-grad: linear-gradient(150deg, #1c5c93 0%, #123f66 46%, #0d2f4d 100%);
    --deep-edge: #3d97e0;

    --ink: #1f2124;
    --body: #393a3d;
    --muted: #6b6c72;
    --line: #e3e5e8;
    --wash: #f4f5f8;
    --deep: #0d2f4d;

    --radius: 12px;
    --radius-lg: 24px;
    --container: 1180px;
    --gutter: 24px;

    /* The single number that makes the page feel loose rather than packed. */
    --section: 112px;

    --font: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
        Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    font-size: 18px;
    line-height: 1.6;
    color: var(--body);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

section {
    padding: var(--section) 0;
}

.wash {
    background: var(--wash);
}

/* ---------------------------------------------------------------- type ---- */

h1,
h2,
h3,
h4 {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 {
    font-size: 58px;
    line-height: 1.06;
}

h2 {
    font-size: 42px;
    line-height: 1.14;
}

h3 {
    font-size: 21px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.lede {
    font-size: 20px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 34em;
}

/* Section heads get a fixed measure so a long subtitle can never run the full
   width of the page — the thing that makes a marketing page read as cramped. */
.section-head {
    max-width: 720px;
    margin: 0 auto 64px;
    text-align: center;
}

.section-head .lede {
    margin: 20px auto 0;
}

.eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-dark);
    margin-bottom: 18px;
}

/* -------------------------------------------------------------- buttons --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 34px;
    border-radius: 999px;
    border: 2px solid transparent;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.btn-secondary {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink);
}

.btn-secondary:hover {
    background: var(--ink);
    color: #fff;
}

.btn-light {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}

.btn-light:hover {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.88);
}

.btn-sm {
    padding: 11px 24px;
    font-size: 16px;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--accent-dark);
}

.link-arrow:hover {
    color: var(--accent);
}

.link-arrow::after {
    content: "→";
    transition: transform 0.15s ease;
}

.link-arrow:hover::after {
    transform: translateX(3px);
}

/* ------------------------------------------------------------------ nav --- */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    height: 78px;
}

.logo img {
    height: 34px;
    width: auto;
}

.nav-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-left: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
    list-style: none;
}

.nav-links a {
    font-size: 17px;
    font-weight: 500;
    color: var(--body);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}

.nav-links a:hover {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

.nav-ctas {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-signin {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}

.nav-signin:hover {
    color: var(--accent-dark);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ----------------------------------------------------------------- hero --- */

.hero {
    padding: 116px 0 104px;
}

/* No photograph and no invented figures. The "shop owner" shot was the very same
   stock picture the retail card used further down the page, and the floating
   "today's sales" card quoted a number nobody has ever earned. A single centred
   column of type says the same thing without pretending anything. */
.hero-copy {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.hero h1 {
    max-width: 17ch;
    margin: 0 auto;
}

.hero .lede {
    max-width: 60ch;
    margin: 26px auto 0;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}

.hero-reassure {
    margin-top: 22px;
    font-size: 15px;
    color: var(--muted);
}

/* ------------------------------------------------------------- features --- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease,
        transform 0.18s ease;
}

.card:hover {
    border-color: #cfd3d8;
    box-shadow: 0 14px 34px rgba(31, 33, 36, 0.07);
    transform: translateY(-3px);
}

/* A drawn glyph rather than an emoji in a coloured tile: the emoji set was six
   different illustration styles pretending to be one icon family. */
.card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--accent-wash);
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
}

.card-icon svg {
    width: 26px;
    height: 26px;
}

.card h3 {
    margin-bottom: 12px;
}

.card p {
    font-size: 17px;
    color: var(--muted);
}

/* -------------------------------------------------------------- modules --- */

/* Twenty-two modules were a twenty-two slide carousel nobody would sit through.
   As a list they can all be read at once, which is what someone comparing
   systems actually wants. */
.module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 56px;
}

.module {
    padding: 28px 0;
    border-top: 1px solid var(--line);
}

.module h3 {
    font-size: 19px;
    margin-bottom: 8px;
}

.module p {
    font-size: 16px;
    color: var(--muted);
}

/* ----------------------------------------------------------------- split -- */

.checklist {
    list-style: none;
    margin-top: 34px;
    display: grid;
    gap: 22px;
}

/* Three abreast under a centred head, now that the phone mockup that used to sit
   beside them is gone. */
.checklist-row {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 40px;
    margin-top: 0;
}

.section-foot {
    text-align: center;
}

.checklist li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.check {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--accent-wash);
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    margin-top: 3px;
}

.checklist strong {
    color: var(--ink);
    font-weight: 600;
}

.checklist p {
    font-size: 17px;
    color: var(--muted);
    margin-top: 2px;
}

.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    padding: 12px 26px 12px 20px;
    background: var(--ink);
    color: #fff;
    border-radius: 12px;
}

.store-badge:hover {
    background: #000;
}

.store-badge .badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.store-badge .badge-small {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
}

.store-badge .badge-large {
    font-size: 19px;
    font-weight: 600;
}

/* --------------------------------------------------------- integrations -- */

/* Tax authorities and connected apps share one card, because a buyer reads them
   the same way: what is it, and is it real yet. The status pill is the whole
   point of the component - nothing gets listed as live before it is. */
.integration-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.integration {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 34px 32px;
}

/* Title left, status right, on one line. Letting the pill wrap under a long name
   made one card in a row of three sit differently from its neighbours. */
.integration-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.integration-head h3 {
    flex: 1;
    min-width: 0;
    font-size: 20px;
    margin: 0;
}

.integration p {
    font-size: 16px;
    color: var(--muted);
}

.pill {
    flex: none;
    margin-top: 3px;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pill-live {
    background: var(--accent-wash);
    color: var(--accent-dark);
}

.pill-soon {
    background: var(--wash);
    color: var(--muted);
    border: 1px solid var(--line);
}

/* A closing sentence under a grid, for the thing the grid cannot say: that the
   list is still growing. */
.section-note {
    max-width: 62ch;
    margin: 44px auto 0;
    text-align: center;
    font-size: 17px;
    color: var(--muted);
}

.section-note a {
    font-weight: 600;
    color: var(--accent-dark);
    border-bottom: 1px solid rgba(16, 128, 0, 0.35);
}

.section-note a:hover {
    border-bottom-color: var(--accent-dark);
}

/* ------------------------------------------------------------ industries -- */

.industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.industry .card-icon {
    margin-bottom: 22px;
}

.industry h3 {
    margin: 0 0 10px;
}

.industry p {
    font-size: 17px;
    color: var(--muted);
}

/* ------------------------------------------------------------------ q&a --- */

/* Two columns of question and answer, open. An accordion hides the answers from
   the reader AND makes them a click away, and these are the six things somebody
   most wants to read before deciding. */
.qa-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 56px;
}

.qa h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.qa p {
    font-size: 17px;
    color: var(--muted);
}

/* ------------------------------------------------------------------ cta --- */

.cta-band {
    background: var(--deep-grad);
    color: #fff;
    text-align: center;
}

.cta-band h2 {
    color: #fff;
    max-width: 16ch;
    margin: 0 auto;
}

.cta-band p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.86);
    max-width: 34em;
    margin: 22px auto 40px;
}

/* --------------------------------------------------------------- footer --- */

.site-footer {
    background: var(--deep-grad);
    border-top: 3px solid var(--deep-edge);
    color: rgba(255, 255, 255, 0.74);
    padding: 88px 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 48px 40px;
}

.site-footer img.footer-logo {
    height: 30px;
    width: auto;
}

.footer-about {
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.6);
    max-width: 30em;
}

.site-footer h4 {
    position: relative;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 28px;
    padding-bottom: 12px;
}

.site-footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: var(--deep-edge);
}

.site-footer ul {
    list-style: none;
    display: grid;
    gap: 14px;
}

.site-footer a {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.82);
    transition: color 0.15s ease;
}

.site-footer a:hover {
    color: #fff;
}

/* The footer carries one address and it is the one that is actually read. */
.footer-mail {
    display: inline-block;
    margin-top: 22px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.footer-mail:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.footer-phone {
    display: block;
    margin-top: 14px;
    font-size: 19px;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.footer-phone:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-hours {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.site-footer .store-badge {
    margin-top: 22px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.site-footer .store-badge:hover {
    background: rgba(255, 255, 255, 0.16);
}

.footer-bottom {
    margin-top: 64px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1024px) {
    :root {
        --section: 84px;
    }

    h1 {
        font-size: 46px;
    }

    h2 {
        font-size: 34px;
    }

    .checklist-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero h1 {
        max-width: none;
    }

    .card-grid,
    .module-grid,
    .industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .module-grid {
        gap: 0 40px;
    }

    .integration-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1.4fr repeat(2, 1fr);
        gap: 44px 36px;
    }
}

@media (max-width: 860px) {
    .menu-toggle {
        display: flex;
        order: 3;
    }

    .nav-wrapper {
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 8px var(--gutter) 24px;
        display: none;
    }

    .nav-wrapper.active {
        display: flex;
    }

    .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-links a {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid var(--line);
    }

    .nav-links a:hover {
        border-bottom-color: var(--line);
    }

    .nav-ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 22px;
    }

    .nav-ctas .btn,
    .nav-signin {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 720px) {
    :root {
        --section: 64px;
    }

    body {
        font-size: 17px;
    }

    h1 {
        font-size: 38px;
    }

    h2 {
        font-size: 29px;
    }

    .lede {
        font-size: 18px;
    }

    .section-head {
        margin-bottom: 44px;
    }

    .checklist-row,
    .card-grid,
    .module-grid,
    .industry-grid,
    .integration-grid,
    .qa-list,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 30px 26px;
    }
}

/* ==========================================================================
 * The five inner pages: Features, Benefits, Pricing, FAQ, Contact.
 *
 * Each was designed on its own — a purple gradient hero on one, a navy band on
 * another, dark cards on a third, blue buttons here and indigo there, and 12–13px
 * body copy throughout. This layer does not rebuild them; it puts them on the same
 * ground, the same type scale, the same spacing and the same single accent as the
 * front page, so the six read as one product rather than six.
 *
 * It loads AFTER each page's own @section('styles'), which is what lets it win.
 * Everything is scoped to `body.marketing` so the class can never reach the app.
 * ========================================================================== */

/* The layout's own palette is defined as variables, so the fastest way to repaint
   five pages is to repaint the four variables they all draw from. */
body.marketing {
    --primary: var(--accent);
    --secondary: var(--accent-dark);
    --light-gray: var(--wash);
    --dark-gray: var(--ink);

    font-family: var(--font);
    font-size: 18px;
    line-height: 1.6;
    color: var(--body);
    background: #fff;
}

body.marketing .container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* -------------------------------------------------------------- to light --- */

/* Built dark (#111827 / #1f2937 / #1e293b), on cards and in inline styles alike.
   An author `!important` outranks a non-important inline style, which is the only
   reason this can be done without editing five files by hand. */
body.marketing .pricing-card,
body.marketing .contact-main-section,
body.marketing .contact-form-section,
body.marketing .contact-form-container,
body.marketing .contact-us-div,
body.marketing .contact-form,
body.marketing form.contact-form,
body.marketing .contact-card,
body.marketing .faq-main-section,
body.marketing .faq-item,
body.marketing .faq-container,
body.marketing .benefit-item,
body.marketing [style*="#111827"],
body.marketing [style*="#1f2937"],
body.marketing [style*="#1e293b"],
body.marketing [style*="#242836"] {
    background: #fff !important;
    background-image: none !important;
    border-color: var(--line) !important;
}

/* Text inside those regions was written for a dark ground. */
body.marketing .pricing-card,
body.marketing .pricing-card *,
body.marketing .contact-main-section,
body.marketing .contact-main-section *,
body.marketing .faq-main-section,
body.marketing .faq-main-section *,
body.marketing .benefit-item,
body.marketing .benefit-item * {
    color: var(--body) !important;
}

body.marketing h1,
body.marketing h2,
body.marketing h3,
body.marketing h4,
body.marketing h5 {
    color: var(--ink) !important;
    font-family: var(--font) !important;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* --------------------------------------------------------------- heroes ---- */

/* Every page opened on a saturated gradient with white text on it. One ground, one
   ink colour, and the headline does the work instead of the background. */
body.marketing .feat-hero,
body.marketing .pricing-header,
body.marketing .faq-header-section,
body.marketing .contact-header-section {
    background: var(--wash) !important;
    background-image: none !important;
    padding: 96px 0 !important;
    text-align: center;
    position: relative;
}

body.marketing .feat-hero::before,
body.marketing .feat-hero::after,
body.marketing .pricing-header::before,
body.marketing .pricing-header::after,
body.marketing .faq-header-section::before,
body.marketing .faq-header-section::after,
body.marketing .contact-header-section::before,
body.marketing .contact-header-section::after {
    display: none !important;
}

body.marketing .feat-hero h1,
body.marketing .pricing-header h1,
body.marketing .faq-header-section h1,
body.marketing .contact-header-section h1,
body.marketing .feat-hero h2,
body.marketing .pricing-header h2,
body.marketing .faq-header-section h2,
body.marketing .contact-header-section h2 {
    font-size: 50px;
    line-height: 1.1;
    text-shadow: none !important;
    max-width: 18ch;
    margin: 0 auto;
}

body.marketing .feat-hero p,
body.marketing .pricing-header p,
body.marketing .faq-header-section p,
body.marketing .contact-header-section p,
body.marketing .hero-sub,
body.marketing .contact-header-section .subtitle {
    color: var(--muted) !important;
    font-size: 20px !important;
    line-height: 1.6;
    max-width: 34em;
    margin: 22px auto 0;
    opacity: 1 !important;
}

/* The four numbers under the Features headline */
body.marketing .hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 64px;
    margin-top: 48px;
}

body.marketing .hero-stats .stat-num {
    display: block;
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink) !important;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

body.marketing .hero-stats .stat-label {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted) !important;
    opacity: 1 !important;
}

/* ------------------------------------------------------- section rhythm ---- */

body.marketing .feat-category,
body.marketing .faq-main-section,
body.marketing .contact-main-section,
body.marketing .comparison-section {
    padding: var(--section) 0 !important;
}

body.marketing .feat-category-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

body.marketing .feat-cat-header {
    max-width: 720px;
    margin: 0 auto 64px;
    text-align: center;
}

body.marketing .feat-cat-header h2 {
    font-size: 42px;
    line-height: 1.14;
}

body.marketing .feat-cat-header p {
    font-size: 20px;
    color: var(--muted) !important;
    margin-top: 20px;
}

/* A pale blue pill with an emoji in it was the loudest thing on a quiet page. */
body.marketing .feat-cat-badge {
    display: inline-block;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 18px !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-dark) !important;
    box-shadow: none !important;
}

/* ----------------------------------------------------------------- cards --- */

body.marketing .feat-cards-grid,
body.marketing .contact-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px !important;
}

body.marketing .feat-card,
body.marketing .contact-card,
body.marketing .faq-item,
body.marketing .benefit-item,
body.marketing .pricing-card {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body.marketing .feat-card:hover,
body.marketing .contact-card:hover,
body.marketing .pricing-card:hover {
    border-color: #cfd3d8 !important;
    box-shadow: 0 14px 34px rgba(31, 33, 36, 0.07) !important;
    transform: translateY(-3px);
}

body.marketing .feat-card {
    overflow: hidden;
    padding: 0 0 34px;
}

body.marketing .feat-card-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 0 !important;
    margin: 0 0 28px !important;
}

body.marketing .feat-card h3 {
    font-size: 21px;
    line-height: 1.35;
    padding: 0 32px;
    margin-bottom: 12px;
}

body.marketing .feat-card p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted) !important;
    padding: 0 32px;
}

/* ------------------------------------------------------------------ FAQ ---- */

/* The legal pages paint a blue gradient hero and set their own white heading, but
   this stylesheet loads afterwards and its bare h1 rule repainted it --ink: dark
   navy type on a blue ground. Put the white back, scoped to that hero. */
body.marketing .legal-hero h1,
body.marketing .legal-hero .hero-subtitle {
    color: #fff !important;
}

body.marketing .legal-hero .hero-subtitle {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* The contact form went from three fields to six, so it needs pairs on a row and
   a required marker. Scoped to body.marketing like the rest of this layer. */
body.marketing .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 22px;
}

body.marketing .contact-form .form-group {
    margin-bottom: 22px;
}

body.marketing .contact-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

body.marketing .contact-form .req {
    color: #c0392b;
}

body.marketing .contact-form .form-control {
    width: 100%;
    padding: 13px 16px;
    font-family: var(--font);
    font-size: 16px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
}

body.marketing .contact-form .form-control::placeholder {
    color: #a0a2a8;
}

body.marketing .contact-form .form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.16);
}

body.marketing .contact-form textarea.form-control {
    resize: vertical;
    min-height: 150px;
}

body.marketing .contact-form .btn-submit {
    padding: 14px 34px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 999px;
    cursor: pointer;
}

body.marketing .contact-form .btn-submit:hover {
    background: var(--accent-dark);
}

body.marketing .contact-form .form-note {
    margin-top: 16px;
    font-size: 15px;
    color: var(--muted);
}

@media (max-width: 720px) {
    body.marketing .form-row {
        grid-template-columns: 1fr;
    }
}

body.marketing .faq-container {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

body.marketing .faq-item {
    padding: 0 !important;
}

body.marketing .faq-question {
    font-size: 19px !important;
    font-weight: 600;
    color: var(--ink) !important;
    padding: 26px 30px !important;
    line-height: 1.45;
}

body.marketing .faq-answer {
    font-size: 17px !important;
    line-height: 1.65;
    color: var(--muted) !important;
    padding: 0 30px 28px !important;
}

body.marketing .faq-icon {
    color: var(--accent-dark) !important;
}

body.marketing .faq-contact-section {
    padding: var(--section) 0 !important;
    text-align: center;
    background: var(--wash) !important;
    background-image: none !important;
}

/* -------------------------------------------------------------- pricing ---- */

body.marketing .pricing-cards-container {
    gap: 28px !important;
    max-width: var(--container);
    padding: 0 var(--gutter);
}

body.marketing .pricing-card {
    padding: 40px 34px !important;
}

body.marketing .pricing-card.featured {
    border-color: var(--accent) !important;
}

body.marketing .pricing-card h3 {
    font-size: 22px !important;
    margin-bottom: 14px;
}

body.marketing .pricing-card .price {
    font-size: 46px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

body.marketing .pricing-card .price span,
body.marketing .pricing-card .billing-period,
body.marketing .pricing-card-note {
    color: var(--muted) !important;
    font-size: 16px !important;
}

body.marketing .pricing-card .features li {
    font-size: 16px !important;
    color: var(--body) !important;
    border-bottom-color: var(--line) !important;
    padding: 13px 0 !important;
}

body.marketing .pricing-card .features li::before {
    color: var(--accent-dark) !important;
}

body.marketing .popular-badge {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 6px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: none !important;
}

body.marketing .toggle-switch input:checked + .toggle-slider {
    background: var(--accent) !important;
}

/* The pricing page's monthly/yearly knob. White, with a shadow, so the control
   reads as a switch rather than a filled pill. */
body.marketing .billing-toggle .toggle-slider {
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(13, 47, 77, 0.28) !important;
}

body.marketing .comparison-table th {
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted) !important;
    background: var(--wash) !important;
}

body.marketing .comparison-table td {
    font-size: 17px;
    padding: 18px 20px !important;
    border-color: var(--line) !important;
}

/* -------------------------------------------------------------- contact ---- */

body.marketing .contact-card {
    padding: 40px 34px !important;
    text-align: center;
}

body.marketing .contact-card-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 24px;
    border-radius: 14px;
    background: var(--accent-wash) !important;
    color: var(--accent-dark) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: none !important;
}

body.marketing .contact-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

body.marketing .contact-card p,
body.marketing .contact-card a {
    font-size: 17px;
    color: var(--muted) !important;
}

body.marketing .contact-form-container {
    max-width: 760px;
    margin: 0 auto;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    padding: 48px 44px !important;
    box-shadow: none !important;
}

body.marketing .contact-form-header h2 {
    font-size: 34px;
}

body.marketing .form-group {
    margin-bottom: 24px;
}

body.marketing .form-group label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink) !important;
    margin-bottom: 8px;
}

body.marketing .form-control {
    width: 100%;
    font: inherit;
    font-size: 17px;
    padding: 14px 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--body) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.marketing .form-control:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-wash) !important;
}

/* ------------------------------------------------------------- benefits ---- */

/* Twelve different accent colours down the left edge, one per item. Twelve accents
   is no accent. */
body.marketing .benefit-item {
    padding: 30px 32px !important;
    margin-bottom: 20px;
    border-left: 4px solid var(--accent) !important;
}

body.marketing .benefit-item h3 {
    font-size: 21px;
    margin-bottom: 10px;
}

body.marketing .benefit-item p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--muted) !important;
}

body.marketing [class*="border-"][class*="-500"].benefit-item {
    border-left-color: var(--accent) !important;
}

body.marketing .benefit-item [class*="bg-"][class*="-500"] {
    background-color: var(--accent) !important;
}

/* --------------------------------------------------------- calls to action -- */

/* Six pages, six button colours. Declared last so it outranks the text-colour
   sweep above, which would otherwise repaint the label on a green button. */
body.marketing .feat-cta {
    background: var(--accent-dark) !important;
    background-image: none !important;
    padding: var(--section) 0 !important;
    text-align: center;
}

body.marketing .feat-cta h2 {
    color: #fff !important;
    font-size: 42px;
    line-height: 1.14;
    max-width: 16ch;
    margin: 0 auto;
}

body.marketing .feat-cta p {
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 20px;
    max-width: 34em;
    margin: 22px auto 40px;
}

body.marketing .feat-cta-btn,
body.marketing .faq-contact-btn,
body.marketing .pricing-card .btn,
body.marketing .btn-submit,
body.marketing .contact-main-section .btn-submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    padding: 15px 34px !important;
    border-radius: 999px !important;
    border: 2px solid transparent !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    background: var(--accent) !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: background 0.15s ease;
}

body.marketing .pricing-card .btn,
body.marketing .btn-submit {
    width: 100% !important;
}

body.marketing .feat-cta .feat-cta-btn {
    background: #fff !important;
    color: var(--ink) !important;
}

body.marketing .feat-cta .feat-cta-btn:hover {
    background: rgba(255, 255, 255, 0.88) !important;
}

body.marketing .faq-contact-btn:hover,
body.marketing .pricing-card .btn:hover,
body.marketing .btn-submit:hover {
    background: var(--accent-dark) !important;
}

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 1024px) {
    body.marketing .feat-hero h1,
    body.marketing .pricing-header h1,
    body.marketing .faq-header-section h1,
    body.marketing .contact-header-section h1,
    body.marketing .feat-hero h2,
    body.marketing .pricing-header h2,
    body.marketing .faq-header-section h2,
    body.marketing .contact-header-section h2 {
        font-size: 38px;
    }

    body.marketing .feat-cat-header h2,
    body.marketing .feat-cta h2 {
        font-size: 32px;
    }

    body.marketing .feat-cards-grid,
    body.marketing .contact-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    body.marketing .feat-hero,
    body.marketing .pricing-header,
    body.marketing .faq-header-section,
    body.marketing .contact-header-section {
        padding: 64px 0 !important;
    }

    body.marketing .feat-hero h1,
    body.marketing .pricing-header h1,
    body.marketing .faq-header-section h1,
    body.marketing .contact-header-section h1,
    body.marketing .feat-hero h2,
    body.marketing .pricing-header h2,
    body.marketing .faq-header-section h2,
    body.marketing .contact-header-section h2 {
        font-size: 32px;
    }

    body.marketing .feat-cards-grid,
    body.marketing .contact-cards {
        grid-template-columns: 1fr;
    }

    body.marketing .contact-form-container {
        padding: 32px 24px !important;
    }

    body.marketing .hero-stats {
        gap: 24px 36px;
    }
}

/* ------------------------------------------------------ last-mile fixes ---- */

/* The contact form band carried a photograph at 10% opacity behind it — a texture
   that only ever reads as a printing fault on a white ground. */
body.marketing .contact-form-section {
    background: var(--wash) !important;
    background-image: none !important;
    padding: var(--section) 0 !important;
}

body.marketing .contact-form-section::before,
body.marketing .contact-form-section::after {
    display: none !important;
}

body.marketing .contact-form-header .subtitle {
    color: var(--accent-dark) !important;
    font-size: 13px !important;
    letter-spacing: 0.1em;
}

body.marketing .contact-form-header p {
    color: var(--muted) !important;
    font-size: 18px !important;
}

/* The plan price is marked up as two elements, not one. */
body.marketing .price-amount {
    font-size: 46px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

body.marketing .price-period {
    font-size: 17px !important;
    color: var(--muted) !important;
}

body.marketing .billing-period {
    margin-top: 14px !important;
    margin-bottom: 30px !important;
    font-size: 17px !important;
    line-height: 1.6;
}

/* The alert boxes were written for the dark form. */
body.marketing .alert-success {
    background: var(--accent-wash) !important;
    color: var(--accent-dark) !important;
    border-color: var(--accent) !important;
}

body.marketing .alert-error {
    background: #fdecea !important;
    color: #a4271b !important;
    border-color: #e5c1bb !important;
}

/* The numbered badge on Benefits is a Tailwind circle inside a flex row; once the
   row stretches it becomes a full-height pill. And the numeral has to stay white -
   the text sweep above repaints everything inside a benefit item. */
body.marketing .benefit-item [class*="bg-"][class*="-500"] {
    align-self: flex-start;
    flex: none;
    color: #fff !important;
    font-weight: 700;
}

body.marketing .benefit-item [class*="bg-"][class*="-500"] * {
    color: #fff !important;
}

/* Section subtitles were set at 40-60% opacity on a dark ground; on white that is
   barely a colour at all. */
body.marketing .benefit-item + p,
body.marketing section > .container > p,
body.marketing .text-gray-400,
body.marketing .text-gray-500 {
    color: var(--muted) !important;
    opacity: 1 !important;
}

/* The panel beside the form. It replaced an indigo-to-pink gradient carrying four
   emoji cards and a quote about "transforming businesses": a different visual
   language from the rest of the site, and two of its four cards made claims we
   took off the marketing pages the same day. This is the site's own gradient, the
   site's own sentences, and artwork drawn for it rather than stock.

   These rules exist in BOTH Login.vue and public/css/weafbooks-marketing.css.
   Login is the compiled Vue app and never loads the marketing stylesheet, so the
   two pages cannot share one copy - keep them in step. */
.brand-side {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(150deg, #1c5c93 0%, #123f66 46%, #0d2f4d 100%);
}

/* The same bright hairline the site footer carries along its top edge. */
.brand-side::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #3d97e0, rgba(61, 151, 224, 0));
}

/* A faint grid so the ground reads as a surface rather than flat colour. Faded
   out at the edges so it never competes with the type. */
.brand-side::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 28%, transparent 78%);
    mask-image: radial-gradient(ellipse at 50% 40%, #000 28%, transparent 78%);
    pointer-events: none;
}

.brand-side .brand-panel {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 48px;
}

.brand-side .brand-panel-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    animation: brandPanelIn 0.7s ease-out both;
}

.brand-side .brand-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8fcdf9;
}

.brand-side .brand-headline {
    margin: 0 0 14px;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #ffffff;
    text-wrap: balance;
}

.brand-side .brand-sub {
    margin: 0;
    max-width: 46ch;
    font-size: 15.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
}

.brand-side .brand-art {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 26px 0 4px;
}

/* The trend line draws itself once, on load. Long enough to notice, short enough
   not to be waited on - and off entirely for anyone who asked for less motion. */
.brand-side .art-trend {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: brandTrend 1.1s ease-out 0.45s forwards;
}

.brand-side .brand-points {
    display: grid;
    gap: 14px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.brand-side .brand-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.brand-side .brand-points li svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: #8fcdf9;
}

.brand-side .brand-points strong {
    display: block;
    margin-bottom: 2px;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
}

.brand-side .brand-points span {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

.brand-side .brand-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.brand-side .brand-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    font-size: 12.5px;
    font-weight: 600;
    color: #ffffff;
}

/* A live dot, because these three integrations are live today. */
.brand-side .brand-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
}

.brand-side .brand-pill em {
    font-style: normal;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
}

@keyframes brandTrend {
    to { stroke-dashoffset: 0; }
}

@keyframes brandPanelIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .brand-side .brand-panel-inner,
    .brand-side .art-trend {
        animation: none;
    }

    .brand-side .art-trend {
        stroke-dashoffset: 0;
    }
}

/* Narrow columns: the headline gives up a few points before it starts wrapping
   into four lines. */
@media (max-width: 1200px) {
    .brand-side .brand-headline { font-size: 29px; }
    .brand-side .brand-sub { font-size: 14.5px; }
}

/* Register puts the panel in a rounded box beside the form rather than filling
   a column edge to edge, so it needs the padding the login wall gets from its
   flex centring. */
.brand-side {
    display: flex;
    align-items: center;
    border-radius: 18px;
    padding: 44px 38px;
}

@media (max-width: 767px) {
    .brand-side {
        padding: 32px 24px;
    }
}

/* ------------------------------------------------------- the running offer -- */
/* A band above the nav on every public page, the way QuickBooks runs a
   promotion: one sentence, one button, no dismissal. It is rendered only when an
   offer is actually active, so there is no empty bar when nothing is running. */
.promo-bar {
    background: var(--deep);
    color: #fff;
}

.promo-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.promo-bar-text {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #fff;
}

.promo-bar-text sup {
    font-size: 10px;
    opacity: 0.7;
}

.promo-bar-cta {
    flex: 0 0 auto;
    padding: 11px 26px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease;
}

.promo-bar-cta:hover {
    background: #4b93f0;
}

@media (max-width: 600px) {
    .promo-bar .container {
        flex-direction: column;
        text-align: center;
    }

    .promo-bar-text {
        font-size: 17px;
    }
}

/* ------------------------------------------------------------- mega menus -- */
/* Two of the nav items have depth behind them, so they open a panel instead of
   going straight somewhere. Everything in a panel is a real destination - the
   feature anchors exist on /features, the integration anchors on the home page. */
/* The panel is anchored to the nav's container, not to the individual menu item.
   Anchored to the item, a wide panel hanging off "Features" - the leftmost item -
   was half off the left edge of the screen, with four of its rows unreadable. */
.site-nav .container {
    position: relative;
}

.nav-links li.has-menu {
    position: static;
}

.nav-links .nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
}

.nav-links .nav-trigger svg {
    width: 11px;
    height: 8px;
    transition: transform 0.18s ease;
}

.nav-links li.open > .nav-trigger,
.nav-links .nav-trigger:hover {
    color: var(--accent);
}

.nav-links li.open > .nav-trigger svg {
    transform: rotate(180deg);
}

.mega[hidden] {
    display: none;
}

.mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    justify-content: center;
    padding-top: 14px;
}

.mega-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(158px, 1fr)) minmax(210px, 240px);
    gap: 8px 34px;
    width: max-content;
    max-width: 100%;
    padding: 26px 30px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(13, 47, 77, 0.16);
}

.mega-inner.mega-narrow {
    grid-template-columns: repeat(2, minmax(180px, 1fr)) minmax(210px, 240px);
}

.mega-col h4 {
    margin: 0 0 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.mega-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-col li + li {
    margin-top: 2px;
}

.mega-col a {
    display: block;
    padding: 6px 8px;
    margin-left: -8px;
    border-radius: 6px;
    font-size: 14.5px;
    color: var(--ink);
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

.mega-col a:hover {
    background: var(--accent-wash);
    color: var(--accent-dark);
}

/* The last column is a pointer to the fuller thing, not another list. */
.mega-feature {
    padding: 18px;
    border-radius: 10px;
    background: var(--wash);
}

.mega-feature h4 {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 8px;
    font-size: 15px;
    letter-spacing: -0.2px;
    text-transform: none;
    color: var(--ink);
}

.mega-feature p {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
}

.mega-cta {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.mega-cta:hover {
    color: var(--accent-dark);
}

/* In the mobile drawer the panel is not a dropdown - it is a section that opens
   in place, so the whole menu stays one scrolling column. */
@media (max-width: 992px) {
    .nav-links li.has-menu {
        position: static;
    }

    .nav-links .nav-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 6px 0;
    }

    .mega {
        position: static;
        transform: none;
        padding-top: 0;
    }

    .mega-inner,
    .mega-inner.mega-narrow {
        display: block;
        width: auto;
        max-width: none;
        padding: 4px 0 12px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .mega-col + .mega-col {
        margin-top: 16px;
    }

    .mega-feature {
        padding: 14px;
    }
}

/* --------------------------------------------------- pricing: the offer -- */
/* The plan card, following QuickBooks where it is worth following: the standard
   price struck through, the offer price large, and the terms of the offer ON the
   card rather than in a footnote nobody scrolls to. */
.billing-toggle-container {
    text-align: center;
    margin: 0 auto 34px;
}

.billing-label {
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease;
}

.billing-label.active {
    color: var(--ink);
}

.save-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--accent-wash);
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 700;
}

.promo-note {
    margin: 16px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--accent-dark);
}

.promo-terms {
    max-width: 760px;
    margin: 26px auto 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
    text-align: center;
}

.plan-price {
    margin-bottom: 6px;
}

/* The price it would be without the offer. Struck, muted, and on its own line so
   it never reads as the price being charged. */
.plan-was {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.plan-offer {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent-dark);
}

.plan-offer sup {
    font-size: 9px;
    opacity: 0.75;
}

.card-flag {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.plan-limits {
    margin: 20px 0;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--wash);
    font-size: 14px;
    color: var(--muted);
}

.plan-limits div + div {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.plan-limits strong {
    color: var(--ink);
    font-weight: 600;
}

.plan-reassure {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--muted);
    text-align: center;
}

/* ------------------------------------------- pricing: annual-only packages -- */
/* A package with a tax integration cannot be bought by the month in its first
   year. The card says so where the price would be, rather than quoting a figure
   nobody can actually pay, and offers the reasoning behind it. */
.plan-blocked {
    display: block;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--ink);
}

.plan-blocked-sub {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.plan-why {
    margin-top: 10px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}

.plan-why:hover {
    color: var(--accent-dark);
}

.plan-why-inline {
    margin-top: 4px;
    font-size: 12.5px;
}

.card-flag-annual {
    background: var(--deep);
}

/* -------------------------------------------------------------- why modal -- */
.why-modal[hidden] {
    display: none !important;
}

.why-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.why-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 47, 77, 0.55);
}

.why-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 86vh;
    overflow-y: auto;
    padding: 34px 36px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(13, 47, 77, 0.3);
    text-align: left;
}

.why-panel h3 {
    margin: 0 0 18px;
    padding-right: 30px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
}

.why-panel p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}

.why-close {
    position: absolute;
    top: 14px;
    right: 18px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 30px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}

.why-close:hover {
    color: var(--ink);
}

.why-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.why-dismiss {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}

.why-dismiss:hover {
    color: var(--ink);
}

@media (max-width: 560px) {
    .why-panel {
        padding: 26px 22px;
    }

    .why-panel h3 {
        font-size: 21px;
    }
}

/* The pricing page ships its own dark-theme rules; the marketing stylesheet
   already repaints the cards, but the band behind the billing switch was still
   near-black, which left the "Monthly" label dark grey on dark grey. */
body.marketing .billing-toggle-container {
    background: transparent !important;
    padding: 0 !important;
    margin: 30px 0 40px !important;
}

body.marketing .billing-toggle label,
body.marketing .billing-label {
    color: var(--muted) !important;
}

body.marketing .billing-label.active {
    color: var(--ink) !important;
}

/* The "Most chosen" / "Annual only" flag is positioned against its card. Without
   this it escapes to the top-right corner of the page. */
body.marketing .pricing-card {
    position: relative;
}

/* Annual-only pricing: there is no switch, so the page says so in words. */
.billing-statement {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
}

/* ------------------------------------------------------- checkout: the offer -- */
/* The sidebar sits on the deep gradient, so these are light-on-dark rather than
   the dark-on-light versions used on the plan cards. */
.checkout-was {
    display: block;
    font-size: 17px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.checkout-offer {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #8fcdf9;
}

.checkout-annual-note {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-left: 3px solid #ffb74a;
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, 0.08);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}


/* ------------------------------------------------------- app screenshots -- */
/* A sideways strip rather than a wrapping grid: the six screens are a sequence
   (sign in, sell, settle), and a grid would let the eye start anywhere in it.
   Each shot keeps its own aspect ratio, so a phone shot dropped in later next to
   a tablet one will not distort. */
.shot-strip {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    padding: 4px 4px 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.shot {
    flex: 0 0 auto;
    width: 232px;
    margin: 0;
    scroll-snap-align: start;
}

/* A device bezel, drawn rather than imaged - one less asset to ship and it takes
   the page's own colours. */
.shot-frame {
    padding: 8px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 22px;
    background: #0f172a;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

/* One fixed frame for every shot. Some were taken on a phone and some on a
   tablet, and a strip that changes shape halfway along looks like a mistake -
   so each is cropped from the top to the same window. The only thing that ever
   falls off the bottom is the Android nav bar. */
.shot-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 8;
    object-fit: cover;
    object-position: top center;
    border-radius: 14px;
    background: #0f172b;
}

.shot figcaption {
    margin-top: 14px;
}

.shot figcaption strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.shot figcaption span {
    display: block;
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

.shot-note {
    margin-top: 4px;
    font-size: 13px;
    color: var(--muted);
}

/* The strip is a scroller; say so with a visible bar rather than leaving people
   to discover it by accident. */
.shot-strip::-webkit-scrollbar {
    height: 8px;
}

.shot-strip::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: rgba(15, 23, 42, 0.2);
}

.shot-strip::-webkit-scrollbar-track {
    border-radius: 99px;
    background: rgba(15, 23, 42, 0.06);
}

@media (max-width: 640px) {
    .shot {
        width: 200px;
    }
}