/* Delmunch public pages — standalone layout (no Vite/Tailwind build) */
/* Mobile-first responsive design: base styles target small screens,
   breakpoints progressively enhance for tablet (640px),
   medium (768px), large (992px), and wide (1200px) screens. */

:root {
    --dm-red: #1f6295;
    --dm-red-dark: #1f6295;
    --dm-red-light: #fef2f2;
    --dm-red-soft: #fee2e2;
    --dm-orange: #fb923c;
    --dm-orange-light: #ffedd5;
    --dm-gray-50: #f9fafb;
    --dm-gray-100: #f3f4f6;
    --dm-gray-200: #e5e7eb;
    --dm-gray-400: #9ca3af;
    --dm-gray-600: #4b5563;
    --dm-gray-700: #374151;
    --dm-gray-800: #1f2937;
    --dm-gray-900: #111827;
    --dm-white: #ffffff;
    --dm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --dm-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --dm-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
    --dm-radius: 0.75rem;
    --dm-radius-lg: 1rem;
    /* Fluid full-width layout */
    --dm-max-content: 100%;
    --dm-max-wide: 100%;
    --dm-nav-height: 4.25rem;

    /* Responsive horizontal page gutters */
    --dm-page-gutter: 0.875rem;
    --dm-section-space: 2rem;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.public-page {
    margin: 0;
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--dm-gray-700);
    background: var(--dm-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
}

body.public-page a {
    color: inherit;
    text-decoration: none;
}

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

body.public-page table {
    width: 100%;
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================= */
/* Hero                          */
/* ============================= */
.public-hero {
    background: linear-gradient(135deg, var(--dm-red-light) 0%, var(--dm-orange-light) 100%);
    border-bottom: 1px solid var(--dm-red-soft);
    padding: 2rem 1rem;
    text-align: center;
}

.public-hero__inner {
    max-width: var(--dm-max-content);
    margin: 0 auto;
}

.public-hero__title {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--dm-red);
    letter-spacing: -0.02em;
    word-break: break-word;
}

.public-hero__subtitle {
    margin: 0.875rem auto 0;
    max-width: 40rem;
    font-size: 1rem;
    color: var(--dm-gray-700);
}

.public-hero__meta {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--dm-red-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dm-gray-700);
}

@media (min-width: 480px) {
    .public-hero__title {
        font-size: 2.125rem;
    }

    .public-hero__subtitle {
        font-size: 1.0625rem;
    }
}

@media (min-width: 768px) {
    .public-hero {
        padding: 3.5rem 1.25rem;
    }

    .public-hero__title {
        font-size: 2.75rem;
    }

    .public-hero__subtitle {
        font-size: 1.1875rem;
    }

    .public-hero__meta {
        font-size: 0.875rem;
    }
}

@media (min-width: 1200px) {
    .public-hero {
        padding: 4.5rem 1.25rem;
    }

    .public-hero__title {
        font-size: 3.25rem;
    }
}

/* ============================= */
/* Page shell                    */
/* ============================= */
.public-main {
    padding-bottom: 0;
    width: 100%;
    overflow-x: hidden;
}

.public-container {
    width: 100%;
    max-width: var(--dm-max-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .public-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .public-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

.public-section {
    padding: 2rem 0;
}

@media (min-width: 640px) {
    .public-section {
        padding: 2.75rem 0;
    }
}

@media (min-width: 768px) {
    .public-section {
        padding: 3.25rem 0;
    }
}

@media (min-width: 1200px) {
    .public-section {
        padding: 4rem 0;
    }
}

.public-section--muted {
    background: var(--dm-gray-50);
}

.public-section__title {
    margin: 0 0 0.875rem;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--dm-gray-800);
    letter-spacing: -0.02em;
    word-break: break-word;
}

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

.public-section__lead {
    margin: 0 auto;
    max-width: 42rem;
    text-align: center;
    color: var(--dm-gray-600);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.public-section__subtitle {
    margin: 1.125rem 0 0.75rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--dm-gray-700);
}

@media (min-width: 640px) {
    .public-section__title {
        font-size: 1.625rem;
    }

    .public-section__lead {
        font-size: 1rem;
    }
}

@media (min-width: 768px) {
    .public-section__title {
        font-size: 1.75rem;
    }

    .public-section__lead {
        font-size: 1.0625rem;
    }
}

@media (min-width: 1200px) {
    .public-section__title {
        font-size: 1.875rem;
    }
}

/* ============================= */
/* About grid                    */
/* ============================= */
.public-about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 768px) {
    .public-about-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

@media (min-width: 1200px) {
    .public-about-grid {
        gap: 3rem;
    }
}

.public-about-grid__media img {
    width: 100%;
    border-radius: var(--dm-radius-lg);
    box-shadow: var(--dm-shadow-lg);
    object-fit: cover;
}

.public-about-grid__body p {
    margin: 0 0 1rem;
    color: var(--dm-gray-600);
    line-height: 1.75;
    font-size: 0.9375rem;
}

.public-about-grid__body p:last-child {
    margin-bottom: 0;
}

@media (min-width: 640px) {
    .public-about-grid__body p {
        font-size: 1rem;
    }
}

/* ============================= */
/* Step cards                    */
/* ============================= */
.public-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (min-width: 560px) {
    .public-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .public-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        margin-top: 2rem;
    }
}

.public-step-card {
    height: 100%;
    background: var(--dm-white);
    border: 1px solid var(--dm-gray-200);
    border-radius: var(--dm-radius-lg);
    box-shadow: var(--dm-shadow-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.public-step-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dm-shadow-lg);
}

.public-step-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
}

.public-step-card__icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.875rem;
    background: var(--dm-red-light);
    color: var(--dm-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
}

.public-step-card__title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dm-gray-800);
}

.public-step-card__text {
    margin: 0;
    color: var(--dm-gray-600);
    font-size: 0.9rem;
    line-height: 1.6;
}

@media (min-width: 480px) {
    .public-step-card__body {
        flex-direction: row;
        align-items: flex-start;
    }
}

@media (min-width: 768px) {
    .public-step-card__body {
        padding: 1.5rem;
        gap: 1rem;
    }

    .public-step-card__icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.5rem;
    }

    .public-step-card__title {
        font-size: 1.0625rem;
    }

    .public-step-card__text {
        font-size: 0.95rem;
    }
}

/* ============================= */
/* Legal / policy document       */
/* ============================= */
.legal-document {
    max-width: var(--dm-max-content);
    margin: 0 auto;
    padding: 1.5rem 0 2rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (min-width: 640px) {
    .legal-document {
        padding: 2rem 0 2.75rem;
    }
}

@media (min-width: 1200px) {
    .legal-document {
        padding: 3rem 0 4rem;
    }
}

.legal-document>section,
.legal-document>div {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--dm-gray-200);
}

@media (min-width: 640px) {

    .legal-document>section,
    .legal-document>div {
        padding: 2rem 0;
    }
}

.legal-document>section:first-child,
.legal-document>div:first-child {
    padding-top: 0;
}

.legal-document>section:last-child,
.legal-document>div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.legal-document h2 {
    margin: 0 0 0.875rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dm-gray-800);
    letter-spacing: -0.02em;
    word-break: break-word;
}

.legal-document h4 {
    margin: 1.125rem 0 0.625rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--dm-gray-700);
}

.legal-document p {
    margin: 0 0 1rem;
    color: var(--dm-gray-600);
    line-height: 1.75;
    font-size: 0.9375rem;
}

.legal-document p:last-child {
    margin-bottom: 0;
}

.legal-document ul,
.legal-document ol {
    margin: 0.75rem 0 1rem;
    padding-left: 1.25rem;
    color: var(--dm-gray-600);
    line-height: 1.75;
}

.legal-document li {
    margin-bottom: 0.5rem;
}

.legal-document a {
    color: var(--dm-red);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.legal-document a:hover {
    color: var(--dm-red-dark);
}

.legal-document strong {
    color: var(--dm-gray-800);
    font-weight: 600;
}

@media (min-width: 640px) {
    .legal-document h2 {
        font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    }

    .legal-document p,
    .legal-document ul,
    .legal-document ol {
        font-size: 1rem;
    }

    .legal-document ul,
    .legal-document ol {
        padding-left: 1.5rem;
    }
}

/* ============================= */
/* Footer — fully responsive     */
/* ============================= */
.public-footer {
    background: var(--dm-gray-900);
    color: var(--dm-gray-200);
    padding: 2rem 0;
    margin-top: 0;
    width: 100%;
}

.public-footer__inner {
    max-width: var(--dm-max-wide);
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Top row: logo + contact info — stacked on mobile, side by side from tablet up */
.public-footer__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.public-footer__brand {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
}

.public-footer__logo {
    width: auto;
    max-width: 8rem;
    max-height: 2.75rem;
    object-fit: contain;
}

.public-footer__contact {
    text-align: center;
    width: 100%;
}

.public-footer__contact :is(p, a) {
    font-size: 0.875rem;
    word-break: break-word;
}

/* Divider line between top row and bottom meta */
.public-footer__divider {
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
}

/* Bottom row: powered-by + copyright, centered */
.public-footer__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    /* was 0.75rem */
    text-align: center;
}

.public-footer__title {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--dm-orange);
}

.public-footer__text {
    margin: 0.25rem 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    word-break: break-word;
}

.public-footer__text a {
    color: #f87171;
    transition: color 0.15s ease;
}

.public-footer__text a:hover {
    color: #fca5a5;
}

.public-footer__copy {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dm-gray-400);
    text-align: center;
}

.public-footer__powered-by {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    /* was 0.375rem */
    transition: opacity 0.15s ease;
}

.public-footer__powered-by:hover {
    opacity: 0.85;
}

.public-footer__powered-by-text {
    font-size: 0.6875rem;
    color: var(--dm-gray-400);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    line-height: 1;
}

.public-footer__powered-by-logo {
    width: auto;
    max-width: 8.5rem;
    height: 1.5rem;
    /* fixed height instead of max-height */
    object-fit: cover;
    /* crops rather than shrinking to fit */
    object-position: center;
    /* adjust to center/top/bottom to trim the right side */
}

/* Small phones: tighten sizes a bit further */
@media (max-width: 374px) {
    .public-footer__logo {
        max-width: 6.5rem;
        max-height: 2.25rem;
    }

    .public-footer__title {
        font-size: 0.875rem;
    }

    .public-footer__text,
    .public-footer__copy {
        font-size: 0.75rem;
    }
}

/* Tablet and up: logo + contact sit side by side */
@media (min-width: 640px) {
    .public-footer {
        padding: 2.25rem 0;
    }

    .public-footer__inner {
        padding: 0 1.5rem;
        gap: 1.75rem;
    }

    .public-footer__top {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1.75rem;
        text-align: left;
    }

    .public-footer__brand {
        width: auto;
        justify-content: flex-start;
    }

    .public-footer__logo {
        max-width: 9rem;
        max-height: 3.25rem;
    }

    .public-footer__contact {
        width: auto;
        text-align: left;
    }

    .public-footer__contact :is(p, a) {
        font-size: 0.9rem;
    }

    .public-footer__title {
        font-size: 1rem;
    }

    .public-footer__text,
    .public-footer__copy {
        font-size: 0.875rem;
    }

    .public-footer__powered-by-text {
        font-size: 0.7rem;
    }

        .public-footer__powered-by-logo {
            max-width: 9.5rem;
            /* was 7.5rem */
            max-height: 2.25rem;
            /* was 1.75rem */
        }
}

/* Large screens: give the top row real edge-to-edge spread while
   keeping the bottom meta row centered under the divider */
@media (min-width: 992px) {
    .public-footer {
        padding: 2.5rem 0;
    }

    .public-footer__top {
        justify-content: space-between;
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .public-footer__inner {
        padding: 0 1.25rem;
    }
}

/* ============================= */
/* Small-screen refinements      */
/* ============================= */
@media (max-width: 639px) {

    .legal-document ul,
    .legal-document ol,
    .tw-ml-8 {
        margin-left: 1.1rem;
    }

    .public-about-grid__body p,
    .legal-document p {
        font-size: 0.9rem;
    }

    .public-step-card__title {
        font-size: 0.95rem;
    }
}

/* ============================= */
/* Legacy tw-* utility aliases   */
/* used in blade templates       */
/* ============================= */
.tw-py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.tw-py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.tw-py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.tw-px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

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

.tw-mt-2 {
    margin-top: 0.5rem;
}

.tw-mt-4 {
    margin-top: 1rem;
}

.tw-mb-4 {
    margin-bottom: 1rem;
}

.tw-ml-8 {
    margin-left: 2rem;
}

.tw-max-w-2xl {
    max-width: 42rem;
}

.tw-w-full {
    width: 100%;
}

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

.tw-text-sm {
    font-size: 0.875rem;
}

.tw-text-base {
    font-size: 1rem;
}

.tw-text-lg {
    font-size: 1.125rem;
}

.tw-text-xl {
    font-size: 1.25rem;
}

.tw-text-3xl {
    font-size: 1.5rem;
}

.tw-text-4xl {
    font-size: 1.875rem;
}

.tw-font-bold {
    font-weight: 700;
}

.tw-font-semibold {
    font-weight: 600;
}

.tw-leading-relaxed {
    line-height: 1.625;
}

.tw-bg-red-50 {
    background-color: var(--dm-red-light);
}

.tw-bg-white {
    background-color: var(--dm-white);
}

.tw-bg-gray-800 {
    background-color: var(--dm-gray-800);
}

.tw-text-red-600 {
    color: var(--dm-red);
}

.tw-text-red-400 {
    color: #f87171;
}

.tw-text-orange-300 {
    color: var(--dm-orange);
}

.tw-text-gray-600 {
    color: var(--dm-gray-600);
}

.tw-text-gray-700 {
    color: var(--dm-gray-700);
}

.tw-text-gray-800 {
    color: var(--dm-gray-800);
}

.tw-text-white {
    color: var(--dm-white);
}

.tw-rounded-lg {
    border-radius: var(--dm-radius);
}

.tw-shadow-lg {
    box-shadow: var(--dm-shadow-lg);
}

.tw-border-0 {
    border: 0;
}

.tw-flex {
    display: flex;
}

.tw-flex-col {
    flex-direction: column;
}

.tw-justify-between {
    justify-content: space-between;
}

.tw-items-center {
    align-items: center;
}

.tw-grid {
    display: grid;
}

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

.tw-gap-8 {
    gap: 2rem;
}

.tw-space-y-12>*+* {
    margin-top: 3rem;
}

.tw-list-disc {
    list-style-type: disc;
}

.tw-list-decimal {
    list-style-type: decimal;
}

@media (min-width: 768px) {
    .tw-text-3xl {
        font-size: 1.875rem;
    }

    .tw-text-4xl {
        font-size: 2.25rem;
    }

    .md\:tw-text-6xl {
        font-size: 3.75rem;
    }

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

    .md\:tw-flex-row {
        flex-direction: row;
    }

    .md\:tw-mb-0 {
        margin-bottom: 0;
    }
}

.hover\:tw-text-red-500:hover {
    color: #ef4444;
}

.tw-gb-white {
    background-color: var(--dm-white);
}

/* ============================================================
   FULL-WIDTH RESPONSIVE SYSTEM
   Phones → tablets → laptops → desktop → Full HD → 2K/4K LCD
   ============================================================ */

/* Prevent fixed-width children from forcing horizontal scrolling */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

body.public-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

@supports not (overflow: clip) {

    html,
    body.public-page {
        overflow-x: hidden;
    }
}

/* Every top-level area spans the available viewport width */
.public-main,
.public-hero,
.public-section,
.public-footer {
    width: 100%;
    max-width: none;
    min-width: 0;
}

/* Remove the old 52rem / 72rem layout caps */
.public-container,
.public-hero__inner,
.public-footer__inner,
.legal-document {
    width: 100%;
    max-width: none;
    min-width: 0;
}

/* Fluid side spacing — content stays full width without touching screen edges */
.public-container,
.public-footer__inner {
    padding-left: var(--dm-page-gutter);
    padding-right: var(--dm-page-gutter);
}

.public-hero {
    padding-left: var(--dm-page-gutter);
    padding-right: var(--dm-page-gutter);
}

/* Let grid/flex children shrink correctly */
.public-about-grid>*,
.public-steps>*,
.public-footer__top>*,
.public-footer__meta>* {
    min-width: 0;
}

/* Responsive media */
body.public-page img,
body.public-page svg,
body.public-page video,
body.public-page canvas {
    max-width: 100%;
    height: auto;
}

body.public-page iframe,
body.public-page embed,
body.public-page object {
    width: 100%;
    max-width: 100%;
}

/* Forms must never overflow narrow screens */
body.public-page input,
body.public-page select,
body.public-page textarea,
body.public-page button {
    max-width: 100%;
}

/* Long links / text / code must wrap rather than create horizontal scroll */
body.public-page p,
body.public-page li,
body.public-page a,
body.public-page h1,
body.public-page h2,
body.public-page h3,
body.public-page h4,
body.public-page h5,
body.public-page h6 {
    overflow-wrap: anywhere;
}

body.public-page pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.public-page code {
    overflow-wrap: anywhere;
}

/* Keep tables usable on mobile without breaking the page */
body.public-page table {
    width: 100%;
    max-width: 100%;
}

body.public-page th,
body.public-page td {
    overflow-wrap: anywhere;
}

/* Fluid typography that scales smoothly without becoming huge on 4K */
.public-hero__title {
    font-size: clamp(1.75rem, 3.2vw, 3.75rem);
}

.public-hero__subtitle {
    width: 100%;
    max-width: 60rem;
    font-size: clamp(0.95rem, 1.15vw, 1.25rem);
}

.public-section__title {
    font-size: clamp(1.35rem, 2vw, 2rem);
}

.public-section__lead {
    width: 100%;
    max-width: 70rem;
    font-size: clamp(0.9375rem, 1vw, 1.125rem);
}

/* Images in the About area fill their grid column */
.public-about-grid__media,
.public-about-grid__media img {
    width: 100%;
}

/* Flexible card grid uses all available width */
.public-steps {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* Footer is truly full-width */
.public-footer__inner,
.public-footer__top,
.public-footer__divider,
.public-footer__meta {
    width: 100%;
}


/* ============================================================
   XS PHONES: 0–374px
   iPhone SE width / very small Android screens
   ============================================================ */
@media (max-width: 374px) {
    :root {
        --dm-page-gutter: 0.75rem;
        --dm-section-space: 1.5rem;
    }

    .public-hero {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .public-section {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .public-hero__title {
        font-size: clamp(1.55rem, 9vw, 1.9rem);
    }

    .public-hero__subtitle {
        font-size: 0.9375rem;
    }

    .public-about-grid {
        gap: 1.25rem;
    }

    .public-steps {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .public-step-card__body {
        padding: 1rem;
    }

    .public-footer {
        padding: 1.5rem 0;
    }
}


/* ============================================================
   MOBILE: 375–479px
   Standard smartphones
   ============================================================ */
@media (min-width: 375px) and (max-width: 479px) {
    :root {
        --dm-page-gutter: 0.875rem;
    }

    .public-hero {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }

    .public-section {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }

    .public-steps {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   LARGE MOBILE: 480–639px
   Large phones / landscape phones
   ============================================================ */
@media (min-width: 480px) and (max-width: 639px) {
    :root {
        --dm-page-gutter: 1rem;
    }

    .public-hero {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }

    .public-section {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }

    .public-about-grid {
        grid-template-columns: 1fr;
    }

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


/* ============================================================
   TABLET: 640–767px
   Small tablets / portrait tablets
   ============================================================ */
@media (min-width: 640px) and (max-width: 767px) {
    :root {
        --dm-page-gutter: 1.5rem;
    }

    .public-hero {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .public-section {
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
    }

    .public-about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    .public-footer__top {
        justify-content: space-between;
    }
}


/* ============================================================
   TABLET LANDSCAPE / SMALL LAPTOP: 768–991px
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
    :root {
        --dm-page-gutter: 1.75rem;
    }

    .public-hero {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .public-section {
        padding-top: 3.25rem;
        padding-bottom: 3.25rem;
    }

    .public-about-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2rem;
    }

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

    .public-footer__top {
        justify-content: space-between;
    }
}


/* ============================================================
   LAPTOP / SMALL DESKTOP: 992–1199px
   ============================================================ */
@media (min-width: 992px) and (max-width: 1199px) {
    :root {
        --dm-page-gutter: 2rem;
    }

    .public-hero {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .public-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .public-about-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2.75rem;
    }

    .public-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}


/* ============================================================
   DESKTOP / HD: 1200–1439px
   ============================================================ */
@media (min-width: 1200px) and (max-width: 1439px) {
    :root {
        --dm-page-gutter: 2.25rem;
    }

    .public-hero {
        padding-top: 4.25rem;
        padding-bottom: 4.25rem;
    }

    .public-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .public-about-grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 3rem;
    }

    .public-steps {
        gap: 1.75rem;
    }
}


/* ============================================================
   LARGE DESKTOP / FULL HD: 1440–1919px
   ============================================================ */
@media (min-width: 1440px) and (max-width: 1919px) {
    :root {
        --dm-page-gutter: clamp(2.5rem, 3vw, 3.5rem);
    }

    .public-hero {
        padding-top: 4.75rem;
        padding-bottom: 4.75rem;
    }

    .public-section {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }

    .public-about-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: clamp(3rem, 4vw, 5rem);
    }

    .public-steps {
        gap: 2rem;
    }

    .public-step-card__body {
        padding: 1.75rem;
    }

    .public-footer {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}


/* ============================================================
   LCD / 2K / 4K: 1920px+
   Stays full width but uses larger fluid gutters for readability
   ============================================================ */
@media (min-width: 1920px) {
    :root {
        --dm-page-gutter: clamp(3rem, 3.5vw, 6rem);
    }

    .public-hero {
        padding-top: clamp(5rem, 5vw, 7rem);
        padding-bottom: clamp(5rem, 5vw, 7rem);
    }

    .public-section {
        padding-top: clamp(4.5rem, 4vw, 6rem);
        padding-bottom: clamp(4.5rem, 4vw, 6rem);
    }

    .public-about-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: clamp(4rem, 5vw, 7rem);
    }

    .public-steps {
        gap: clamp(1.75rem, 2vw, 2.75rem);
    }

    .public-step-card__body {
        padding: clamp(1.75rem, 1.5vw, 2.25rem);
    }

    .public-footer {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}


/* ============================================================
   LANDSCAPE PHONE HEIGHT FIX
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .public-hero {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .public-section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}


/* ============================================================
   ACCESSIBILITY / DEVICE PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print remains readable and avoids unnecessary wide gutters */
@media print {
    :root {
        --dm-page-gutter: 0;
    }

    body.public-page {
        overflow: visible;
    }

    .public-container,
    .public-hero__inner,
    .public-footer__inner,
    .legal-document {
        max-width: none;
        width: 100%;
    }
}