/**
 * Pivio landing page. Standalone stylesheet: no Bootstrap, no shell.
 * Brand tokens shared with the product (navy, orange, Plus Jakarta Sans)
 * so the marketing page looks like the app it sells.
 */

:root {
    --ld-navy: #232B6A;
    --ld-navy-deep: #1c2352;
    --ld-navy-hover: #1b2153;
    --ld-orange: #FF8C3F;
    --ld-orange-soft: #fff3ea;
    --ld-ink: #191b22;
    --ld-ink-2: #3a3d49;
    --ld-mut: #7c7f8b;
    --ld-mut-2: #9a9da8;
    --ld-line: #e7e8ec;
    --ld-page: #ffffff;
    --ld-tint: #f5f6f8;
    --ld-radius: 16px;
    --ld-radius-sm: 10px;
    --ld-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
    --ld-shadow-shot: 0 24px 64px rgba(28, 35, 82, .18), 0 2px 8px rgba(28, 35, 82, .08);
    --ld-max: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.landing {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    color: var(--ld-ink);
    background: var(--ld-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.landing a { text-decoration: none; color: inherit; }
.landing img { max-width: 100%; display: block; }

.ld-container { max-width: var(--ld-max); margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------------ nav */
.ld-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 68px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.ld-nav.scrolled { border-bottom-color: var(--ld-line); box-shadow: 0 4px 20px rgba(16, 24, 40, .05); }

.ld-nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.ld-nav-logo img { height: 32px; }
.ld-nav-links { display: flex; gap: 24px; margin-left: 8px; }
.ld-nav-links a { font-size: 14.5px; font-weight: 600; color: var(--ld-ink-2); }
.ld-nav-links a:hover { color: var(--ld-navy); }
.ld-nav-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ------------------------------------------------------------- buttons */
.ld-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 22px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    white-space: nowrap;
}

.ld-btn:active { transform: translateY(1px); }

.landing .ld-btn-primary { background: var(--ld-navy); color: #fff; box-shadow: 0 2px 8px rgba(35, 43, 106, .28); }
.landing .ld-btn-primary:hover { background: var(--ld-navy-hover); color: #fff; box-shadow: 0 6px 18px rgba(35, 43, 106, .32); }

.landing .ld-btn-ghost { background: transparent; color: var(--ld-ink-2); border-color: var(--ld-line); }
.landing .ld-btn-ghost:hover { border-color: var(--ld-mut-2); color: var(--ld-ink); }

.landing .ld-btn-inverse { background: var(--ld-orange); color: #2b1503; box-shadow: 0 2px 8px rgba(255, 140, 63, .35); }
.landing .ld-btn-inverse:hover { background: #ff9c59; color: #2b1503; box-shadow: 0 6px 18px rgba(255, 140, 63, .4); }

.ld-btn-sm { padding: 9px 16px; font-size: 14px; }

/* ---------------------------------------------------------------- hero */
.ld-hero {
    padding: 28px 0 64px;
    overflow: hidden;
    background:
        radial-gradient(60% 40% at 50% 0%, rgba(35, 43, 106, .05) 0%, transparent 70%),
        radial-gradient(40% 30% at 85% 55%, rgba(255, 140, 63, .06) 0%, transparent 70%);
}

.ld-hero-center { max-width: 780px; margin: 0 auto; text-align: center; }
.ld-hero-center .ld-hero-sub { margin-left: auto; margin-right: auto; }
.ld-hero-center .ld-hero-ctas { justify-content: center; }

.ld-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ld-mut);
}

.ld-facts span { display: inline-flex; align-items: center; gap: 6px; }
.ld-facts i { color: #16a34a; font-size: 13px; }


/* Hero demo: one browser window holding the product video. Replaces the
   three-screenshot collage — a 30s loop of real use sells it better than
   stills, and it is the same 1280px frame so the layout is unchanged. */
.ld-demo {
    position: relative;
    margin-top: 26px;
}

.ld-demo-frame {
    /* Also capped by the height left below the headline, so the whole demo
       lands above the fold instead of asking the visitor to scroll for it.
       415px is the hero text, facts row and breathing space. */
    width: min(100%, 1120px, calc((100vh - 415px) * 16 / 9));
    margin: 0 auto;
    /* The recording carries its own gradient backdrop, so a browser chrome
       around it would frame an already-framed picture. */
    border-radius: var(--ld-radius);
    overflow: hidden;
    box-shadow: var(--ld-shadow-shot);
}

.ld-demo-video {
    display: block;
    width: 100%;
    height: auto;
    /* the recording is 16:9 — reserve the box so the hero never jumps */
    aspect-ratio: 16 / 9;
    background: #f1f2f5;
    object-fit: cover;
}

.ld-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ld-orange-soft);
    color: #c05e14;
    border: 1px solid #ffd9bd;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 22px;
}

.ld-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
}

.ld-hero h1 .accent { color: var(--ld-orange); }

.ld-hero-sub {
    margin: 0 0 22px;
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--ld-mut);
    max-width: 46ch;
}

.ld-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.ld-shot-frame {
    background: #fff;
    border: 1px solid var(--ld-line);
    border-radius: var(--ld-radius);
    box-shadow: var(--ld-shadow-shot);
    overflow: hidden;
}

.ld-shot-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--ld-line);
    background: #fafafb;
}

.ld-shot-bar span { width: 10px; height: 10px; border-radius: 999px; background: #e4e4e7; }

.ld-shot-url {
    /* full-width omnibox, like a real browser */
    flex: 1;
    margin-left: 10px;
    text-align: center;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ld-mut);
    background: #fff;
    border: 1px solid var(--ld-line);
    border-radius: 999px;
    padding: 4px 14px;
    line-height: 1.3;
}

.ld-hero-shot { transform: rotate(0.6deg) translateY(0); }

/* ------------------------------------------------------------ sections */
.ld-section { padding: 88px 0; }
.ld-section.tint { background: var(--ld-tint); }

.ld-section-head { max-width: 640px; margin: 0 0 48px; }
.ld-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.ld-section-head h2 {
    margin: 0 0 14px;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    letter-spacing: -0.025em;
    font-weight: 800;
    line-height: 1.15;
}

.ld-section-head p { margin: 0; font-size: 1.05rem; line-height: 1.65; color: var(--ld-mut); }

/* ----------------------------------------------------------- bento grid */
.ld-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

.ld-cell {
    border: 1px solid var(--ld-line);
    border-radius: var(--ld-radius);
    background: #fff;
    box-shadow: var(--ld-shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ld-cell-pad { padding: 26px 28px; }

.ld-cell h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.ld-cell p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ld-mut); }

.ld-cell-shot { margin-top: auto; padding: 22px 0 0 28px; }
.ld-cell-shot img {
    border-top-left-radius: var(--ld-radius-sm);
    border: 1px solid var(--ld-line);
    border-right: 0;
    border-bottom: 0;
    box-shadow: 0 10px 30px rgba(28, 35, 82, .12);
}

.ld-cell-navy { background: var(--ld-navy-deep); border-color: var(--ld-navy-deep); }
.ld-cell-navy h3 { color: #fff; }
.ld-cell-navy p { color: rgba(255, 255, 255, .72); }

.ld-cell-orange { background: var(--ld-orange-soft); border-color: #ffd9bd; }
.ld-cell-orange h3 { color: #a34c0d; }
.ld-cell-orange p { color: #8a5a35; }

.ld-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: var(--ld-tint);
    color: var(--ld-navy);
    font-size: 18px;
}

.ld-cell-navy .ld-icon { background: rgba(255, 255, 255, .12); color: var(--ld-orange); }
.ld-cell-orange .ld-icon { background: rgba(255, 255, 255, .7); color: #c05e14; }

.ld-b-wide { grid-column: span 7; }
.ld-b-tall { grid-column: span 5; }
.ld-b-third { grid-column: span 4; }

/* ------------------------------------------------------ latvia section */
.ld-split {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 64px;
    align-items: center;
}

.ld-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }

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

.ld-check {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #f0fdf4;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-top: 2px;
}

.ld-checklist h4 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.ld-checklist p { margin: 0; font-size: .93rem; color: var(--ld-mut); line-height: 1.55; }

/* --------------------------------------------------------------- steps */
.ld-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.ld-step {
    background: #fff;
    border-radius: var(--ld-radius);
    padding: 28px 30px 30px;
    box-shadow: var(--ld-shadow-card);
}

.ld-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--ld-navy);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 20px;
}

.ld-step-num.accent { background: var(--ld-orange); color: #2b1503; }

.ld-step h3 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.ld-step p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--ld-mut); }

/* ----------------------------------------------------------------- cta */
.ld-cta {
    background: var(--ld-navy-deep);
    border-radius: 22px;
    padding: 64px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.ld-cta::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 140, 63, .25) 0%, transparent 70%);
    pointer-events: none;
}

.ld-cta h2 { margin: 0 0 10px; color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; }
.ld-cta p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 1.02rem; max-width: 46ch; }

/* -------------------------------------------------------------- footer */
.ld-footer { padding: 42px 0 48px; border-top: 1px solid var(--ld-line); margin-top: 88px; }
.ld-footer-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ld-footer img { height: 26px; }
.ld-footer-links { display: flex; gap: 20px; margin-left: auto; }
.ld-footer a { font-size: 14px; font-weight: 600; color: var(--ld-mut); }
.ld-footer a:hover { color: var(--ld-ink); }
.ld-footer-copy { font-size: 13.5px; color: var(--ld-mut-2); width: 100%; margin-top: 14px; }

/* ------------------------------------------------------------- reveals */
@media (prefers-reduced-motion: no-preference) {
    .ld-reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
    }

    .ld-reveal.in { opacity: 1; transform: none; }

    .ld-hero-shot { transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 991px) {
    .ld-split { grid-template-columns: 1fr; gap: 40px; }
    .ld-hero { padding: 40px 0 64px; }
    .ld-demo { margin-top: 40px; }
    .ld-nav-links { display: none; }
    .ld-b-wide, .ld-b-tall, .ld-b-third { grid-column: span 12; }
    .ld-steps { grid-template-columns: 1fr; }
    .ld-section { padding: 60px 0; }
    .ld-cta { padding: 44px 28px; }
}

/* ------------------------------------------------------ language switch */
/* <details> gives a dropdown with no JavaScript; three languages no longer
   fit as a row of buttons. */
.landing .ld-lang { position: relative; }

.landing .ld-lang summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--ld-line);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ld-ink-2);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.landing .ld-lang summary::-webkit-details-marker { display: none; }
.landing .ld-lang summary:hover { border-color: var(--ld-mut-2); }
.landing .ld-lang-caret { font-size: 10px; color: var(--ld-mut-2); }
.landing .ld-lang[open] .ld-lang-caret { transform: rotate(180deg); }

.landing .ld-lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 160px;
    background: #fff;
    border: 1px solid var(--ld-line);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .14);
    padding: 6px;
    z-index: 60;
}

.landing .ld-lang-opt {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ld-ink-2);
}
.landing .ld-lang-opt:hover { background: var(--ld-tint); color: var(--ld-ink); }
.landing .ld-lang-opt.is-active { background: var(--ld-tint); color: var(--ld-navy); font-weight: 700; }

@media (max-width: 600px) {
    .landing .ld-lang summary { padding: 7px 9px; font-size: 12px; }
}

/* ------------------------------------------------------------- pricing */
.ld-billing-toggle {
    display: flex;
    gap: 4px;
    width: max-content;
    margin: 0 auto 36px;
    padding: 4px;
    background: var(--ld-tint);
    border: 1px solid var(--ld-line);
    border-radius: 12px;
}

.ld-billing-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    border-radius: 9px;
    padding: 9px 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--ld-mut);
    cursor: pointer;
}
.ld-billing-toggle button.is-active {
    background: #fff;
    color: var(--ld-navy);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}
.ld-save {
    font-size: 11.5px;
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    border-radius: 999px;
    padding: 2px 8px;
}

.ld-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

.ld-plan {
    position: relative;
    background: #fff;
    border: 1px solid var(--ld-line);
    border-radius: var(--ld-radius);
    box-shadow: var(--ld-shadow-card);
    padding: 28px 24px;
}

/* the recommended plan sits slightly proud of the others */
.ld-plan.is-featured {
    border-color: var(--ld-navy);
    box-shadow: 0 12px 32px rgba(35, 43, 106, .14);
}

.ld-plan-badge {
    position: absolute;
    top: -11px;
    left: 24px;
    background: var(--ld-navy);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 999px;
    padding: 4px 12px;
}

.ld-plan h3 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.ld-plan-sub { margin: 0 0 18px; font-size: 13.5px; color: var(--ld-mut); }

.ld-plan-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ld-amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.ld-per { font-size: 13px; font-weight: 600; color: var(--ld-mut); }

.ld-plan-note { margin: 8px 0 20px; font-size: 12.5px; color: var(--ld-mut-2); }

.ld-plan-cta { width: 100%; margin-bottom: 22px; }

.ld-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ld-plan-list li {
    position: relative;
    padding-left: 24px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ld-ink-2);
}
.ld-plan-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ld-orange);
}
/* the "everything in X, plus" line is a heading, not a feature */
.ld-plan-list li:first-child {
    padding-left: 0;
    font-weight: 700;
    color: var(--ld-ink);
    margin-bottom: 2px;
}
.ld-plan-list li:first-child::before { display: none; }

.ld-plans-foot {
    margin: 32px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--ld-mut-2);
}

@media (max-width: 991px) {
    .ld-plans { grid-template-columns: 1fr; }
    .ld-plan.is-featured { order: -1; }
}

/* ------------------------------------------------------------- contact */
.ld-contact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.ld-contact-card {
    background: #fff;
    border: 1px solid var(--ld-line);
    border-radius: var(--ld-radius);
    box-shadow: var(--ld-shadow-card);
    padding: 26px 22px;
    text-align: center;
}
.ld-contact-card h3 { margin: 12px 0 6px; font-size: 1rem; font-weight: 800; }
.ld-contact-card p { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.ld-contact-card p a:hover { color: var(--ld-navy); }
.ld-contact-sub { font-size: 12.5px !important; font-weight: 500 !important; color: var(--ld-mut); }
.ld-contact-sub a { text-decoration: underline; }
.ld-contact-cta { margin-top: 28px; text-align: center; }

.ld-footer-tag {
    margin: 10px 0 0;
    max-width: 42ch;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ld-mut);
}

/* two plans now, not three — keep them centred rather than stretched */
.ld-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin: 0 auto; }

@media (max-width: 991px) {
    .ld-contact { grid-template-columns: 1fr; }
    .ld-plans { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- security */
.ld-security {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.ld-security-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--ld-line);
    border-radius: var(--ld-radius);
    box-shadow: var(--ld-shadow-card);
    padding: 22px 20px;
}
.ld-security-item i {
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--ld-navy);
}
.ld-security-item h3 { margin: 0 0 5px; font-size: .95rem; font-weight: 800; }
.ld-security-item p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ld-mut); }

/* ---------------------------------------- long-form documents (terms, FAQ) */
.ld-doc { padding: 118px 0 24px; }
.ld-doc-inner { max-width: 760px; }
.ld-doc-head { margin-bottom: 40px; padding-bottom: 26px; border-bottom: 1px solid var(--ld-line); }
.ld-doc-head h1 {
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.ld-doc-dates { margin: 12px 0 0; font-size: 14px; color: var(--ld-mut); }
.ld-doc-inner h2 {
    margin: 42px 0 12px;
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.ld-doc-inner h3 {
    margin: 26px 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ld-ink);
}
.ld-doc-inner p,
.ld-doc-inner li { font-size: 15.5px; line-height: 1.75; color: var(--ld-ink-2); }
.ld-doc-inner p { margin: 0 0 14px; }
.ld-doc-inner ul { margin: 0 0 16px; padding-left: 22px; }
.ld-doc-inner li { margin-bottom: 6px; }
.ld-doc-inner a { color: var(--ld-navy); text-decoration: underline; text-underline-offset: 2px; }
.ld-doc-inner a:hover { color: var(--ld-orange); }
.ld-doc-address {
    margin: 0 0 16px;
    padding: 16px 18px;
    background: var(--ld-tint);
    border-radius: var(--ld-radius-sm);
    font-style: normal;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ld-ink-2);
}

@media (max-width: 767px) {
    .ld-doc { padding-top: 96px; }
}

/* footer top: brand block, then the company and bank details */
.ld-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.ld-footer-col h3 {
    margin: 0 0 10px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ld-mut-2);
}

.ld-footer-col address {
    margin: 0;
    font-style: normal;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ld-mut);
}

.ld-footer-col address a { font-size: inherit; font-weight: 600; }

@media (max-width: 860px) {
    .ld-footer-top { grid-template-columns: 1fr 1fr; }
    .ld-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .ld-footer-top { grid-template-columns: 1fr; gap: 24px; }
}

/* security lives here rather than as a page section: a trust strip, not a pitch */
.ld-footer-security {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--ld-line);
}

.ld-footer-security h3 {
    margin: 0 0 12px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ld-mut-2);
}

.ld-footer-security ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ld-footer-security li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ld-ink-2);
}

.ld-footer-security i {
    font-size: 15px;
    line-height: 1;
    color: var(--ld-navy);
}

/*
 * Footer bottom bar: copyright on the left, the legal links on the right as a
 * pipe-separated run, per the client's specified line.
 */
.ld-footer-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 24px;
    width: 100%;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ld-line);
}

.ld-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    margin-left: 0;
}

/* the separators are decoration, so draw them rather than mark them up */
.ld-footer-links a + a::before {
    content: "|";
    margin: 0 10px;
    color: var(--ld-line);
    font-weight: 400;
}

.ld-footer-copy { width: auto; margin-top: 0; }

@media (max-width: 640px) {
    .ld-footer-bar { flex-direction: column-reverse; align-items: flex-start; }
    /* wrapped pipes land at the start of a line, so drop them and space the
       links instead */
    .ld-footer-links { gap: 6px 18px; }
    .ld-footer-links a + a::before { content: none; }
}