/* Base reset */
*,
*::before,
*::after {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    padding: 0
}

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

h1,
h2,
h3,
h4,
p {
    margin: 0
}

/* Tokens */
:root {
    --wrap-narrow: 56rem;
    --wrap-wide: 80rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --radius-3xl: 1.5rem;
    --radius-full: 999px;

    --shadow-md: 0 10px 25px rgba(0, 0, 0, .06);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, .08);

    --ink: #111827;
    --muted: #374151;
    --line: #e5e7eb;
    --card: #ffffff;

    --blue-50: #eff6ff;
    --blue-200: #bfdbfe;
    --blue-600: #2563eb;
    --green-50: #ecfdf5;
    --green-200: #bbf7d0;
    --green-600: #16a34a;
    --orange-50: #fff7ed;
    --orange-200: #fed7aa;
    --orange-600: #ea580c;
    --red-50: #fef2f2;
    --red-200: #fecaca;
    --red-600: #dc2626;
    --purple-50: #faf5ff;
    --purple-200: #e9d5ff;
    --purple-600: #7c3aed;
    --indigo-50: #eef2ff;
    --indigo-200: #c7d2fe;
    --indigo-600: #4f46e5;
    --pink-50: #fdf2f8;
    --pink-200: #fbcfe8;
    --pink-600: #db2777;
    --yellow-50: #fffbeb;
    --yellow-200: #fde68a;
    --yellow-300: #fcd34d;
    --yellow-600: #ca8a04;

    --soft-bg: #fff7ed;
    --muted-bg: #f8fafc;
    --tint-bg: #f0f9ff;
}

/* Layout sections */
.section {
    padding: var(--space-16) var(--space-6);
    background: transparent
}

.section--soft {
    background: var(--soft-bg)
}

.section--muted {
    background: var(--muted-bg)
}

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

.wrap--narrow {
    max-width: var(--wrap-narrow);
    margin: 0 auto
}

.wrap--wide {
    max-width: var(--wrap-wide);
    margin: 0 auto
}

/* Header */
.head {
    text-align: center;
    margin-bottom: var(--space-8);
}

.head__badge {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 999px;
    font-weight: 900
}

.head__title {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 900;
    color: #111827;
    margin: .5rem 0
}

.head__rule {
    width: 4rem;
    height: .4rem;
    border-radius: 999px;
    margin: .5rem auto 0;
    background: #111827;
    opacity: .9
}

.head__badge--blue {
    background: var(--blue-600);
    color: #fff
}

.head__rule--blue {
    background: var(--blue-600)
}

/* Number bubble */
.section-number {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    background: #fff;
    border: 3px solid var(--line);
    border-radius: var(--radius-full);
    font-weight: 900;
    color: #111827;
    flex: 0 0 auto;
}

/* Grid helpers */
.cgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem
}

@media (min-width:768px) {
    .cgrid-md-2 {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1024px) {
    .cgrid-lg-3 {
        grid-template-columns: repeat(3, 1fr)
    }

    .cgrid-lg-4 {
        grid-template-columns: repeat(4, 1fr)
    }
}

/* Cards (outer) */
.legal-card {
    background: var(--card);
    border: 4px solid var(--line);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-8);
}

@media (min-width:640px) {
    .legal-card {
        padding: var(--space-12);
    }
}

.legal-card--blue {
    border-color: var(--blue-200)
}

.legal-card--green {
    border-color: var(--green-200)
}

.legal-card--orange {
    border-color: var(--orange-200)
}

.legal-card--red {
    border-color: var(--red-200)
}

.legal-card--purple {
    border-color: var(--purple-200)
}

.legal-card--indigo {
    border-color: var(--indigo-200)
}

.legal-card--pink {
    border-color: var(--pink-200)
}

.legal-card--yellow {
    border-color: var(--yellow-200)
}

.panel {
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 1rem;
    padding: 1rem;
}

@media (min-width:640px) {
    .panel {
        padding: 1.25rem;
    }
}

.panel p,
.panel li {
    color: var(--muted);
    line-height: 1.7
}

.panel h3 {
    font-weight: 900;
    margin-bottom: .5rem
}

.panel h4 {
    font-weight: 800;
    margin: .25rem 0
}

/* Panel tints */
.panel--blue {
    background: var(--blue-50);
    border-color: var(--blue-200)
}

.panel--green {
    background: var(--green-50);
    border-color: var(--green-200)
}

.panel--orange {
    background: var(--orange-50);
    border-color: var(--orange-200)
}

.panel--red {
    background: var(--red-50);
    border-color: var(--red-200)
}

.panel--purple {
    background: var(--purple-50);
    border-color: var(--purple-200)
}

.panel--indigo {
    background: var(--indigo-50);
    border-color: var(--indigo-200)
}

.panel--pink {
    background: var(--pink-50);
    border-color: var(--pink-200)
}

.panel--yellow {
    background: var(--yellow-50);
    border-color: var(--yellow-200)
}

/* “At a glance” summary cards */
.summary-card {
    background: #fff;
    border: 4px solid var(--blue-200);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-xl);
    padding: 1.25rem;
    transition: border-color .2s ease;
}

@media (min-width:640px) {
    .summary-card {
        padding: 2rem
    }
}

.summary-card__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    margin: 0 auto .75rem;
    background: var(--blue-600);
    color: #fff;
}

.summary-card h3 {
    text-align: center;
    font-weight: 900;
    margin: 0 0 .35rem
}

.summary-card p {
    color: var(--muted);
    text-align: center;
    line-height: 1.7;
    font-size: .95rem
}

.summary-card--blue {
    border-color: var(--blue-200)
}

.summary-card--blue:hover {
    border-color: #60a5fa
}

.summary-card--green {
    border-color: var(--green-200)
}

.summary-card--green:hover {
    border-color: #4ade80
}

.summary-card--orange {
    border-color: var(--orange-200)
}

.summary-card--orange:hover {
    border-color: #fdba74
}

.summary-card--red {
    border-color: var(--red-200)
}

.summary-card--red:hover {
    border-color: #f87171
}

/* TOC */
.toc {
    display: grid;
    gap: .75rem
}

@media (min-width:768px) {
    .toc {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem
    }
}

.toc__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    background: var(--blue-50);
    border-radius: .9rem;
    text-decoration: none;
    transition: background .15s ease;
}

.toc__item:hover {
    background: #dbeafe
}

.toc__item span {
    font-weight: 800;
    color: var(--blue-600)
}

/* Info cards in contact section */
.info-grid {
    display: grid;
    gap: 1rem
}

@media (min-width:768px) {
    .info-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.info-card {
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: var(--shadow-md)
}

.info-card--green {
    border-color: var(--green-200)
}

.info-card--orange {
    border-color: var(--orange-200)
}

/* Links */
.link {
    color: var(--blue-600);
    text-decoration: none
}

.link:hover {
    text-decoration: underline
}

/* Small helpers */
.icon-24 {
    width: 24px;
    height: 24px
}

.privacy-icon svg {
    width: 24px;
    height: 24px
}

.dots-pattern {
    background:
        radial-gradient(currentColor 1px, transparent 1px) 0 0/18px 18px,
        radial-gradient(currentColor 1px, transparent 1px) 9px 9px/18px 18px,
        var(--muted-bg);
    color: #eaeaea;
}

.zigzag-pattern {
    background:
        linear-gradient(-45deg, rgba(0, 0, 0, .03) 25%, transparent 25%) 0 0/20px 20px,
        linear-gradient(45deg, rgba(0, 0, 0, .03) 25%, transparent 25%) 0 0/20px 20px,
        var(--soft-bg);
}

/* Badge color shortcuts for other pages you have */
.head__badge--yellow {
    background: var(--yellow-300);
    color: #000
}

.head__badge--red {
    background: var(--red-600);
    color: #fff
}

.head__badge--green {
    background: var(--green-600);
    color: #fff
}