/* Evidence Pack — public site pages (home + legal), served by Django from
   backend/templates/site/. The look is a fresh, New-Zealand-centered design:
   deep slate-navy dark bands, a saturated blue for actions, a sparing
   authoritative red keyline on the dark mastheads, uppercase tracked-out
   labels, a blue accent-rule under section headings, and tight corner radii.

   The palette itself lives in tokens.css (shared with the app's design
   system); this file only maps those tokens onto local shorthand names. */

:root {
    /* Dark bands / headings — deep, for strong contrast & gravitas */
    --ink: var(--brand-ink); /* hero / video / cta base, headings, titles */
    --ink2: var(--brand-ink-deep); /* footer — near-black slate */

    /* Primary action — a deep, saturated official blue */
    --action: var(--brand-blue);
    --action-ink: var(--brand-blue-hover); /* hover */
    --action-soft: var(--brand-blue-soft); /* soft chips, avatar, indices */

    /* High-emphasis accent — authoritative red, used sparingly */
    --accent: var(--brand-red);
    --accent-ink: var(--brand-red-hover);

    /* Secondary accent — aqua (kept for tile variety) */
    --aqua: var(--brand-aqua);
    --aqua-soft: var(--brand-aqua-soft);
    --sky: var(--brand-sky); /* accent on dark backgrounds (video eyebrow) */

    /* Neutrals — cooler, crisper borders, higher-contrast text */
    --paper: var(--brand-paper); /* alternating section background */
    --text: var(--brand-text); /* body text */
    --muted: var(--brand-muted); /* muted text */
    --line: var(--brand-line); /* borders */

    /* Tile accent colours — kept multi-hue to break up the blue */
    --green: var(--brand-green);
    --green-soft: var(--brand-green-soft);
    --violet-soft: var(--brand-violet-soft);
    --violet-ink: var(--brand-violet-ink);
    --blue-soft: var(--brand-blue-soft);
    --blue-ink: var(--brand-blue);
}

* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        sans-serif;
    color: var(--text);
    line-height: 1.6;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
a {
    text-decoration: none;
    color: inherit;
}
h1,
h2,
h3,
h4,
p,
ul {
    margin: 0;
}
h1,
h2,
h3 {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--ink);
}
ul {
    list-style: none;
    padding: 0;
}
svg {
    display: block;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 40px;
}
.sec {
    padding: 72px 0;
    /* Whisper-soft vertical wash so the white bands read less flat — a barely
       perceptible cool tint that deepens toward the section's base. */
    background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
}
.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.secalt {
    /* The alternating bands carry a deliberately more pronounced wash than the
       white sections: a soft radial highlight up top for a premium "lit" feel,
       laid over a diagonal that runs from a light crown down to a noticeably
       deeper cool slate at the base. */
    background:
        radial-gradient(
            120% 80% at 50% -10%,
            rgba(255, 255, 255, 0.65),
            transparent 60%
        ),
        linear-gradient(165deg, #eef2f9 0%, #e3e9f3 55%, #dae1ee 100%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
/* Exception: the FAQ band keeps a flat fill (no gradient), by request. */
#faq {
    background: var(--paper);
}
/* Section eyebrow — uppercase, tracked-out official marker */
.eyebrow {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--action);
}
.h2 {
    font-size: clamp(28px, 4vw, 38px);
    margin-top: 12px;
    max-width: 640px;
}
/* Blue accent-rule beneath every section title — the page-wide unifier */
.h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: var(--action);
    border-radius: 2px;
    margin: 16px auto 0;
}
.sub {
    color: var(--muted);
    font-size: 16px;
    margin-top: 12px;
    max-width: 560px;
}

/* Buttons — tight radii; the primary action gets a decisive bottom edge */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    padding: 12px 20px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition:
        transform 0.06s ease,
        background 0.15s ease;
}
.btn:active {
    transform: scale(0.98);
}
.btn i {
    font-size: 18px;
}
.btn-pri {
    background: var(--action);
    color: #fff;
    box-shadow: 0 2px 0 var(--action-ink);
}
.btn-pri:hover {
    background: var(--action-ink);
}
.btn-out {
    background: transparent;
    color: #dbe8f3;
    border-color: rgba(219, 232, 243, 0.4);
}
.btn-out:hover {
    background: rgba(219, 232, 243, 0.1);
}
.btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.26);
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Brand wordmark — Poppins, matched to the mockup. The white logo mark itself
   is a transparent PNG, sized by height so it renders correctly on every page. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Poppins", "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: 26px;
    letter-spacing: -0.005em;
}
.brand .logo-mark {
    height: 40px;
    width: auto;
    display: block;
}

/* Hero — deep, dramatic navy with a tight blue glow + a bold red masthead
   keyline. */
.hero {
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--accent);
    background:
        radial-gradient(
            820px 480px at 84% -14%,
            rgba(23, 110, 220, 0.4),
            transparent 56%
        ),
        linear-gradient(158deg, #273041 0%, #1a2230 55%, #0f141d 100%);
}
/* Silver fern watermark (copied from the app's assets), laid in with a screen
   blend over the dark background — the same treatment as the app sidebar. */
.hero::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -70px;
    width: 400px;
    height: 560px;
    background: url("fern.jpg") center / contain no-repeat;
    mix-blend-mode: screen;
    opacity: 0.15;
    transform: translateY(-50%) rotate(-8deg);
    pointer-events: none;
}
/* Lady Justice watermark, mirrored on the left opposite the fern. This is a
   photo (bronze statue on a grey studio backdrop), not line-art, so it needs
   more than the fern's plain screen blend: grayscale(1) drops it to the fern's
   silver register, contrast/brightness crush the grey backdrop toward black
   (which screen then makes transparent), and a radial mask feathers the box
   edges away so only the lit statue emerges from the dark. Anchored bottom-left
   so her base sits on the .strip below the hero, and sized (via width, since
   the image is `contain`ed) so she rises to about the eyebrow-pill line. */
.hero::before {
    content: "";
    position: absolute;
    left: -110px;
    bottom: 0;
    width: 760px;
    height: 510px;
    background: url("justice.jpg") center bottom / contain no-repeat;
    filter: grayscale(1) contrast(1.95) brightness(0.86);
    mix-blend-mode: screen;
    opacity: 0.62;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 55% 50%, #000 10%, transparent 62%);
    mask-image: radial-gradient(ellipse 70% 70% at 55% 50%, #000 10%, transparent 62%);
}
.hero .wrap {
    position: relative;
    z-index: 1;
}
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}
.nav .brand {
    color: #fff;
}
.navr {
    display: flex;
    align-items: center;
    gap: 20px;
}
/* Nav links — tracked-out official labels */
.nlink {
    color: #aebccd;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 12.5px;
    font-weight: 600;
}
.nlink:hover {
    color: #ffffff;
}
.herobody {
    text-align: center;
    padding: 40px 0 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Hero eyebrow — a solid, glowing official badge */
.eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0a55ac;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 7px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 9px 17px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(9, 60, 130, 0.5);
}
.eyebrow-pill i {
    font-size: 16px;
    color: #d6e8ff;
}
.h1 {
    font-size: clamp(40px, 7vw, 62px);
    color: #fff;
    margin-top: 22px;
    letter-spacing: -0.03em;
}
.lede {
    color: #cdd8e6;
    font-size: clamp(16px, 2vw, 18px);
    max-width: 580px;
    margin-top: 18px;
}
.cta {
    display: flex;
    gap: 13px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

/* NZ strip — a bold official blue banner between the dark hero and white
   content: white bold labels, bright icons, crisp divided segments. */
.strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 0;
    justify-content: center;
    align-items: center;
    padding: 18px 40px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(180deg, #1b2331 0%, #0a58b4 100%);
    border-bottom: 3px solid #083f7d;
}
.strip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    padding: 2px 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.strip span:first-child {
    border-left: none;
}
.strip b {
    color: #ffffff;
    font-weight: 600;
}
.strip i {
    color: #b9dcff;
    font-size: 18px;
}

/* Stats + context — crisp lift + a slate header-bar (official info cards) */
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 760px;
}
.statcard {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--ink);
    border-radius: 8px;
    padding: 22px 14px;
    text-align: center;
    box-shadow:
        0 1px 0 var(--line),
        0 8px 20px rgba(20, 30, 52, 0.07);
}
.statnum {
    font-size: 30px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
}
/* The headline stat pops in red: the highest-stakes number on the page */
.statnum.hl {
    color: var(--accent);
}
.statlbl {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 6px;
    line-height: 1.4;
}
/* Context/notice callout — a bold blue left rule, official-document style */
.context {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--action);
    border-radius: 8px;
    padding: 22px 24px;
    margin-top: 16px;
    width: 100%;
    max-width: 760px;
    text-align: left;
    box-shadow:
        0 1px 0 var(--line),
        0 8px 20px rgba(20, 30, 52, 0.07);
}
.cico {
    width: 44px;
    height: 44px;
    border-radius: 7px;
    background: var(--aqua-soft);
    color: var(--aqua);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    flex: none;
}
.cico i {
    font-size: 23px;
}
.ctext {
    font-size: 15px;
    color: var(--text);
    line-height: 1.6;
}
.csrc {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 8px;
}

/* Icon chips (shared) */
.ico {
    width: 44px;
    height: 44px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}
.ico i {
    font-size: 22px;
}
.i-terra {
    background: var(--action-soft);
    color: var(--action);
}
.i-green {
    background: var(--green-soft);
    color: var(--green);
}
.i-amber {
    background: var(--aqua-soft);
    color: var(--aqua);
}
.i-blue {
    background: var(--blue-soft);
    color: var(--blue-ink);
}
.i-violet {
    background: var(--violet-soft);
    color: var(--violet-ink);
}
.tt {
    font-weight: 600;
    font-size: 16.5px;
    color: var(--ink);
}
.td {
    color: var(--muted);
    font-size: 14px;
    margin-top: 6px;
    line-height: 1.55;
}

/* Video */
.vidsec {
    background: var(--ink);
    padding: 64px 0;
    text-align: center;
}
.vidsec .eyebrow {
    color: var(--sky);
}
.vidsec .h2 {
    color: #fff;
}
.vid {
    width: 100%;
    margin: 28px auto 0;
    max-width: 760px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    background: #222b39;
    border: 1px solid rgba(60, 120, 200, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
}
.play {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    color: var(--action);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}
.play i {
    font-size: 30px;
}
.vcap {
    color: #b7cae1;
    font-size: 14px;
    margin-top: 16px;
}

/* How it works — strong, prominent numbered steps */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 36px;
    width: 100%;
}
.step {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--ink);
    border-radius: 8px;
    padding: 22px;
    position: relative;
    text-align: left;
    box-shadow:
        0 1px 0 var(--line),
        0 8px 20px rgba(20, 30, 52, 0.07);
}
.snum {
    position: absolute;
    top: 20px;
    right: 22px;
    font-size: 18px;
    font-weight: 800;
    color: var(--action);
}

/* Features — white, defined panels with a slate header-bar */
.feat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.feat + .feat {
    margin-top: 56px;
}
.feat.rev .fvis {
    order: -1;
}
.fk {
    font-size: 16px;
    font-weight: 600;
    color: var(--action);
}
.fh {
    font-size: clamp(20px, 2.6vw, 23px);
    margin-top: 10px;
}
.fl {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.fl li {
    display: flex;
    gap: 10px;
    font-size: 15px;
    color: var(--text);
}
.fl i {
    color: var(--green);
    font-size: 19px;
    flex: none;
    margin-top: 1px;
}
.fvis {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--ink);
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 8px 22px rgba(20, 30, 52, 0.08);
}
.mrow {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #fff;
    border: 1px solid #d6dde7;
    border-radius: 6px;
    padding: 11px 13px;
    box-shadow: 0 1px 2px rgba(30, 40, 60, 0.05);
}
.mrow + .mrow {
    margin-top: 10px;
}
.mchip {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: none;
}
.mname {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}
.mtag {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
}
.mfeedback {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55;
    padding: 12px 4px 2px;
}
.ring-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
}
/* Readiness ring mock-up (inline SVG presentation attrs) recoloured to the skin */
.ring-wrap svg circle[stroke="#ECE2D2"] {
    stroke: var(--line);
}
.ring-wrap svg circle[stroke="#D9512E"] {
    stroke: var(--action);
}
.ring-wrap svg text[fill="#2B1B0E"] {
    fill: var(--ink);
}
.ck {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    padding: 8px 2px;
    color: var(--text);
}
.ck i {
    font-size: 18px;
    flex: none;
}
.ck i[style*="d8c7ae"] {
    color: #b9c3d1 !important;
}
.ck + .ck {
    border-top: 1px solid var(--line);
}

/* Security */
.scards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 36px;
    width: 100%;
}
.scard2 {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--ink);
    border-radius: 8px;
    padding: 22px;
    text-align: left;
    box-shadow:
        0 1px 0 var(--line),
        0 8px 20px rgba(20, 30, 52, 0.07);
}

/* Pricing — top accent rules; the featured tile goes red to command the decision */
.prices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 36px;
    width: 100%;
    max-width: 760px;
}
.price {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 28px;
    text-align: left;
    position: relative;
    box-shadow:
        0 1px 0 var(--line),
        0 8px 20px rgba(20, 30, 52, 0.07);
}
.price.featured {
    border: 2px solid var(--accent);
}
.pbadge {
    position: absolute;
    top: -12px;
    left: 28px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 4px;
}
.pname {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.pcost {
    font-size: 38px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-top: 10px;
}
.pcost small {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
}
.pl {
    margin: 18px 0 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.pl li {
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: var(--text);
}
.pl i {
    color: var(--green);
    font-size: 18px;
    flex: none;
    margin-top: 1px;
}
.pnote {
    font-size: 14px;
    color: var(--muted);
    margin-top: 20px;
}

/* Testimonials */
.tcards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 36px;
    width: 100%;
    max-width: 880px;
}
.tcard {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--ink);
    border-radius: 8px;
    padding: 24px;
    text-align: left;
    box-shadow:
        0 1px 0 var(--line),
        0 8px 20px rgba(20, 30, 52, 0.07);
}
.tq i {
    color: var(--action);
    font-size: 24px;
}
.tq p {
    font-size: 15px;
    color: var(--text);
    margin-top: 10px;
    line-height: 1.55;
}
.twho {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}
.tav {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--action);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.tname {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}
.tcity {
    font-size: 12.5px;
    color: var(--muted);
}

/* FAQ — blue toggle markers */
.faq {
    margin-top: 32px;
    width: 100%;
    max-width: 720px;
    text-align: left;
}
.qa {
    padding: 20px 4px;
    border-top: 1px solid var(--line);
}
.qa:last-child {
    border-bottom: 1px solid var(--line);
}
.qa .q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.qa .q i {
    color: var(--action);
    font-size: 20px;
}
.qa .a {
    font-size: 14.5px;
    color: var(--muted);
    margin-top: 10px;
    line-height: 1.6;
}

/* Closing CTA — same deep navy + blue-glow gradient as the hero, with a red
   top keyline to bookend the masthead. */
.cta2 {
    padding: 80px 0;
    text-align: center;
    border-top: 4px solid var(--accent);
    background:
        radial-gradient(
            760px 440px at 50% -28%,
            rgba(23, 110, 220, 0.36),
            transparent 58%
        ),
        linear-gradient(158deg, #222b3b 0%, #0f141d 100%);
}
.cta2 .h2 {
    color: #fff;
    font-size: clamp(32px, 5vw, 42px);
}
.cta2 p {
    color: #cdd8e6;
    font-size: 16px;
    margin-top: 14px;
}
.cta2 .btn {
    margin-top: 26px;
}
.ctatrust {
    color: #90a0b3;
    font-size: 13px;
    margin-top: 18px;
}

/* Footer — structural blue top keyline + official uppercase column headers */
.foot {
    background: var(--ink2);
    border-top: 3px solid var(--action);
    padding: 52px 0 30px;
}
.footgrid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 28px;
}
.foot .brand {
    color: #fff;
}
.ftag {
    color: #9aabbe;
    font-size: 15px;
    margin-top: 14px;
    line-height: 1.55;
    max-width: 240px;
}
.fcol h4 {
    color: #c3ccd8;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fcol a {
    display: block;
    color: #9aabbe;
    font-size: 13.5px;
    margin-bottom: 9px;
}
.fcol a:hover {
    color: #ffffff;
}
.fbar {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    margin-top: 32px;
    padding-top: 20px;
}
.fcopy {
    color: #7f8fa2;
    font-size: 12.5px;
}

/* Legal pages (privacy policy, terms) — slim dark masthead + readable document
   body. Reuses the same tokens as the one-pager, with the hero's red keyline. */
.masthead {
    background: var(--ink);
    border-top: 4px solid var(--accent);
}
.masthead .brand {
    color: #fff;
}
.masthead .nav {
    padding: 18px 0;
}
.back-link {
    color: #aebccd;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.back-link:hover {
    color: #ffffff;
}

.legal {
    padding: 54px 0 78px;
}
.legal .wrap {
    max-width: 820px;
}
.legal .doc-title {
    font-size: clamp(28px, 4vw, 36px);
}
.legal .updated {
    color: var(--muted);
    font-size: 14px;
    margin-top: 10px;
}
.legal .draft-note {
    margin: 24px 0 8px;
    padding: 13px 16px;
    background: var(--aqua-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--action-ink);
    font-size: 14px;
}
.legal h2 {
    font-size: 21px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.legal p {
    margin-top: 14px;
}
.legal .lead {
    font-weight: 600;
    color: var(--ink);
    margin-top: 20px;
}
.legal ul {
    list-style: disc;
    padding-left: 22px;
    margin-top: 12px;
}
.legal li {
    margin-top: 7px;
}
.legal a.inline {
    color: var(--blue-ink);
    text-decoration: underline;
}
/* Highlights an unresolved placeholder the lawyer/owner must fill in. */
.legal .ph {
    background: var(--action-soft);
    color: var(--action-ink);
    border-radius: 4px;
    padding: 0 5px;
    font-size: 0.95em;
}

/* Responsive */
@media (max-width: 860px) {
    .footgrid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .scards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 680px) {
    .wrap {
        padding: 0 22px;
    }
    .sec {
        padding: 52px 0;
    }
    .navr {
        gap: 12px;
    }
    .nlink {
        display: none;
    }
    /* Scale the Lady Justice watermark down so it doesn't swamp a phone hero. */
    .hero::before {
        width: 380px;
        height: 300px;
        left: -80px;
    }
    .feat,
    .prices,
    .tcards {
        grid-template-columns: 1fr;
    }
    .feat.rev .fvis {
        order: 0;
    }
    .prices,
    .tcards {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 460px) {
    .stats,
    .steps,
    .scards {
        grid-template-columns: 1fr;
    }
    .cta .btn {
        width: 100%;
        justify-content: center;
    }
}