/*
 * The DV Soft family look for the public website.
 * ----------------------------------------------------------------------------
 * The same face the retail billing product's website wears (billing/assets/
 * css/site.css), so the two products read as one company's: plum for the
 * brand, aubergine for the dark grounds, gold as a sparing accent, ivory for
 * soft sections. Playfair Display for headlines, Inter for everything else.
 *
 *   plum      #5A2470  buttons, links, the brand
 *   aubergine #1E1224  hero, CTA band, footer
 *   gold      #B08A4F  kickers, rules, numerals, icon rings
 *   ivory     #FAF7F2  soft sections;  line #E7E2DC hairlines
 *
 * A skin, loaded after marketing.css: it restyles the classes the views
 * already use rather than asking every view to change. marketing.css still
 * owns layout (grids, the product tour, the HTML screenshots); this file owns
 * how it looks. brand.css is left alone -- the customer workspace and the
 * console draw from it, and they keep their own density.
 *
 * Motion is progressive. <html class="anim"> is set in the head only when the
 * visitor has not asked for reduced motion; marketing.js drives GSAP from it,
 * and without it -- or if GSAP never loads -- every element is simply visible.
 */

/* ------------------------------------------------------------------ fonts */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
             src: url('../fonts/inter.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap;
             src: url('../fonts/playfair-500.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('../fonts/playfair-600.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 500; font-display: swap;
             src: url('../fonts/playfair-500-italic.woff2') format('woff2'); }

/* ----------------------------------------------------------------- tokens */

:root {
    --s-plum: #5A2470;
    --s-plum-deep: #3E1750;
    --s-aubergine: #1E1224;
    --s-aubergine-2: #2A1A32;

    --s-gold: #B08A4F;
    --s-gold-soft: #D8C29C;
    --s-gold-tint: #F6EFE3;

    --s-ink: #1A1620;
    --s-ink-2: #332D3A;
    --s-muted: #5F5968;
    --s-line: #E7E2DC;
    --s-line-2: #D6CFC6;
    --s-ivory: #FAF7F2;

    --s-on-dark: #EDE6EF;
    --s-on-dark-2: #C9BFCD;
    --s-line-dark: rgba(255, 255, 255, .11);

    --s-radius: 14px;
    --s-radius-lg: 22px;
    --s-shadow: 0 1px 2px rgba(26, 22, 32, .04), 0 10px 30px rgba(26, 22, 32, .06);
    --s-shadow-lg: 0 30px 70px rgba(26, 22, 32, .14);
    --s-ease: cubic-bezier(.22, 1, .36, 1);

    --s-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --s-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

    /* The floating header sits over the top of the page: room for it. */
    --s-nav-space: 104px;

    /* marketing.css reads these; pointing them at the family palette
       carries the change into everything it draws. */
    --mk-ink: var(--s-ink);
    --mk-body: var(--s-ink-2);
    --mk-muted: var(--s-muted);
    --mk-line: var(--s-line);
    --mk-tint: var(--s-ivory);
    --mk-brand: var(--s-plum);
    --mk-brand-dark: var(--s-plum-deep);
    --mk-on-dark: var(--s-on-dark);
    --mk-on-dark-muted: var(--s-on-dark-2);
    --mk-dark-line: var(--s-line-dark);
}

/* ------------------------------------------------------------------- base */

html { scroll-padding-top: 110px; }

body.marketing {
    font-family: var(--s-sans);
    font-size: 16.5px;
    color: var(--s-ink-2);
    background: #fff;
}

body.marketing ::selection { background: var(--s-gold-tint); color: var(--s-ink); }
body.marketing :focus-visible { outline: 2px solid var(--s-gold); outline-offset: 3px; border-radius: 4px; }
body.marketing a { color: var(--s-plum); text-underline-offset: 3px; }

body.marketing h1,
body.marketing h2,
body.marketing h3 {
    font-family: var(--s-serif);
    font-weight: 500;
    letter-spacing: -.018em;
    color: var(--s-ink);
}

body.marketing .section-head h2 {
    font-size: clamp(2.05rem, 3.9vw, 3.1rem);
    line-height: 1.12;
}

/* One phrase per headline, in italic: plum on light, gold on dark. */
body.marketing h1 em,
body.marketing h2 em,
body.marketing .text-gradient {
    font-style: italic;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--s-plum);
}

/* Matched to marketing.css's own, more specific, gradient rules for these --
   and the fill must be solid: a gradient clipped to text does not paint into
   the word spans the headline animation wraps each word in. */
body.marketing .hero-title em,
body.marketing .cta h2 em,
body.marketing .section-dark h2 em,
body.marketing .bento-tile--dark h3 em {
    font-style: italic;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--s-gold-soft);
}

/* -------------------------------------------------------------- kickers */

body.marketing .section-kicker,
body.marketing .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin-bottom: 20px;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--s-sans);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--s-gold);
}

body.marketing .section-kicker::before,
body.marketing .hero-eyebrow::before {
    content: '';
    display: block;
    width: 34px;
    height: 1px;
    margin: 0;
    border-radius: 0;
    background: currentColor;
    box-shadow: none;
}

body.marketing .section-head.center .section-kicker::after,
body.marketing .text-center .section-kicker::after {
    content: '';
    width: 34px;
    height: 1px;
    background: currentColor;
}

body.marketing .hero-eyebrow .dot { display: none; }
body.marketing .hero .hero-eyebrow,
body.marketing .section-dark .section-kicker,
body.marketing .cta .section-kicker { color: var(--s-gold-soft); background: none; border: 0; }

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

body.marketing .btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 13px 24px;
    transition: background .25s var(--s-ease), border-color .25s var(--s-ease), color .25s var(--s-ease),
                box-shadow .3s var(--s-ease), transform .3s var(--s-ease);
}

body.marketing .btn-lg { padding: 16px 30px; font-size: 1rem; }
body.marketing .btn-sm { padding: 8px 16px; }

body.marketing .btn-primary {
    background: var(--s-plum);
    border-color: var(--s-plum);
    color: #fff;
    box-shadow: none;
}

body.marketing .btn-primary:hover,
body.marketing .btn-primary:focus-visible {
    background: var(--s-plum-deep);
    border-color: var(--s-plum-deep);
    color: #fff;
    box-shadow: 0 12px 28px rgba(62, 23, 80, .28);
    transform: none;
}

/* On the dark grounds: a white button and a glass one. */
body.marketing .btn-bright,
body.marketing .btn-light {
    background: #fff;
    border-color: #fff;
    color: var(--s-aubergine);
    box-shadow: none;
}

body.marketing .btn-bright:hover,
body.marketing .btn-light:hover {
    background: var(--s-gold-tint);
    border-color: var(--s-gold-tint);
    color: var(--s-aubergine);
    transform: none;
}

body.marketing .btn-outline-light {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

body.marketing .btn-outline-light:hover {
    background: rgba(255, 255, 255, .08);
    border-color: #fff;
    color: #fff;
    transform: none;
}

body.marketing .btn-outline-secondary,
body.marketing .btn-outline-primary {
    background: transparent;
    border-color: var(--s-line-2);
    color: var(--s-ink);
}

body.marketing .btn-outline-secondary:hover,
body.marketing .btn-outline-primary:hover {
    background: transparent;
    border-color: var(--s-ink);
    color: var(--s-ink);
    transform: none;
}

/* ----------------------------------------------------------------- header */

/*
 * A white pill floating over the top of the page, tightening once the page
 * scrolls under it. Fixed rather than sticky, so the dark hero runs up behind
 * it; each page's first band makes room (--s-nav-space, below).
 */
body.marketing .site-header {
    position: fixed;
    top: 14px;
    left: 0;
    right: 0;
    z-index: 1030;
    padding: 0 20px;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    pointer-events: none;
}

body.marketing .site-header .navbar {
    min-height: 0;
    padding: 0;
}

body.marketing .site-header .navbar > .container {
    pointer-events: auto;
    max-width: 1200px;
    min-height: 70px;
    padding: 0 12px 0 24px;
    /* Solid white: the logo has a white ground of its own, and any
       transparency here would show it as a pale box over the dark hero. */
    background: #fff;
    border: 1px solid rgba(231, 226, 220, .9);
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(26, 22, 32, .05);
    transition: min-height .35s var(--s-ease), box-shadow .35s var(--s-ease), max-width .5s var(--s-ease);
}

body.marketing .site-header.is-stuck .navbar > .container {
    min-height: 62px;
    max-width: 1120px;
    box-shadow: 0 14px 40px rgba(26, 22, 32, .12);
}

body.marketing .site-header .navbar-brand img { height: 34px; width: auto; }

body.marketing .brand-product {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--s-muted);
    padding-left: 14px;
    border-left: 1px solid var(--s-line-2);
}

body.marketing .site-header .nav-link {
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 500;
    font-size: .93rem;
    color: var(--s-ink-2);
}

body.marketing .site-header .nav-link:hover,
body.marketing .site-header .nav-link.active,
body.marketing .site-header .nav-link.show { color: var(--s-plum); }

/* The current page: a small gold diamond under the word. */
body.marketing .site-header .nav-link::after {
    left: 50%;
    right: auto;
    bottom: 1px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    background: var(--s-gold);
    border-radius: 0;
    transform: rotate(45deg) scale(0);
    transition: transform .25s var(--s-ease);
}

body.marketing .site-header .nav-link.active::after { transform: rotate(45deg) scale(1); }
body.marketing .site-header .dropdown-toggle::after { display: block; }
body.marketing .site-header .nav-divider { background: var(--s-line-2); }

body.marketing .site-header .btn-primary { padding: 11px 20px; }

body.marketing .mega-menu {
    margin-top: 18px !important;
    padding: 12px;
    border: 1px solid var(--s-line);
    border-radius: 20px;
    box-shadow: var(--s-shadow-lg);
}

body.marketing .mega-item { border-radius: 14px; }
body.marketing .mega-item:hover,
body.marketing .mega-item:focus { background: var(--s-ivory); }

body.marketing .mega-item > i {
    border-radius: 50%;
    background: #fff;
    color: var(--s-gold);
    border: 1px solid var(--s-gold-soft);
}

body.marketing .mega-foot { border-top-color: var(--s-line); }

body.marketing .navbar-toggler {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--s-line-2);
}

@media (max-width: 991.98px) {
    body.marketing .site-header { top: 10px; padding: 0 12px; }

    body.marketing .site-header .navbar > .container {
        border-radius: 28px;
        padding: 10px 12px 10px 20px;
    }

    body.marketing .site-header .navbar-collapse { padding: 8px 0 12px; }
}

/* Room for the floating header on whatever comes first on the page. */
body.marketing #main > .container:first-child,
body.marketing #main > .breadcrumb-bar:first-child,
body.marketing #main > .section:first-child,
body.marketing #main > .narrow-section:first-child {
    padding-top: calc(var(--s-nav-space) + 1rem);
}

body.marketing #main > .page-hero:first-child { padding-top: calc(var(--s-nav-space) + 5.5rem); }

/* ------------------------------------------------------------------ icons */

body.marketing .segment > i,
body.marketing .bento-icon,
body.marketing .trust-item > i,
body.marketing .module-card > i,
body.marketing .feature-card > i,
body.marketing .feature-row-head > i {
    width: 50px;
    height: 50px;
    flex: none;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.2rem;
    color: var(--s-gold);
    background: #fff;
    border: 1px solid var(--s-gold-soft);
    box-shadow: none;
}

body.marketing .bento-tile--dark .bento-icon {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(216, 194, 156, .45);
    color: var(--s-gold-soft);
}

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

body.marketing .hero {
    padding: calc(var(--s-nav-space) + 3.5rem) 0 110px;
    background:
        radial-gradient(900px 560px at 90% 0%, rgba(176, 138, 79, .24), transparent 62%),
        radial-gradient(800px 560px at -5% 90%, rgba(123, 74, 146, .34), transparent 62%),
        var(--s-aubergine);
    color: var(--s-on-dark);
}

body.marketing .hero::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
}

body.marketing .hero-title {
    color: #fff;
    font-size: clamp(2.6rem, 4.7vw, 4.3rem);
    line-height: 1.04;
    letter-spacing: -.025em;
    max-width: 15ch;
}

body.marketing .hero-lead { color: var(--s-on-dark-2); line-height: 1.75; }

body.marketing .hero-points { gap: 10px 26px; }
body.marketing .hero-points li { color: #D9D0DC; font-size: .92rem; gap: 10px; }
body.marketing .hero-points i { display: none; }

body.marketing .hero-points li::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: none;
    transform: rotate(45deg);
    background: var(--s-gold);
}

body.marketing .hero-stage .shot {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 50px 110px rgba(0, 0, 0, .45), 0 0 0 8px rgba(255, 255, 255, .05);
}

/* The floating notes beside the screenshot: billing's chips. */
body.marketing .float-card {
    border: 1px solid var(--s-line);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    animation: none;
}

body.marketing .float-card > i,
body.marketing .float-card--br > i {
    border-radius: 50%;
    background: var(--s-gold-tint);
    color: var(--s-gold);
    border: 1px solid var(--s-gold-soft);
}

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

body.marketing .page-hero {
    background:
        radial-gradient(900px 520px at 90% 0%, rgba(176, 138, 79, .13), transparent 65%),
        radial-gradient(700px 480px at 0% 100%, rgba(123, 74, 146, .07), transparent 65%),
        var(--s-ivory);
    border-bottom: 1px solid var(--s-line);
    padding-bottom: clamp(3.5rem, 6vw, 6.5rem);
}

body.marketing .page-hero::before { display: none; }

body.marketing .page-hero h1 {
    font-size: clamp(2.5rem, 5.4vw, 4.4rem);
    line-height: 1.05;
    letter-spacing: -.022em;
    margin-bottom: 26px;
}

body.marketing .page-hero .lead { color: var(--s-muted); font-size: 1.15rem; line-height: 1.75; }

/* Copy beside a framed illustration, as on the billing site's inner pages. */
body.marketing .page-hero-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}

body.marketing .page-hero-copy { min-width: 0; }
body.marketing .page-hero-copy .lead { max-width: 36em; }

body.marketing .page-hero-figure {
    margin: 0;
    border-radius: 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--s-line);
    box-shadow: 0 40px 90px rgba(26, 22, 32, .14);
}

body.marketing .page-hero-figure img { display: block; width: 100%; height: auto; }

/* The old faint background drawing gives way to the framed one. */
body.marketing .page-hero-grid ~ .page-hero-art { display: none; }

@media (max-width: 991.98px) {
    body.marketing .page-hero-grid { grid-template-columns: 1fr; }
    body.marketing .page-hero-figure { max-width: 560px; }
}

/* The 404 and thank-you pages: one picture above the words. */
body.marketing .narrow-art {
    display: block;
    width: min(420px, 100%);
    height: auto;
    margin: 0 auto 2rem;
    border-radius: 26px;
    border: 1px solid var(--s-line);
    box-shadow: var(--s-shadow);
}

/* A breadcrumb above the heading shares its ground: the hero's gold glow starts
   in the breadcrumb and carries on below it, with no seam between the two. */
body.marketing .breadcrumb-bar {
    background:
        radial-gradient(900px 520px at 90% 0%, rgba(176, 138, 79, .13), transparent 65%),
        var(--s-ivory);
    border-bottom: 0;
}

body.marketing .breadcrumb-bar + .page-hero {
    padding-top: 2.5rem;
    background:
        radial-gradient(900px 520px at 90% -150px, rgba(176, 138, 79, .13), transparent 65%),
        radial-gradient(700px 480px at 0% 100%, rgba(123, 74, 146, .07), transparent 65%),
        var(--s-ivory);
}
body.marketing .breadcrumb-bar a:hover { color: var(--s-plum); }

/* --------------------------------------------------------------- sections */

body.marketing .section { padding: clamp(80px, 9vw, 120px) 0; }

body.marketing .section-alt {
    background: var(--s-ivory);
    border-block: 0;
}

body.marketing .section-dark {
    background: var(--s-aubergine);
    color: var(--s-on-dark);
}

body.marketing .section-dark h2,
body.marketing .section-dark h3 { color: #fff; }

body.marketing .section-head { margin-bottom: 64px; }
body.marketing .section-head p,
body.marketing .lead { color: var(--s-muted); font-size: 1.12rem; line-height: 1.75; }

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

body.marketing .feature-card,
body.marketing .module-card,
body.marketing .bento-tile,
body.marketing .plan-card {
    border: 1px solid var(--s-line);
    border-radius: var(--s-radius-lg);
    box-shadow: none;
    transition: border-color .35s var(--s-ease), box-shadow .35s var(--s-ease), transform .35s var(--s-ease);
}

body.marketing .feature-card:hover,
body.marketing .module-card:hover,
body.marketing .bento-tile:hover {
    border-color: var(--s-gold-soft);
    box-shadow: var(--s-shadow);
    transform: none;
}

body.marketing .bento-tile--dark {
    background:
        radial-gradient(500px 300px at 100% 0%, rgba(176, 138, 79, .18), transparent 65%),
        var(--s-aubergine);
    border-color: var(--s-aubergine);
}

body.marketing .bento-tile--dark h3 { color: #fff; }

body.marketing .module-card::before { display: none; }
body.marketing .module-card h2 { font-size: 1.4rem; }

/* Who it is for: a hairline index, cells sharing their borders. */
body.marketing .segments {
    border: 1px solid var(--s-line);
    border-radius: var(--s-radius-lg);
    box-shadow: none;
}

body.marketing .segment { border-color: var(--s-line); }
body.marketing .segment:hover { background: var(--s-ivory); }
body.marketing .segment h3 { font-size: 1.28rem; font-weight: 500; margin: 22px 0 10px; }

/* The strip of facts under the hero: serif numerals and gold rules. */
body.marketing .trust-item { border-color: var(--s-line); }

body.marketing .trust-item strong {
    font-family: var(--s-serif);
    font-weight: 500;
    font-size: 1.45rem;
    color: var(--s-ink);
}

/* How it starts: numbered steps with serif numerals. */
body.marketing .step-number {
    font-family: var(--s-serif);
    font-weight: 500;
    color: var(--s-gold);
    background: #fff;
    border: 1px solid var(--s-gold-soft);
    box-shadow: none;
}

body.marketing .tick-list li::before,
body.marketing .tick-list i { color: var(--s-gold); }

/* -------------------------------------------------------------- the tour */

body.marketing .tour-tab {
    border-radius: 999px;
    font-weight: 500;
}

body.marketing .tour-tab.is-active {
    background: var(--s-aubergine);
    border-color: var(--s-aubergine);
    color: #fff;
}

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

body.marketing .plan-card.featured,
body.marketing .plan-card--featured {
    background: var(--s-aubergine);
    border-color: var(--s-aubergine);
    color: var(--s-on-dark);
}

body.marketing .plan-ribbon {
    background: var(--s-gold);
    color: #fff;
    border-radius: 999px;
    letter-spacing: .14em;
}

body.marketing .plan-name { font-family: var(--s-serif); font-weight: 500; }
body.marketing .plan-amount { font-family: var(--s-serif); font-weight: 500; letter-spacing: -.02em; }

body.marketing .compare-table th { font-family: var(--s-sans); }

/* -------------------------------------------------------------------- faq */

body.marketing .faq-accordion .accordion-item {
    border: 0;
    border-bottom: 1px solid var(--s-line);
    border-radius: 0;
    background: transparent;
}

body.marketing .faq-accordion .accordion-button {
    font-family: var(--s-serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--s-ink);
    background: transparent;
    box-shadow: none;
    padding: 22px 0;
}

body.marketing .faq-accordion .accordion-button::after { filter: sepia(1) saturate(2) hue-rotate(-10deg); }
body.marketing .faq-accordion .accordion-body { padding: 0 0 22px; color: var(--s-muted); }

/* ------------------------------------------------------------------ forms */

body.marketing .enquiry-form {
    border: 1px solid var(--s-line);
    border-radius: var(--s-radius-lg);
    box-shadow: var(--s-shadow);
}

body.marketing .form-control,
body.marketing .form-select {
    border-color: var(--s-line-2);
    border-radius: 12px;
}

body.marketing .form-control:focus,
body.marketing .form-select:focus {
    border-color: var(--s-gold);
    box-shadow: 0 0 0 4px rgba(176, 138, 79, .15);
}

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

body.marketing .cta {
    position: relative;
    overflow: hidden;
    padding: clamp(96px, 11vw, 130px) 0;
    background:
        radial-gradient(700px 420px at 50% 120%, rgba(176, 138, 79, .30), transparent 65%),
        radial-gradient(600px 400px at 0% 0%, rgba(123, 74, 146, .32), transparent 65%),
        var(--s-aubergine);
}

body.marketing .cta::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 760px;
    height: 760px;
    margin: -380px 0 0 -380px;
    border-radius: 50%;
    border: 1px solid rgba(216, 194, 156, .14);
    background: none;
    pointer-events: none;
    box-shadow: 0 0 0 90px rgba(216, 194, 156, .03), 0 0 0 180px rgba(216, 194, 156, .02);
}

body.marketing .cta h2 {
    color: #fff;
    font-size: clamp(2.3rem, 4.8vw, 3.8rem);
    line-height: 1.1;
    letter-spacing: -.02em;
}

body.marketing .cta p { color: var(--s-on-dark-2); }

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

body.marketing .site-footer {
    position: relative;
    overflow: hidden;
    background: var(--s-aubergine);
    color: var(--s-on-dark-2);
    border-top: 1px solid var(--s-line-dark);
}

body.marketing .site-footer .brand-product { color: var(--s-on-dark-2); border-left-color: var(--s-line-dark); }

body.marketing .footer-heading {
    font-family: var(--s-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--s-gold-soft);
}

body.marketing .footer-links a,
body.marketing .footer-bottom a { color: var(--s-on-dark-2); }
body.marketing .footer-bottom { border-top-color: var(--s-line-dark); }

/* The product's line, set huge in gold and fading into the footer. */
body.marketing .footer-giant {
    margin: 72px 0 -0.18em;
    font-family: var(--s-serif);
    font-weight: 500;
    font-style: italic;
    white-space: nowrap;
    font-size: clamp(1.9rem, 6.2vw, 5.4rem);
    line-height: 1;
    letter-spacing: -.03em;
    text-align: center;
    background: linear-gradient(to bottom, rgba(216, 194, 156, .32), rgba(216, 194, 156, 0) 88%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    user-select: none;
}

/* ----------------------------------------------------------------- motion */

/* Hidden only while GSAP is about to reveal them. Without .anim, visible. */
.anim [data-reveal],
.anim [data-stagger] > * { opacity: 0; }
.anim [data-split] { visibility: hidden; }

/* marketing.css's own reveal is replaced by GSAP: never let it hide anything. */
.js-reveal [data-reveal] { transform: none; transition: none; }

.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; will-change: transform; }
[data-statement] .w { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
    .anim [data-reveal],
    .anim [data-stagger] > * { opacity: 1; }
    .anim [data-split] { visibility: visible; }
}

/* --------------------------------------------------------------- live demo */

body.marketing .demo-band .section-head { margin-bottom: 48px; max-width: 46rem; }
body.marketing .demo-band .section-head p { color: var(--s-on-dark-2); }
body.marketing .demo-band h2 em { color: var(--s-gold-soft); -webkit-text-fill-color: currentColor; background: none; }

body.marketing .demo-logins {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

body.marketing .demo-login {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--s-line-dark);
    border-radius: var(--s-radius-lg);
    background: var(--s-aubergine-2);
    transition: border-color .35s var(--s-ease), transform .35s var(--s-ease);
}

body.marketing .demo-login:hover { border-color: var(--s-gold); transform: translateY(-3px); }

body.marketing .demo-login-role {
    font-family: var(--s-serif);
    font-size: 1.2rem;
    color: #fff;
}

body.marketing .demo-login-blurb { margin: 0; font-size: .92rem; color: var(--s-on-dark-2); }

/* Label above value: a username never has to share a line, so none wraps. */
body.marketing .demo-login dl { margin: 4px 0 0; }

body.marketing .demo-login dt {
    color: var(--s-on-dark-2);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.marketing .demo-login dd { margin: 0 0 8px; white-space: nowrap; }
body.marketing .demo-login dd:last-child { margin-bottom: 0; }
body.marketing .demo-login code { color: var(--s-gold-soft); background: none; padding: 0; font-size: .95rem; }

body.marketing .demo-login-go {
    margin-top: auto;
    padding-top: 6px;
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
}

body.marketing .demo-login-go:hover,
body.marketing .demo-login-go:focus-visible { color: var(--s-gold-soft); }
body.marketing .demo-login-go i { transition: transform .3s var(--s-ease); }
body.marketing .demo-login-go:hover i { transform: translateX(4px); }