/* =============================================================
   Clear Books — Marketing site
   Design tokens, layout, components, animations
   ============================================================= */

:root {
    /* Brand */
    --c-blue: #268CC0;
    --c-blue-deep: #1A6FA0;
    --c-blue-darker: #0F3D5C;
    --c-red: #D92A2D;
    --c-red-deep: #B41E20;
    --c-yellow: #F3B21D;
    --c-yellow-deep: #D89A0A;

    /* Neutrals */
    --c-ink: #0F1B2D;
    --c-ink-soft: #2A3848;
    --c-muted: #5C6B7A;
    --c-line: #E5EAF0;
    --c-line-soft: #F0F3F7;
    --c-bg: #FFFFFF;
    --c-bg-tint: #F7FAFC;
    --c-bg-cream: #FFF9EE;
    --c-bg-sky: #EAF4FB;

    /* Type */
    --ff-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --ff-display: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

    /* Spacing scale */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --s-10: 8rem;

    /* Radii / shadow */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(15, 27, 45, .06), 0 1px 3px rgba(15, 27, 45, .06);
    --shadow-md: 0 4px 12px rgba(15, 27, 45, .06), 0 12px 28px rgba(15, 27, 45, .08);
    --shadow-lg: 0 12px 24px rgba(15, 27, 45, .08), 0 30px 60px rgba(15, 27, 45, .12);
    --shadow-blue: 0 18px 40px rgba(38, 140, 192, .25);

    /* Layout */
    --container: 1200px;
    --container-narrow: 920px;

    /* Motion */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
    /* Always reserve the vertical scrollbar's space so the centred layout (and the
       sticky nav) can't shift sideways when the scrollbar appears after load. */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    font-family: var(--ff-sans);
    font-size: 17px;
    line-height: 1.6;
    color: var(--c-ink);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--c-blue-deep);
    text-decoration: none;
    transition: color .2s var(--ease);
}

a:hover {
    color: var(--c-red);
}

button {
    font: inherit;
}

[hidden] {
    display: none !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--c-ink);
    margin: 0 0 var(--s-4);
}

h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
}

h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

p {
    margin: 0 0 var(--s-4);
}

ul {
    padding-left: 1.2em;
}

/* ---------- Layout ---------- */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--s-5);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding: var(--s-9) 0;
}

.section--sm {
    padding: var(--s-7) 0;
}

.section--lg {
    padding: var(--s-10) 0;
}

.section--tint {
    background: var(--c-bg-tint);
}

.section--cream {
    background: var(--c-bg-cream);
}

.section--sky {
    background: var(--c-bg-sky);
}

.section--ink {
    background: var(--c-ink);
    color: #d3dce6;
}

.section--ink h1, .section--ink h2, .section--ink h3 {
    color: #fff;
}

.eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-blue-deep);
    margin-bottom: var(--s-3);
}

.eyebrow--red {
    color: var(--c-red);
}

.eyebrow--yellow {
    color: var(--c-yellow-deep);
}

.lead {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: var(--c-muted);
    max-width: 60ch;
}

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

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.grid {
    display: grid;
    gap: var(--s-6);
}

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

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .grid-3, .grid-4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.85em 1.4em;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
    text-align: center;
    max-width: 100%;
}

.btn--primary {
    background: var(--c-blue);
    color: #fff;
}

.btn--primary:hover {
    background: var(--c-blue-deep);
    color: #fff;
}

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

.btn--navy {
    background: #0F3D5C;
    color: #fff;
}

.btn--navy:hover {
    background: #0A2A40;
    color: #fff;
}

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

.btn--ghost {
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-line);
}

.btn--ghost:hover {
    border-color: var(--c-ink);
    color: var(--c-ink);
}

.btn--ghost-light {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .25);
}

.btn--ghost-light:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.btn--lg {
    font-size: 1.1rem;
    padding: 1em 1.7em;
}

.btn--sm {
    font-size: 0.9rem;
    padding: 0.6em 1em;
}

.btn .arrow {
    transition: transform .25s var(--ease);
}

.btn:hover .arrow {
    transform: translateX(4px);
}

/* ---------- Header / Nav ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--c-line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding-top: var(--s-3);
    padding-bottom: var(--s-3);
}

.site-header__logo img {
    height: 34px;
    width: auto;
}

.nav {
    display: flex;
    gap: var(--s-2);
    align-items: center;
}

.nav a {
    color: var(--c-ink-soft);
    font-weight: 600;
    font-size: 0.97rem;
    padding: 0.5em 0.85em;
    border-radius: var(--r-md);
    position: relative;
}

.nav a:hover {
    background: var(--c-line-soft);
    color: var(--c-ink);
}

.nav a.is-active {
    color: var(--c-blue-deep);
}

.nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0.85em;
    right: 0.85em;
    bottom: 0.2em;
    height: 2px;
    background: var(--c-blue-deep);
    border-radius: 2px;
}

.site-header__cta {
    display: flex;
    gap: var(--s-3);
    align-items: center;
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--c-line);
    border-radius: 10px;
    padding: 0.45em 0.6em;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--c-ink);
    margin: 4px 0;
    transition: transform .25s var(--ease), opacity .25s var(--ease);
}

.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 980px) {
    .nav-toggle {
        display: block;
        order: 3;
    }

    .site-header__inner {
        flex-wrap: wrap;
    }

    .nav, .site-header__cta {
        display: none;
        flex-basis: 100%;
        width: 100%;
        order: 4;
    }

    .site-header.is-open .nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--s-3) 0 var(--s-2);
        border-top: 1px solid var(--c-line-soft);
        margin-top: var(--s-3);
    }

    .site-header.is-open .nav a {
        padding: 0.85em 1em;
        border-radius: 8px;
    }

    .site-header.is-open .nav a.is-active::after {
        display: none;
    }

    .site-header.is-open .site-header__cta {
        display: flex;
        flex-direction: column;
        gap: var(--s-2);
        padding: 0 0 var(--s-3);
    }

    .site-header.is-open .site-header__cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 8vw, 5rem);
    overflow: hidden;
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-areas:
        "intro media"
        "body  media";
    column-gap: var(--s-8);
    align-items: center;
}

/* The intro (eyebrow + h1) and body (lead + CTAs) share the left column and
   hug the shared row edge so they read as one centred block next to the media. */
.hero__intro {
    grid-area: intro;
    align-self: end;
}

.hero__body {
    grid-area: body;
    align-self: start;
}

.hero__media {
    grid-area: media;
}

@media (max-width: 900px) {
    /* Narrow screens: the media slots between the h1 and the lead. */
    .hero__inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "intro"
            "media"
            "body";
        row-gap: var(--s-5);
    }

    .hero__intro,
    .hero__body {
        align-self: auto;
    }
}

.hero h1 .accent {
    color: inherit;
}

.hero__tagline {
    margin: var(--s-3) 0 0;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 600;
    color: var(--c-muted);
}

.hero h1 .underline {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

/* On small screens the nowrap phrase would overflow, so let the hero
   heading scale down with the viewport (hands off to 2.4rem at 480px). */
@media (max-width: 480px) {
    .hero h1 {
        font-size: clamp(1.5rem, 8vw, 2.4rem);
    }
}

.hero h1 .underline::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: 0.06em;
    height: 0.32em;
    background: var(--c-yellow);
    z-index: -1;
    border-radius: 4px;
    animation: sweep 1.1s var(--ease-out) .3s both;
    transform-origin: left;
}

@keyframes sweep {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 90% 10%, rgba(38, 140, 192, .10), transparent 40%),
    radial-gradient(circle at 0% 80%, rgba(243, 178, 29, .10), transparent 40%);
}

.hero__bg-shapes {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.hero__bg-shapes .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .35;
}

.hero__bg-shapes .blob--1 {
    width: 360px;
    height: 360px;
    background: var(--c-blue);
    top: -80px;
    right: -120px;
    animation: float 14s ease-in-out infinite;
}

.hero__bg-shapes .blob--2 {
    width: 280px;
    height: 280px;
    background: var(--c-yellow);
    bottom: -100px;
    left: -80px;
    animation: float 18s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-30px) translateX(20px);
    }
}

/* ---------- Journey selector ---------- */
.journeys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
}

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

@media (max-width: 720px) {
    .journeys {
        grid-template-columns: 1fr;
    }
}

.journey-card {
    position: relative;
    display: block;
    padding: var(--s-6);
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: var(--c-ink);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
    overflow: hidden;
}

.journey-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--c-blue) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .35s var(--ease);
    z-index: 0;
}

.journey-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.journey-card > * {
    position: relative;
    z-index: 1;
}

.journey-card .icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: var(--s-4);
    font-size: 26px;
    background: var(--c-bg-sky);
    color: var(--c-blue-deep);
    transition: transform .35s var(--ease);
}

.journey-card:hover .icon {
    transform: scale(1.08) rotate(-4deg);
}

.journey-card[data-color="red"] .icon {
    background: #FCEBEC;
    color: var(--c-red);
}

.journey-card[data-color="yellow"] .icon {
    background: #FEF4DC;
    color: var(--c-yellow-deep);
}

.journey-card h3 {
    margin-bottom: var(--s-2);
    font-size: 1.25rem;
}

.journey-card p {
    color: var(--c-muted);
    margin-bottom: var(--s-4);
    font-size: 0.97rem;
}

.journey-card .journey-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 700;
    color: var(--c-blue-deep);
}

.journey-card[data-color="red"] .journey-link {
    color: var(--c-red);
}

.journey-card[data-color="yellow"] .journey-link {
    color: var(--c-yellow-deep);
}

.journey-card .journey-link .arrow {
    transition: transform .25s var(--ease);
}

.journey-card:hover .journey-link .arrow {
    transform: translateX(4px);
}

/* ---------- Feature blocks ---------- */
.feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
    align-items: center;
}

.feature--reverse > .feature__media {
    order: 2;
}

@media (max-width: 900px) {
    .feature, .feature--reverse {
        grid-template-columns: 1fr;
    }

    .feature--reverse > .feature__media {
        order: 0;
    }
}

.feature__media {
    position: relative;
}

/* Hero variant — centred product shot beneath page-hero copy */
.feature__media--hero {
    max-width: 880px;
    margin-inline: auto;
}

.feature__media--hero img {
    width: 100%;
}

/* Narrow variant — for portrait phone mockups that shouldn't span the full hero */
.feature__media--narrow {
    max-width: 360px;
}

/* Badge variant — for square recognition marks/logos that shouldn't dominate
   the column. Scaled down and centred within the media container. */
.feature__media--badge img {
    width: 60%;
    margin-inline: auto;
}

/* Phone variant — portrait mockups capped by height, not width, so tall/narrow
   shots stay a sensible size in a feature column. Container shrink-wraps the
   image so the floating badges still hug the phone edges. */
.feature__media--phone {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.feature__media--phone img {
    width: auto;
    max-height: 480px;
}

.feature__media .badge-float {
    position: absolute;
    background: #fff;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    font-weight: 700;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    animation: bob 4s ease-in-out infinite;
}

.feature__media .badge-float--tl {
    top: 18px;
    left: -16px;
}

.feature__media .badge-float--br {
    bottom: 18px;
    right: -16px;
    animation-delay: 1.2s;
}

/* Floating badges overflow the narrow layout on phones, so hide them */
@media (max-width: 640px) {
    .feature__media .badge-float {
        display: none;
    }
}

.badge-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-yellow);
}

.badge-dot--green {
    background: #2EAB5C;
}

.badge-dot--blue {
    background: var(--c-blue);
}

@keyframes bob {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.feature__list {
    list-style: none;
    padding: 0;
    margin: var(--s-5) 0 var(--s-6);
}

.feature__list li {
    position: relative;
    padding: 0.5em 0 0.5em calc(26px + var(--s-3));
    font-weight: 500;
}

.feature__list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #E6F4ED;
    color: #1F8B4F;
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1;
}

.feature__list--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--s-5);
}

@media (max-width: 540px) {
    .feature__list--two-col {
        grid-template-columns: 1fr;
    }
}

/* Inline highlight used inside feature copy (e.g. "Auto bills" note) */
.feature-note {
    margin: var(--s-5) 0 var(--s-6);
    padding: var(--s-4) var(--s-5);
    background: #fff;
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--c-yellow);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    color: var(--c-ink);
}

.feature-note .eyebrow {
    margin-bottom: var(--s-2);
    color: var(--c-yellow-deep);
}

.feature-note p {
    margin: 0;
    color: var(--c-ink-soft);
    font-size: 0.97rem;
}

/* Subtle helper text under a feature list */
.muted {
    color: var(--c-muted);
    font-size: 0.95rem;
}

/* Milestones — vertical timeline used in story sections */
.milestones {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--s-5);
    padding-left: var(--s-6);
    border-left: 2px solid var(--c-blue);
}

.milestone {
    position: relative;
}

.milestone::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--s-6) - 8px);
    top: 0.45em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--c-blue);
}

/* Completed milestone — filled marker with a tick */
.milestone--done::before {
    background: var(--c-blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>") center/9px no-repeat;
    border-color: var(--c-blue);
}

.milestone__year {
    display: block;
    font-weight: 800;
    color: var(--c-blue-deep);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    margin-bottom: var(--s-1);
}

.milestone__text {
    margin: 0;
    color: var(--c-ink-soft);
}

/* Fact stack — vertical list of accent-bar fact cards */
.fact-stack {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--s-3);
}

.fact-stack__item {
    background: #fff;
    border: 1px solid var(--c-line);
    border-left: 4px solid var(--c-blue);
    border-radius: var(--r-md);
    padding: var(--s-4) var(--s-5);
}

.fact-stack__item--blue {
    border-left-color: var(--c-blue);
}

.fact-stack__item--yellow {
    border-left-color: var(--c-yellow);
}

.fact-stack__item--red {
    border-left-color: var(--c-red);
}

.fact-stack__big {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--c-ink);
    margin-bottom: var(--s-1);
    letter-spacing: -0.01em;
}

.fact-stack__small {
    display: block;
    color: var(--c-muted);
    font-size: 0.95rem;
}

/* ---------- Stat cards ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
}

.stats--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 720px) {
    .stats,
    .stats--3 {
        grid-template-columns: 1fr 1fr;
    }
}

.stat {
    position: relative;
    text-align: center;
    padding: var(--s-5) var(--s-4);
    border-right: 1px solid var(--c-line);
}

.stat:last-child {
    border-right: 0;
}

@media (max-width: 720px) {
    .stat {
        border-right: 0;
        border-bottom: 1px solid var(--c-line);
        padding: var(--s-4);
    }
}

.stat__num {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, var(--c-blue-deep), var(--c-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat__label {
    color: var(--c-muted);
    font-weight: 500;
}

/* Primary stat tile — used to highlight the next upcoming deadline */
.stat--primary {
    position: relative;
    border-right: 0;
    background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-deep) 100%);
    border-radius: var(--r-lg);
    box-shadow: 0 10px 24px rgba(217, 42, 45, .14);
    transform: translateY(-6px);
    padding-top: var(--s-5);
}

.stat--primary + .stat {
    border-left: 0;
}

/* Yellow accent variant — same standout tile, yellow instead of red */
.stat--primary-yellow {
    background: linear-gradient(135deg, var(--c-yellow) 0%, var(--c-yellow-deep) 100%);
    box-shadow: 0 10px 24px rgba(243, 178, 29, .22);
}

.stat--primary-yellow .stat__num {
    color: var(--c-ink);
}

.stat--primary-yellow .stat__label {
    color: var(--c-ink-soft);
}

.stat--primary-yellow .stat__tag {
    color: var(--c-yellow-deep);
}

.stat--primary .stat__num {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #fff;
}

.stat--primary .stat__label {
    color: rgba(255, 255, 255, .92);
    font-weight: 600;
}

/* Positioned absolutely so the badge does not push the num/label down and
   misalign the primary tile from its neighbours. */
.stat__tag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    background: rgba(255, 255, 255, .92);
    color: var(--c-red-deep);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3em 0.75em;
    border-radius: var(--r-pill);
}

@media (max-width: 720px) {
    .stat--primary {
        transform: none;
        border-bottom: 0;
    }
}

/* ---------- Testimonial ---------- */
.testimonial {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s-7);
    align-items: center;
    background: var(--c-ink);
    color: #d3dce6;
    border-radius: var(--r-xl);
    padding: var(--s-7);
    position: relative;
    overflow: hidden;
}

.testimonial::before {
    content: "“";
    position: absolute;
    top: -40px;
    left: 30px;
    font-size: 280px;
    color: rgba(38, 140, 192, .15);
    font-family: Georgia, serif;
    line-height: 1;
    pointer-events: none;
}

@media (max-width: 800px) {
    .testimonial {
        grid-template-columns: 1fr;
        padding: var(--s-6);
    }
}

.testimonial__quote {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

.testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-5);
    position: relative;
    z-index: 1;
}

.testimonial__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-blue), var(--c-yellow));
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #fff;
}

.testimonial__name {
    color: #fff;
    font-weight: 700;
}

.testimonial__role {
    color: #93a3b6;
    font-size: 0.9rem;
}

.testimonial__rating {
    display: flex;
    gap: 4px;
    margin-top: var(--s-3);
}

.testimonial__rating .star {
    color: var(--c-yellow);
}

.testimonial__link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--r-lg);
    transition: opacity .2s ease;
}

.testimonial__link:hover,
.testimonial__link:focus-visible {
    opacity: 0.92;
    text-decoration: none;
}

.testimonial__link:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 6px;
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
}

@media (max-width: 900px) {
    .review-grid {
        grid-template-columns: 1fr;
    }
}

.review {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.review:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.review__rating {
    display: flex;
    gap: 3px;
    margin-bottom: var(--s-3);
}

.review__rating .star {
    color: var(--c-yellow);
    font-size: 1.05rem;
}

.review__quote {
    font-weight: 500;
    color: var(--c-ink);
}

.review__author {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-line);
}

.review__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--c-bg-sky);
    color: var(--c-blue-deep);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .9rem;
}

.review__name {
    font-weight: 700;
    font-size: .95rem;
}

.review__role {
    color: var(--c-muted);
    font-size: .85rem;
}

/* ---------- Pricing ---------- */
.pricing {
    padding-top: 0;
}

.pricing-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-5);
    margin: var(--s-6) 0 var(--s-3);
}

.segmented {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    background: var(--c-bg-sky);
    border: 1px solid rgba(38, 140, 192, .18);
    border-radius: var(--r-pill);
    padding: 6px;
    gap: 4px;
}

.segmented--billing {
    background: #FFF6E0;
    border-color: rgba(243, 178, 29, .25);
}

.segmented__btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0.75em 1.5em;
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    color: var(--c-blue-deep);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
}

.segmented--billing .segmented__btn {
    color: var(--c-yellow-deep);
}

.segmented__btn:hover {
    background: rgba(255, 255, 255, .55);
    color: var(--c-blue-darker);
}

.segmented--billing .segmented__btn:hover {
    color: #8a5f00;
}

.segmented__btn.is-active {
    background: var(--c-blue);
    color: #fff;
}

.segmented--billing .segmented__btn.is-active {
    background: var(--c-yellow-deep);
    color: #fff;
}

.segmented__btn.is-active .save-pill {
    background: #fff;
    color: var(--c-ink);
}

.segmented__btn:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .segmented {
        /* Instead of letting the buttons wrap into a rounded blob, stack them
           full-width; an r-xl rounded rectangle frames the vertical list. */
        display: flex;
        flex-direction: column;
        width: 100%;
        border-radius: var(--r-xl);
    }

    .segmented__btn {
        width: 100%;
        justify-content: center;
        padding: 0.65em 1.1em;
        font-size: .95rem;
    }
}

.bill-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    cursor: pointer;
    margin: var(--s-5) 0;
    user-select: none;
}

.bill-toggle__label {
    font-size: .95rem;
    font-weight: 600;
    color: var(--c-muted);
    transition: color .2s var(--ease);
}

.bill-toggle__label.is-active {
    color: var(--c-ink);
}

.bill-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--c-line);
    border-radius: var(--r-pill);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .25s var(--ease);
}

.bill-toggle input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease);
}

.bill-toggle input[type="checkbox"]:checked {
    background: var(--c-blue);
}

.bill-toggle input[type="checkbox"]:checked::before {
    transform: translateX(20px);
}

.bill-toggle input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
}

.save-pill {
    display: inline-block;
    background: var(--c-yellow);
    color: var(--c-ink);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    padding: .15em .45em;
    border-radius: var(--r-pill);
    vertical-align: middle;
    margin-left: var(--s-1);
}

.price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    align-items: stretch;
    margin-top: var(--s-7);
}

.price-grid--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* Plan card + instant quote: give the quote a little more room */
.price-grid--quote {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
}

@media (max-width: 900px) {
    .price-grid,
    .price-grid--two,
    .price-grid--quote {
        grid-template-columns: 1fr;
    }
}

.pricing-note {
    color: var(--c-muted);
}

.price-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-xl);
    padding: calc(var(--s-6) + 12px) var(--s-6) var(--s-6);
    display: flex;
    flex-direction: column;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
    border-top-width: 10px;
}

.price-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.price-card.is-featured {
    border-color: var(--c-blue-deep);
    box-shadow: 0 24px 60px rgba(38, 140, 192, .18);
    transform: scale(1.02);
}

.price-card.is-featured:hover {
    transform: translateY(-6px) scale(1.02);
}

.price-card .badge-popular {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-red);
    color: #fff;
    padding: 0.4em 1em;
    border-radius: var(--r-pill);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(217, 42, 45, .3);
}

.price-card__name {
    font-size: 1.4rem;
    font-weight: 800;
}

.price-card__for {
    color: var(--c-muted);
    font-size: .95rem;
    margin-bottom: var(--s-4);
}

.price-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.25em;
    margin-bottom: var(--s-2);
}

.price-card__amount {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.price-card__period {
    color: var(--c-muted);
    font-weight: 600;
}

.price-card__sub {
    color: var(--c-muted);
    font-size: .9rem;
    margin-bottom: var(--s-4);
}

.support-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 0.45em 0.85em;
    border-radius: var(--r-pill);
    margin-bottom: var(--s-5);
    align-self: flex-start;
    border: 1px solid transparent;
}

.support-tag::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.support-tag--self {
    background: var(--c-line-soft);
    color: var(--c-muted);
    border-color: var(--c-line);
}

.support-tag--full {
    background: var(--c-bg-sky);
    color: var(--c-blue-deep);
    border-color: rgba(38, 140, 192, .2);
}

.price-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-6);
    flex: 1;
}

.price-card li {
    display: flex;
    gap: var(--s-3);
    padding: 0.45em 0;
    font-size: .95rem;
    color: var(--c-ink-soft);
}

.price-card li::before {
    content: "\2713";
    color: var(--c-blue);
    font-weight: 800;
    flex: 0 0 auto;
}

.price-card li.is-cross {
    color: var(--c-muted);
}

.price-card li.is-cross::before {
    content: "✕";
    color: var(--c-muted);
}

.price-card .btn {
    width: 100%;
}


[data-filter-panel="sole-trader"] .price-card {
    border-top-color: var(--c-blue);
}

[data-filter-panel="landlord"] .price-card {
    border-top-color: var(--c-yellow);
}

[data-filter-panel="all-org"] .price-card {
    border-top-color: var(--c-red);
}

.reassurance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3) 0;
    margin-bottom: var(--s-6);
    color: var(--c-muted);
    font-weight: 500;
}

.reassurance span {
    display: inline-flex;
    align-items: center;
}

/* A crisp, vertically-centred dot used as a separator between items */
.reassurance span::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--c-blue);
    flex: none;
    margin: 0 var(--s-4);
}

.reassurance span:first-child::before {
    display: none;
}

/* Inline variant: prefer a single row, but wrap between items before overflowing.
   Each phrase stays intact so items never break mid-word or spill past the viewport. */
.reassurance--inline {
    flex-wrap: wrap;
}

.reassurance--inline span {
    white-space: nowrap;
}

/* On mobile, stack the reassurance items into a single centred column and swap the
   horizontal dot separators for a leading tick, so the list still feels considered
   rather than reading as plain stacked text */
@media (max-width: 640px) {
    .reassurance {
        flex-direction: column;
        align-items: center;
        gap: var(--s-2) 0;
    }

    /* Let long phrases wrap when they own their line, so nothing overflows */
    .reassurance--inline span {
        white-space: normal;
    }

    .reassurance span::before,
    .reassurance span:first-child::before {
        display: inline-flex;
        content: "\2713";
        width: auto;
        height: auto;
        border-radius: 0;
        background: none;
        color: var(--c-blue);
        font-weight: 800;
        margin: 0 var(--s-2) 0 0;
    }
}

/* Tour page: in-page section navigation */
.tour-nav-section {
    padding-top: 0;
}

.tour-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2) var(--s-2);
    padding: var(--s-3);
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
}

.tour-nav a {
    display: inline-flex;
    align-items: center;
    padding: 0.7em 1.4em;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--c-ink);
    background: var(--c-bg-tint);
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}

.tour-nav a:hover {
    background: var(--c-blue-deep);
    color: #fff;
    transform: translateY(-2px);
}

.tour-nav a.is-active {
    background: var(--c-blue-deep);
    color: #fff;
}

.tour-nav a.is-active:hover {
    transform: none;
}

@media (max-width: 640px) {
    .tour-nav {
        padding: var(--s-2);
        border-radius: var(--r-lg);
    }

    .tour-nav a {
        padding: 0.55em 1em;
        font-size: 0.98rem;
    }
}

/* Hero trust line: HMRC/Trustpilot logos inline with reassurance text */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-4);
    margin-top: var(--s-4);
    color: var(--c-muted);
    font-weight: 500;
    font-size: 0.95rem;
}

.hero-trust__text {
    display: inline-flex;
    align-items: center;
}

.hero-trust__logos {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}

.hero-trust__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.4em 0.85em;
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--c-ink-soft);
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

a.hero-trust__logo:hover,
a.hero-trust__logo:focus-visible {
    border-color: var(--c-blue);
    box-shadow: var(--shadow-sm);
}

.hero-trust__logo .star {
    color: #00b67a;
    letter-spacing: 0.05em;
}

.hero-trust__logo--hmrc {
    color: var(--c-blue);
}

/* Horizontal scroll wrapper for any wide table */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-lg);
}

.table-scroll > table {
    min-width: 520px;
}

/* Edge fades that signal a wide table can be scrolled horizontally. The
   can-scroll-left / can-scroll-right classes are toggled by the table-fade
   module in main.js as the scroller moves, so a fade only shows on the side
   that has more content. */
.table-fade {
    position: relative;
}

.table-fade::before,
.table-fade::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s var(--ease);
    z-index: 2;
}

.table-fade::before {
    left: 0;
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    background: linear-gradient(to right, rgba(15, 27, 45, .16), rgba(15, 27, 45, 0));
}

.table-fade::after {
    right: 0;
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    background: linear-gradient(to left, rgba(15, 27, 45, .16), rgba(15, 27, 45, 0));
}

.table-fade.can-scroll-left::before {
    opacity: 1;
}

.table-fade.can-scroll-right::after {
    opacity: 1;
}

/* Hint that a wide table can be scrolled sideways — only shown on viewports
   narrow enough for the comparison tables (min-width 680px) to overflow. */
.scroll-hint {
    display: none;
}

@media (max-width: 720px) {
    .scroll-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--s-2);
        margin: 0 0 var(--s-4);
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--c-muted);
    }

    .scroll-hint__arrow {
        animation: nudge-x 1.4s var(--ease) infinite;
    }
}

@keyframes nudge-x {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

/* Comparison table */
.compare {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.compare th, .compare td {
    padding: var(--s-4);
    text-align: center;
    border-bottom: 1px solid var(--c-line);
}

.compare th:first-child, .compare td:first-child {
    text-align: left;
    font-weight: 600;
}

.compare thead th {
    background: var(--c-bg-tint);
    font-size: 1rem;
    font-weight: 800;
}

.compare thead th.is-featured {
    background: var(--c-blue-deep);
    color: #fff;
}

.compare tbody tr:last-child td {
    border-bottom: 0;
}

.compare .yes {
    color: #1F8B4F;
    font-weight: 800;
}

.compare .no {
    color: #BFC8D2;
}

.compare .highlight {
    background: rgba(38, 140, 192, .05);
}

/* ---------- Add-ons ---------- */
.addon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    margin-top: var(--s-6);
}

@media (max-width: 900px) {
    .addon-grid {
        grid-template-columns: 1fr;
    }
}

.addon-card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.addon-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.addon-card__name {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--c-ink);
}

.addon-card p {
    color: var(--c-ink-soft);
    margin: 0;
    font-size: .95rem;
    flex: 1;
}

.addon-card__meta {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-blue-deep);
    background: var(--c-bg-sky);
    padding: 0.3em 0.7em;
    border-radius: var(--r-pill);
    align-self: flex-start;
}

/* ---------- Video placeholder ---------- */
.video-placeholder {
    position: relative;
    padding-top: 56%;
    background: linear-gradient(135deg, var(--c-blue-deep), var(--c-blue-darker));
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.video-placeholder__inner {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    text-align: center;
}

.video-placeholder__play {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: grid;
    place-items: center;
    margin: 0 auto var(--s-3);
    cursor: pointer;
    transition: transform .3s var(--ease);
}

.video-placeholder__play:hover {
    transform: scale(1.08);
}

.video-placeholder__play span {
    font-size: 30px;
    margin-left: 6px;
}

.video-placeholder__title {
    font-weight: 700;
}

.video-placeholder__meta {
    opacity: .7;
    font-size: .9rem;
    margin-top: 4px;
}

/* ---------- FAQ ---------- */
.faq {
    border-top: 1px solid var(--c-line);
}

.faq-item {
    border-bottom: 1px solid var(--c-line);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--s-5) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    font-weight: 700;
    font-size: 1.05rem;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    font-size: 1.6rem;
    color: var(--c-blue-deep);
    transition: transform .3s var(--ease);
    font-weight: 400;
    line-height: 1;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item__body {
    padding: 0 0 var(--s-5);
    color: var(--c-muted);
    max-width: 70ch;
}

/* ---------- Banner / callout ---------- */
.callout {
    background: linear-gradient(135deg, var(--c-blue-deep), var(--c-blue));
    color: #fff;
    padding: var(--s-7);
    border-radius: var(--r-xl);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-5);
    align-items: center;
    position: relative;
    overflow: hidden;
}

.callout::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 90% 50%, rgba(243, 178, 29, .25), transparent 40%);
}

.callout > * {
    position: relative;
}

.callout h2, .callout h3 {
    color: #fff;
    margin-bottom: var(--s-2);
}

.callout p {
    margin: 0;
    opacity: .9;
}

.callout .eyebrow {
    color: var(--c-yellow);
}

@media (max-width: 720px) {
    .callout {
        grid-template-columns: 1fr;
    }
}

/* About: "what we build" feature strip */
.build-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
}

.build-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.85em 1.5em;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    color: var(--c-ink);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.build-strip__item:hover {
    border-color: var(--c-blue);
    color: var(--c-blue);
    transform: translateY(-2px);
}

.banner-section {
    padding: var(--s-4) 0;
}

.banner-section[hidden] {
    display: none;
}

.banner {
    background: linear-gradient(90deg, var(--c-yellow) 0%, #FFD66B 100%);
    color: var(--c-ink);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.banner__main {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex: 1 1 auto;
    min-width: 0;
}

.banner__actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex: 0 0 auto;
}

.banner__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(15, 27, 45, .1);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--c-ink);
}

.banner__icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.75;
}

.banner__close {
    background: transparent;
    border: 0;
    padding: var(--s-2);
    margin: 0;
    color: var(--c-ink);
    cursor: pointer;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: background .2s var(--ease);
}

.banner__close:hover {
    background: rgba(15, 27, 45, .12);
}

.banner__close svg {
    width: 18px;
    height: 18px;
}

/* ---------- Cards (generic) ---------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
}

@media (max-width: 900px) {
    .card-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
}

/* Two-column variant — clean 2×2 grid for even card sets (e.g. four filing routes) */
.card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {
    .card-grid--2 {
        grid-template-columns: 1fr;
    }
}

/* Equal-height variant — keeps every card matched at all breakpoints */
.card-grid--equal {
    grid-auto-rows: 1fr;
}

.card-grid--equal .card {
    min-height: 240px;
}

@media (max-width: 640px) {
    .card-grid--equal .card {
        min-height: 200px;
    }
}

.card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.card .icon-tile {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: var(--s-4);
    background: var(--c-bg-sky);
    color: var(--c-blue-deep);
    transition: transform .35s var(--ease), background .25s var(--ease);
}

.card .icon-tile svg {
    width: 26px;
    height: 26px;
    display: block;
    stroke-width: 1.75;
}

.card:hover .icon-tile {
    transform: translateY(-2px) rotate(-4deg);
}

.card[data-tone="red"] .icon-tile {
    background: #FCEBEC;
    color: var(--c-red);
}

.card[data-tone="yellow"] .icon-tile {
    background: #FEF4DC;
    color: var(--c-yellow-deep);
}

.card[data-tone="green"] .icon-tile {
    background: #E6F4ED;
    color: #1F8B4F;
}

.card h3 {
    font-size: 1.2rem;
    margin-bottom: var(--s-2);
}

.card p {
    color: var(--c-muted);
    font-size: 0.97rem;
    margin: 0;
}

.card--link {
    text-decoration: none;
    color: inherit;
}

.card__cta {
    margin-top: auto;
    padding-top: var(--s-4);
    font-weight: 700;
    color: var(--c-blue-deep);
    font-size: 0.97rem;
}

.card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--c-muted);
    font-size: 0.97rem;
}

.card__list li {
    position: relative;
    padding: 0.35em 0 0.35em calc(20px + var(--s-2));
}

.card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #E6F4ED url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F8B4F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>") center/10px no-repeat;
}

.card__list li.is-cross {
    color: var(--c-muted);
}

.card__list li.is-cross::before {
    background: #FCEBEC url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D92A2D' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><line x1='6' y1='6' x2='18' y2='18'/><line x1='18' y1='6' x2='6' y2='18'/></svg>") center/10px no-repeat;
}

/* ---------- CTA section ---------- */
.cta-final {
    background: linear-gradient(135deg, var(--c-ink) 0%, #14264a 100%);
    color: #fff;
    border-radius: var(--r-xl);
    padding: var(--s-9) var(--s-7);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-final::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(38, 140, 192, .3), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(243, 178, 29, .2), transparent 40%);
}

.cta-final > * {
    position: relative;
}

.cta-final h2 {
    color: #fff;
}

.cta-final p {
    color: #c5cfdb;
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
}

.cta-final .eyebrow {
    color: var(--c-yellow);
}

.cta-final .btn-row {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--s-5);
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--c-ink);
    color: #93a3b6;
    padding: var(--s-9) 0 var(--s-5);
}

.site-footer h4 {
    color: #fff;
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: var(--s-4);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--s-7);
    margin-bottom: var(--s-7);
}

@media (max-width: 800px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 540px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
    }
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer li {
    margin: 0.4em 0;
}

.site-footer a {
    color: #c5cfdb;
}

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

.site-footer__brand img {
    filter: brightness(0) invert(1);
    height: 30px;
    margin-bottom: var(--s-4);
}

.site-footer__brand p {
    font-size: .92rem;
    color: #93a3b6;
    max-width: 32ch;
}

.site-footer__bottom {
    border-top: 1px solid #1f2d44;
    padding-top: var(--s-5);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-3);
    font-size: .85rem;
}

/* ---------- Logo strip / trust ---------- */
.trust-bar {
    text-align: center;
    padding: var(--s-6) 0;
}

.trust-bar__label {
    color: var(--c-muted);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .82rem;
    margin-bottom: var(--s-4);
}

.trust-bar__row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-7);
    align-items: center;
    opacity: .7;
}

.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5em 1em;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: .92rem;
    color: var(--c-ink-soft);
}

.trust-pill .star {
    color: var(--c-yellow);
}

/* ---------- Animations / reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal[data-delay="1"] {
    transition-delay: .08s;
}

.reveal[data-delay="2"] {
    transition-delay: .16s;
}

.reveal[data-delay="3"] {
    transition-delay: .24s;
}

.reveal[data-delay="4"] {
    transition-delay: .32s;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Page heading hero ---------- */
.page-hero {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem);
    background: linear-gradient(180deg, var(--c-bg-tint) 0%, transparent 100%);
    position: relative;
    overflow: hidden;
}

.page-hero__inner {
    max-width: 760px;
}

/* Split variant — copy on the left, product shot on the right */
.page-hero--split .container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--s-8);
    align-items: center;
}

.page-hero--split .page-hero__inner {
    max-width: none;
}

@media (max-width: 900px) {
    .page-hero--split .container {
        grid-template-columns: 1fr;
    }
}

.page-hero h1 .highlight {
    color: inherit;
}

/* ---------- Tour timeline ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
    position: relative;
}

@media (max-width: 900px) {
    .steps {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 540px) {
    .steps {
        grid-template-columns: 1fr;
    }
}

.steps--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .steps--3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .steps--3 {
        grid-template-columns: 1fr;
    }
}

.step {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    position: relative;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.step__num {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--c-blue-deep);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    margin-bottom: var(--s-4);
}

.step h4 {
    font-size: 1.1rem;
    margin-bottom: var(--s-2);
}

.step p {
    color: var(--c-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* ---------- Trade filter (search-to-filter guide cards) ---------- */
.trade-filter {
    max-width: 520px;
    margin: 0 auto var(--s-6);
}

.trade-filter__label {
    display: block;
    margin-bottom: var(--s-2);
    font-weight: 600;
    color: var(--c-ink);
}

.trade-filter__control {
    position: relative;
}

.trade-filter__icon {
    position: absolute;
    left: 1em;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--c-muted);
    pointer-events: none;
}

/* Compound selector keeps this ahead of the .input shorthand padding */
.input.trade-filter__input {
    padding-left: 3.1em;
}

.trade-filter__empty {
    text-align: center;
    color: var(--c-muted);
    margin-top: var(--s-4);
}

/* Visually hidden, still available to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Form / input ---------- */
.input {
    width: 100%;
    padding: 0.85em 1em;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    font: inherit;
    background: #fff;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.input:focus {
    outline: 0;
    border-color: var(--c-blue);
    box-shadow: 0 0 0 4px rgba(38, 140, 192, .15);
}

.input--textarea {
    resize: vertical;
    min-height: 96px;
    line-height: 1.5;
}

/* Form card — white panel for embedded lead-capture forms */
.form-card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-xl);
    padding: var(--s-7);
    box-shadow: var(--shadow-md);
}

.form-card__heading {
    margin: 0 0 var(--s-2);
}

.form-card__intro {
    color: var(--c-muted);
    margin: 0 0 var(--s-4);
}

.form-card__form {
    display: grid;
    gap: var(--s-3);
}

.form-card__note {
    font-size: 0.85rem;
    color: var(--c-muted);
    margin: 0;
}

/* On narrow viewports trim the card padding so the form has more room. */
@media (max-width: 480px) {
    .form-card {
        padding: var(--s-5);
    }
}

/* The Google reCAPTCHA renders a fixed 304px iframe that otherwise spills
   past the card and the viewport on small phones. Scaling alone is not
   enough because the element still reserves its full 304px in layout, so we
   wrap it: the wrapper reserves the reduced footprint and clips the overflow
   (overflow:hidden also lets the grid item shrink below the 304px child). */
.recaptcha-wrap {
    max-width: 100%;
}

@media (max-width: 400px) {
    .recaptcha-wrap {
        width: 250px;   /* 304px widget * 0.82 scale */
        height: 64px;   /* 78px widget * 0.82 scale */
        overflow: hidden;
    }

    .recaptcha-wrap .g-recaptcha {
        transform: scale(0.82);
        transform-origin: 0 0;
    }
}

/* Inline form feedback (success / error) */
.form-message {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    font-size: 0.95rem;
    line-height: 1.5;
}

.form-message--success {
    background: #EAF7EF;
    border: 1px solid #2EAB5C;
    color: #1E7A40;
}

.form-message--error {
    background: #FCECEC;
    border: 1px solid var(--c-red);
    color: var(--c-red-deep);
}

/* Instant quote calculator (payroll pricing) */
.form-card--quote {
    display: flex;
    flex-direction: column;
}

.form-card--quote #pq-count {
    font-size: 1.875rem;
    font-weight: 700;
}

.quote-result {
    display: grid;
    gap: var(--s-3);
    margin: var(--s-5) 0;
    padding: var(--s-4) var(--s-5);
    background: var(--c-bg-tint);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
}

.quote-result__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
}

.quote-result__row + .quote-result__row {
    padding-top: var(--s-3);
    border-top: 1px solid var(--c-line);
}

.quote-result__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-weight: 700;
    color: var(--c-ink-soft);
    white-space: nowrap;
}

.quote-result__sub {
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--c-muted);
}

.quote-result__price {
    display: flex;
    align-items: baseline;
    gap: 0.15em;
    white-space: nowrap;
}

.quote-result__amount {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.quote-result__row--intro .quote-result__amount {
    color: var(--c-blue-deep);
}

.quote-result__period {
    color: var(--c-muted);
    font-weight: 600;
    font-size: 0.9rem;
}

.quote-result__cta {
    align-self: flex-start;
}

/* ---------- Misc ---------- */
.divider {
    height: 1px;
    background: var(--c-line);
    margin: var(--s-7) 0;
}

.kicker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
}

.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--s-7);
}

.section-head .lead {
    margin: 0 auto;
}

/* Wide variant — roomier headline-to-body spacing and a less boxed-in paragraph */
.section-head--wide {
    max-width: 920px;
}

.section-head--wide .lead {
    max-width: 80ch;
    margin-top: var(--s-5);
}

/* Start-aligned variant — left-aligned head for use inside a column (e.g. the
   MTD hub main column beside the sticky sidebar). */
.section-head--start {
    text-align: left;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.section-head--start .lead {
    margin-left: 0;
    margin-right: 0;
}

/* ---------- Helper utilities ---------- */
.mt-0 {
    margin-top: 0 !important;
}

.mt-3 {
    margin-top: var(--s-3);
}

.mt-4 {
    margin-top: var(--s-4);
}

.mt-5 {
    margin-top: var(--s-5);
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-3 {
    margin-bottom: var(--s-3);
}

.mb-4 {
    margin-bottom: var(--s-4);
}

/* ---------- 404 page ---------- */
.page-404 {
    min-height: 72vh;
    display: flex;
    align-items: center;
    padding: var(--s-6) 0 var(--s-9);
}
.page-404__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
    align-items: center;
}
.page-404__num {
    font-size: clamp(7rem, 16vw, 13rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    color: transparent;
    -webkit-text-stroke: 2px var(--c-line);
    margin-bottom: var(--s-5);
    user-select: none;
}
.page-404__muted {
    color: var(--c-muted);
    margin-bottom: var(--s-6);
}
.invoice-card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-xl);
    padding: var(--s-6);
    box-shadow: var(--shadow-md);
    max-width: 420px;
}
.invoice-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--s-5);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--c-line);
}
.invoice-card__label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: .2em;
}
.invoice-card__num {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--c-ink);
}
.invoice-stamp {
    border: 2.5px solid var(--c-red);
    color: var(--c-red);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: .3em .65em;
    border-radius: 4px;
    transform: rotate(5deg);
    opacity: .85;
    flex-shrink: 0;
}
.invoice-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-3) 0;
    font-size: .95rem;
}
.invoice-row + .invoice-row { border-top: 1px solid var(--c-line-soft); }
.invoice-row__label { color: var(--c-muted); }
.invoice-row__val { font-weight: 700; color: var(--c-ink); }
.invoice-row__val--bad { color: var(--c-red); }
.invoice-card__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 2px solid var(--c-line);
    font-weight: 800;
    font-size: 1.05rem;
}
.invoice-card__total-bad { color: var(--c-red); }
.invoice-card__note {
    margin-top: var(--s-5);
    padding: var(--s-3) var(--s-4);
    background: var(--c-bg-tint);
    border-radius: var(--r-md);
    font-size: .85rem;
    color: var(--c-muted);
    text-align: center;
}
@media (max-width: 860px) {
    .page-404__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .page-404__num { font-size: clamp(6rem, 22vw, 9rem); }
    .invoice-card { margin: 0 auto; }
    .page-404 .btn-row { justify-content: center; }
}

.mb-5 {
    margin-bottom: var(--s-5);
}

.btn-row {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
}

/* Centred row — e.g. deep-links beneath a centred section heading */
.btn-row--center {
    justify-content: center;
}

/* Equal-width buttons — matched CTA pair */
.btn-row--equal .btn {
    flex: 1 1 auto;
    min-width: 220px;
}

/* Trustpilot TrustBox embed — the official widget is rendered into any
   .trustpilot-widget element by the tp.widget.bootstrap loader (see footer).
   These helpers only handle layout of the container around it. */
.trustpilot-embed {
    width: 100%;
}

.trustpilot-embed--center {
    max-width: 320px;
    margin: 0 auto;
}

.trustpilot-embed--inline {
    display: inline-block;
    width: auto;
    min-width: 210px;
    vertical-align: middle;
}

/* ---------- App store badges ---------- */
.app-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
}

.app-badges--center {
    justify-content: center;
}

.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.65em;
    padding: 0.6em 1.2em;
    background: var(--c-ink);
    color: #fff;
    border: 1px solid var(--c-ink);
    border-radius: var(--r-md);
    text-decoration: none;
    transition: transform .25s var(--ease), background .25s var(--ease);
}

.app-badge:hover {
    transform: translateY(-2px);
    background: #14264a;
    color: #fff;
}

.app-badge svg {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
}

.app-badge__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}

.app-badge__small {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

.app-badge__big {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* ---------- Sub-navigation (switch between related pages) ---------- */
.subnav-section {
    padding-top: 0;
}

/* Centre the pill bar when it fits, allow horizontal scroll when it doesn't.
   overflow-y is pinned to hidden so the reveal animation's translateY can't
   momentarily trigger a vertical scrollbar (overflow-x:auto would otherwise
   force overflow-y to compute to auto). */
.subnav-scroll {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--s-5));
    padding: var(--s-2) var(--s-5);
}

.subnav {
    display: inline-flex;
    gap: var(--s-2);
    padding: var(--s-2);
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
    margin: 0 auto;
}

.subnav a {
    display: inline-flex;
    align-items: center;
    padding: 0.55em 1.1em;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--c-ink-soft);
    white-space: nowrap;
    transition: background .2s var(--ease), color .2s var(--ease);
}

.subnav a:hover {
    background: var(--c-bg-tint);
    color: var(--c-ink);
}

.subnav a.is-active {
    background: var(--c-blue-deep);
    color: #fff;
}

@media (max-width: 720px) {
    /* The pill bar would overflow the viewport here, so instead of scrolling
       it horizontally, let it wrap onto centred rows and soften the radius so
       the taller box doesn't look like a blob. */
    .subnav-scroll {
        display: block;
        overflow: visible;
        margin: 0;
        padding: var(--s-2) 0;
    }

    .subnav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
        border-radius: var(--r-lg);
    }
}

/* ---------- Breadcrumb (help guides, deep pages) ---------- */
.breadcrumb {
    margin-bottom: var(--s-5);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
    color: var(--c-muted);
    font-weight: 600;
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: var(--s-2);
    color: var(--c-line);
    font-weight: 400;
}

.breadcrumb a {
    color: var(--c-muted);
}

.breadcrumb a:hover {
    color: var(--c-blue-deep);
}

.breadcrumb [aria-current="page"] {
    color: var(--c-ink);
}

/* Inline reference to an in-app menu path, e.g. Tools › Projects › Tasks */
.nav-path {
    display: inline-block;
    padding: 0.1em 0.5em;
    background: var(--c-bg-tint);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    font-size: 0.92em;
    font-weight: 600;
    color: var(--c-ink);
}

/* ---------- Legal / policy pages ---------- */
.legal-body {
    max-width: 760px;
}

.legal-body > h2 {
    margin-top: var(--s-7);
    padding-top: var(--s-6);
    border-top: 1px solid var(--c-line);
    scroll-margin-top: 90px;
}

.legal-body > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.legal-body h3 {
    margin-top: var(--s-5);
    font-size: 1.15rem;
}

.legal-body ul,
.legal-body ol {
    color: var(--c-ink-soft);
    margin: 0 0 var(--s-4);
}

.legal-body li {
    margin: 0.4em 0;
}

.legal-body p {
    color: var(--c-ink-soft);
}

/* Long URLs printed as link text (e.g. browser help links) must wrap rather
   than force the whole page wider than the viewport. */
.legal-body a {
    overflow-wrap: anywhere;
}

.legal-meta {
    color: var(--c-muted);
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: var(--s-4);
}

.legal-toc {
    background: var(--c-bg-tint);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--s-5) var(--s-6);
    margin-bottom: var(--s-7);
}

.legal-toc__title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-muted);
    margin: 0 0 var(--s-3);
}

.legal-toc ol {
    margin: 0;
    padding-left: 1.3em;
    columns: 2;
    column-gap: var(--s-7);
}

@media (max-width: 600px) {
    .legal-toc ol {
        columns: 1;
    }
}

.legal-toc a {
    font-weight: 600;
}

/* ---------- Full feature list (comparison table) ---------- */
.compare--features {
    min-width: 680px;
}

/* Feature name + helper description in the first column */
.compare__feature-name {
    display: block;
    font-weight: 700;
    color: var(--c-ink);
}

.compare__feature-desc {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    color: var(--c-muted);
    font-size: 0.9rem;
    max-width: 52ch;
}

/* =============================================================
   Making Tax Digital content hub
   Sticky-sidebar shell + reusable modules (byline, data table,
   infobox, eligibility checker) shared across the MTD cluster.
   ============================================================= */

/* ---------- Hub shell: sticky sidebar + main column ---------- */
.mtd-hub__grid {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
}

.mtd-hub__side {
    position: sticky;
    top: 96px;
    /* Grid items default to min-width:auto, which would let the wide sidebar
       index force the track past the viewport. Cap it so children scroll. */
    min-width: 0;
}

.mtd-hub__main {
    min-width: 0;
}

/* Vertical rhythm between blocks in the main column */
.hub-sec + .hub-sec {
    margin-top: var(--s-8);
}

.hub-sec > .eyebrow {
    display: inline-block;
    margin-bottom: var(--s-2);
}

.hub-sec h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
    scroll-margin-top: 96px;
}

/* ---------- Sidebar sub-navigation ---------- */
.mtd-nav {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--s-4);
    box-shadow: var(--shadow-sm);
}

.mtd-nav__title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-muted);
    margin: 0 0 var(--s-3);
    padding: 0 var(--s-2);
}

.mtd-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

/* Index links only — scoped to the list so the primary CTA button below keeps
   its own .btn--primary colour and hover (these rules would otherwise win on
   specificity and flatten the button). */
.mtd-nav ul a {
    display: block;
    padding: 0.45em 0.8em;
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--c-ink-soft);
    transition: background .2s var(--ease), color .2s var(--ease);
}

.mtd-nav ul a:hover {
    background: var(--c-bg-tint);
    color: var(--c-blue-deep);
}

.mtd-nav ul a.is-active {
    background: var(--c-blue-deep);
    color: #fff;
}

.mtd-nav__cta {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-line);
}

.mtd-nav__cta .btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 900px) {
    .mtd-hub__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-6);
    }

    .mtd-hub__side {
        position: static;
        top: auto;
    }

    /* Collapse the index into a horizontally scrollable pill row on narrow screens */
    .mtd-nav ul {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        gap: var(--s-2);
        padding-bottom: var(--s-2);
        scrollbar-width: thin;
    }

    .mtd-nav ul a {
        white-space: nowrap;
        background: var(--c-bg-tint);
        border-radius: var(--r-pill);
    }

    .mtd-nav__cta {
        display: none;
    }
}

/* ---------- Byline: last updated + reviewer ---------- */
.byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-6);
    padding: var(--s-4) 0;
    margin-bottom: var(--s-6);
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    font-size: 0.92rem;
    color: var(--c-muted);
}

.byline__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}

.byline__item svg {
    width: 18px;
    height: 18px;
    flex: none;
    stroke: var(--c-blue-deep);
}

.byline strong {
    color: var(--c-ink);
    font-weight: 700;
}

/* ---------- Infobox: tinted callouts (at-a-glance, status notes) ---------- */
.infobox {
    background: var(--c-bg-sky);
    border: 1px solid #cfe6f5;
    border-radius: var(--r-lg);
    padding: var(--s-6);
}

.infobox__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}

.infobox__head svg {
    width: 24px;
    height: 24px;
    flex: none;
    stroke: var(--c-blue-deep);
}

.infobox h3 {
    margin: 0;
    font-size: 1.2rem;
}

.infobox p:last-child,
.infobox ul:last-child {
    margin-bottom: 0;
}

.infobox ul {
    margin: 0;
    padding-left: 1.2em;
    color: var(--c-ink-soft);
}

.infobox li {
    margin: 0.35em 0;
}

.infobox--yellow {
    background: var(--c-bg-cream);
    border-color: #f3e2b8;
}

.infobox--yellow .infobox__head svg {
    stroke: var(--c-yellow-deep);
}

.infobox--red {
    background: #fdeceb;
    border-color: #f5c9c8;
}

.infobox--red .infobox__head svg {
    stroke: var(--c-red);
}

.infobox--green {
    background: #eafaf1;
    border-color: #c5ecd5;
}

.infobox--green .infobox__head svg {
    stroke: #1a8a53;
}

/* ---------- Data table: key-dates / thresholds module ----------
   The table is the direct child of .table-scroll (like .compare) so it
   scrolls horizontally on narrow screens. Card styling lives on the table
   itself, never on a wrapper with overflow:hidden, which would clip the
   min-width table and kill the scroll. */
.data-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.98rem;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.data-table th,
.data-table td {
    padding: var(--s-3) var(--s-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--c-line);
}

.data-table thead th {
    background: var(--c-bg-tint);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-muted);
    font-weight: 700;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tbody th {
    font-weight: 800;
    color: var(--c-blue-deep);
    white-space: nowrap;
}

.data-table tbody tr.is-highlight {
    background: var(--c-bg-sky);
}

.data-table .cell-note {
    display: block;
    font-size: 0.85rem;
    color: var(--c-muted);
    margin-top: 2px;
}

/* ---------- Eligibility checker (thresholds page) ---------- */
.mtd-checker {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: var(--s-6);
}

.mtd-checker__field {
    margin-bottom: var(--s-5);
}

.mtd-checker label {
    display: block;
    font-weight: 700;
    margin-bottom: var(--s-2);
}

.mtd-checker__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.mtd-checker__choice {
    padding: 0.6em 1.1em;
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    background: var(--c-bg-tint);
    font-weight: 600;
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.mtd-checker__choice.is-active {
    background: var(--c-blue-deep);
    border-color: var(--c-blue-deep);
    color: #fff;
}

.mtd-checker input[type="number"] {
    width: 100%;
    max-width: 260px;
    padding: 0.7em 0.9em;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    font: inherit;
    color: var(--c-ink);
}

.mtd-checker input[type="number"]:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 1px;
}

.mtd-checker__result {
    margin-top: var(--s-5);
    padding: var(--s-5);
    border-radius: var(--r-md);
    background: var(--c-bg-tint);
    border-left: 4px solid var(--c-line);
    font-weight: 600;
    color: var(--c-ink-soft);
}

.mtd-checker__result.is-in {
    background: #fdeceb;
    border-left-color: var(--c-red);
}

.mtd-checker__result.is-soon {
    background: var(--c-bg-cream);
    border-left-color: var(--c-yellow-deep);
}

.mtd-checker__result.is-out {
    background: #eafaf1;
    border-left-color: #1a8a53;
}

.mtd-checker__result strong {
    display: block;
    color: var(--c-ink);
    font-size: 1.1rem;
    margin-bottom: var(--s-1);
}

/* ---------- Related-pages footer module ---------- */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-4);
}

.related-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-5);
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.related-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: #cfe6f5;
}

.related-card h3 {
    margin: 0;
    font-size: 1.1rem;
}

.related-card p {
    margin: 0;
    color: var(--c-muted);
    font-size: 0.95rem;
}

.related-card .arrow {
    color: var(--c-blue-deep);
    font-weight: 800;
}

/* Category divider row inside the table */
.compare__group td {
    text-align: left;
    background: var(--c-bg-sky);
    color: var(--c-ink);
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
}

.compare .na {
    color: #BFC8D2;
}

/* Floating header that keeps the plan columns + current category in view.
   Built and positioned by the sticky-header module in main.js. */
.compare-stickyhead {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s var(--ease);
    box-shadow: var(--shadow-md);
}

.compare-stickyhead.is-active {
    opacity: 1;
    visibility: visible;
}

.compare-stickyhead__inner {
    will-change: transform;
}

.compare-stickyhead__table {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    table-layout: fixed;
}

.compare-stickyhead__table thead th {
    border-bottom: 1px solid var(--c-line);
}

.compare-stickyhead__cat {
    color: var(--c-blue-deep);
    font-weight: 800;
}

/* =============================================================
   MTD "Ask the AI" assistant
   ============================================================= */
.mtd-ask {
    max-width: 760px;
    margin: 0 auto;
}

/* Suggested-question chips */
.mtd-ask__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
}

.mtd-chip {
    padding: 0.55em 1.1em;
    border-radius: var(--r-pill);
    border: 1px solid var(--c-line);
    background: #fff;
    color: var(--c-ink-soft);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease),
        border-color .2s var(--ease), transform .2s var(--ease);
}

.mtd-chip:hover {
    background: var(--c-blue-deep);
    border-color: var(--c-blue-deep);
    color: #fff;
    transform: translateY(-2px);
}

/* Chat shell */
.mtd-chat {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.mtd-chat__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    background: var(--c-bg-tint);
    border-bottom: 1px solid var(--c-line);
}

.mtd-chat__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1F8B4F;
    box-shadow: 0 0 0 4px rgba(31, 139, 79, .15);
    flex: 0 0 auto;
}

.mtd-chat__title {
    font-weight: 700;
    color: var(--c-ink);
}

.mtd-chat__badge {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-blue-deep);
    background: var(--c-bg-sky);
    padding: 0.35em 0.75em;
    border-radius: var(--r-pill);
}

/* Conversation log */
.mtd-chat__log {
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    min-height: 220px;
    max-height: 460px;
    overflow-y: auto;
}

.mtd-msg {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
}

.mtd-msg--user {
    flex-direction: row-reverse;
}

.mtd-msg__avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
}

.mtd-msg__avatar--ai {
    background: linear-gradient(135deg, var(--c-blue-deep), var(--c-blue));
}

.mtd-msg__avatar--user {
    background: var(--c-ink);
}

.mtd-msg__bubble {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    background: var(--c-bg-tint);
    color: var(--c-ink);
    max-width: 82%;
    font-size: 0.97rem;
    line-height: 1.55;
}

.mtd-msg--user .mtd-msg__bubble {
    background: var(--c-blue-deep);
    color: #fff;
}

.mtd-msg__bubble > :first-child {
    margin-top: 0;
}

.mtd-msg__bubble > :last-child {
    margin-bottom: 0;
}

.mtd-msg__bubble p {
    margin: 0 0 var(--s-2);
}

.mtd-msg__bubble ul,
.mtd-msg__bubble ol {
    margin: 0 0 var(--s-2);
    padding-left: 1.3em;
}

.mtd-msg__bubble li {
    margin-bottom: 0.25em;
}

.mtd-msg__bubble h3,
.mtd-msg__bubble h4,
.mtd-msg__bubble h5 {
    font-size: 1.02rem;
    margin: var(--s-3) 0 var(--s-2);
}

.mtd-msg__bubble a {
    color: var(--c-blue-deep);
    text-decoration: underline;
}

.mtd-msg--user .mtd-msg__bubble a {
    color: #fff;
}

.mtd-msg__bubble code {
    background: rgba(15, 27, 45, .07);
    border-radius: var(--r-sm);
    padding: 0.1em 0.4em;
    font-size: 0.9em;
}

/* Typing indicator */
.mtd-typing {
    display: inline-flex;
    gap: 4px;
    padding: 0.2em 0;
}

.mtd-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-muted);
    animation: mtd-bounce 1.2s infinite ease-in-out both;
}

.mtd-typing span:nth-child(2) { animation-delay: .15s; }
.mtd-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes mtd-bounce {
    0%, 80%, 100% { transform: scale(.6); opacity: .4; }
    40% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .mtd-typing span { animation: none; }
}

/* Error / rate-limit notice */
.mtd-chat__error {
    margin: 0 var(--s-5);
    padding: var(--s-3) var(--s-4);
    background: #FCEBEC;
    color: var(--c-red-deep);
    border-radius: var(--r-md);
    font-size: 0.92rem;
    font-weight: 600;
}

/* Input row */
.mtd-chat__form {
    display: flex;
    gap: var(--s-3);
    align-items: flex-end;
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--c-line);
}

.mtd-chat__input {
    flex: 1 1 auto;
    resize: none;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--c-ink);
    padding: 0.7em 1em;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: #fff;
    min-height: 70px;
    max-height: 140px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.mtd-chat__input:focus {
    outline: none;
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(38, 140, 192, .15);
}

.mtd-chat__send {
    flex: 0 0 auto;
}

.mtd-chat__send:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Meta row under the input */
.mtd-chat__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-2);
    padding: 0 var(--s-5) var(--s-4);
    font-size: 0.85rem;
    color: var(--c-muted);
}

.mtd-chat__count {
    font-weight: 600;
    color: var(--c-ink-soft);
}

.mtd-ask__disclaimer {
    margin: var(--s-5) auto 0;
    max-width: 60ch;
    text-align: center;
    font-size: 0.85rem;
    color: var(--c-muted);
}

@media (max-width: 540px) {
    .mtd-chat__form {
        flex-direction: column;
        align-items: stretch;
    }

    .mtd-chat__send {
        width: 100%;
    }

    .mtd-msg__bubble {
        max-width: 100%;
    }
}

/* ============ VAT CALCULATOR ============ */
.vatcalc {
    max-width: 680px;
    margin: 0 auto;
}

.vatcalc__modes {
    display: flex;
    width: 100%;
    margin-bottom: var(--s-6);
}

.vatcalc__modes .segmented__btn {
    flex: 1 1 0;
    justify-content: center;
}

.vatcalc__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
}

.vatcalc__field label {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: var(--s-2);
}

/* Input + affix (£ / %) share one bordered control that lights up on focus. */
.vatcalc__control {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: #fff;
    overflow: hidden;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.vatcalc__control:focus-within {
    border-color: var(--c-blue);
    box-shadow: 0 0 0 4px rgba(38, 140, 192, .15);
}

.vatcalc__control .input {
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 1.35rem;
    font-weight: 700;
    min-width: 0;
}

.vatcalc__control .input:focus {
    box-shadow: none;
}

.vatcalc__affix {
    display: inline-flex;
    align-items: center;
    padding: 0 1em;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--c-muted);
    background: var(--c-bg-tint);
}

.vatcalc__hint {
    display: block;
    margin-top: var(--s-2);
    font-size: 0.85rem;
    color: var(--c-muted);
}

.vatcalc__rates {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-3);
}

.vatcalc__rate {
    appearance: none;
    border: 1px solid var(--c-line);
    background: #fff;
    color: var(--c-blue-deep);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.4em 0.9em;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.vatcalc__rate:hover {
    border-color: var(--c-blue);
    background: var(--c-bg-sky);
}

.vatcalc__rate.is-active {
    background: var(--c-blue);
    border-color: var(--c-blue);
    color: #fff;
}

.vatcalc__rate:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
}

.vatcalc__results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
    margin-top: var(--s-6);
}

.vatcalc__result {
    text-align: center;
    padding: var(--s-5) var(--s-4);
    background: var(--c-bg-tint);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
}

.vatcalc__result--accent {
    background: linear-gradient(135deg, var(--c-blue-deep), var(--c-blue));
    border-color: transparent;
    box-shadow: var(--shadow-blue);
}

.vatcalc__result-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-muted);
    margin-bottom: var(--s-2);
}

.vatcalc__result--accent .vatcalc__result-label {
    color: rgba(255, 255, 255, .9);
}

.vatcalc__result-value {
    display: block;
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--c-ink);
}

.vatcalc__result--accent .vatcalc__result-value {
    color: #fff;
}

.vatcalc__note {
    margin: var(--s-6) 0 0;
    font-size: 0.85rem;
    color: var(--c-muted);
}

@media (max-width: 640px) {
    .vatcalc__fields,
    .vatcalc__results {
        grid-template-columns: 1fr;
    }
}

/* Numbered index badge used on the VAT facts cards */
.fact-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    margin-bottom: var(--s-4);
    background: var(--c-bg-sky);
    color: var(--c-blue-deep);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: -.01em;
}

/* ============ COOKIE CONSENT ============ */
.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: var(--s-4);
    background: var(--c-bg);
    border-top: 1px solid var(--c-line);
    box-shadow: var(--shadow-lg);
}

.cookie-consent[hidden] {
    display: none;
}

.cookie-consent__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
}

.cookie-consent__text {
    margin: 0;
    max-width: 70ch;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--c-ink-soft);
}

.cookie-consent__text a {
    color: var(--c-blue-deep);
    font-weight: 600;
    text-decoration: underline;
}

.cookie-consent__actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--s-3);
}

@media (max-width: 720px) {
    .cookie-consent__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-consent__actions .btn {
        flex: 1;
    }
}

/* ---------- MTD "by trade" chips ---------- */
.trade-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

.trade-chip {
    padding: 0.55em 1.1em;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--c-ink-soft);
    box-shadow: var(--shadow-sm);
    transition: transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.trade-chip:hover {
    transform: translateY(-2px);
    border-color: var(--c-blue);
    color: var(--c-blue-deep);
}

.trade-chips__cta {
    text-align: center;
    margin-top: var(--s-6);
}

/* ---------- Ask-AI assistant feature (MTD hub) ---------- */
.mtd-ai__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
    align-items: center;
}

.mtd-ai__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--c-yellow);
}

.mtd-ai__eyebrow svg {
    width: 1.1em;
    height: 1.1em;
}

.mtd-ai__intro .lead {
    color: #aeb9c6;
}

.mtd-ai__panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #16283d, #0c1826);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--r-xl);
    padding: var(--s-5);
    box-shadow: var(--shadow-lg);
}

.mtd-ai__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 15% 0%, rgba(38, 140, 192, .28), transparent 45%),
                radial-gradient(circle at 100% 100%, rgba(243, 178, 29, .16), transparent 40%);
}

.mtd-ai__chat {
    position: relative;
    display: grid;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

.mtd-ai__msg {
    max-width: 85%;
    padding: 0.7em 1em;
    border-radius: var(--r-lg);
    font-size: 0.95rem;
    line-height: 1.45;
}

.mtd-ai__msg--user {
    justify-self: end;
    background: var(--c-blue);
    color: #fff;
    border-bottom-right-radius: var(--r-sm);
}

.mtd-ai__msg--bot {
    justify-self: start;
    display: flex;
    gap: var(--s-3);
    background: rgba(255, 255, 255, .06);
    color: #d3dce6;
    border: 1px solid rgba(255, 255, 255, .08);
    border-bottom-left-radius: var(--r-sm);
}

.mtd-ai__avatar {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--c-yellow), var(--c-yellow-deep));
    color: var(--c-ink);
}

.mtd-ai__avatar svg {
    width: 1rem;
    height: 1rem;
}

.mtd-ai__prompt {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 0.5em 0.5em 0.5em 1em;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-pill);
}

.mtd-ai__prompt:focus-within {
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(38, 140, 192, .25);
}

.mtd-ai__prompt-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: #fff;
    font: inherit;
    font-size: 0.95rem;
}

.mtd-ai__prompt-input::placeholder {
    color: #8695a6;
}

.mtd-ai__prompt-input:focus {
    outline: none;
}

.mtd-ai__send {
    flex: none;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: var(--r-pill);
    background: var(--c-blue);
    color: #fff;
    cursor: pointer;
    transition: background .2s var(--ease);
}

.mtd-ai__send:hover {
    background: var(--c-blue-deep);
}

.mtd-ai__send svg {
    width: 1rem;
    height: 1rem;
}

.mtd-ai__chips {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-4);
}

.mtd-ai__chips-label {
    width: 100%;
    margin: 0 0 var(--s-1);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #8695a6;
}

.mtd-ai__chip {
    padding: 0.4em 0.9em;
    border-radius: var(--r-pill);
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .04);
    color: #d3dce6;
    font-size: 0.88rem;
    font-weight: 600;
    transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}

.mtd-ai__chip:hover {
    border-color: var(--c-blue);
    color: #fff;
    background: rgba(38, 140, 192, .18);
}

@media (max-width: 860px) {
    .mtd-ai__inner {
        grid-template-columns: 1fr;
        gap: var(--s-6);
    }
}