/* ==========================================================
   TAPPHIRE
   Public Website — Responsive Stylesheet

   File:
   css/responsive.css

   Purpose:
   - Laptop adjustments
   - Tablet layouts
   - Mobile navigation layout
   - Mobile typography
   - Mobile cards / grids
   - Forms
   - Legal / Trust Library layouts
   - Footer reflow
   - Accessible touch targets
   - Zoom / reflow support

   Base styles:
   css/style.css

   Shared components:
   css/components.css
========================================================== */


/* ==========================================================
   1. LARGE LAPTOP
   <= 1180px
========================================================== */

@media (max-width: 1180px) {

    :root {
        --container-padding: 24px;
        --space-13: 104px;
    }


    /* ------------------------------------------------------
       HEADER
    ------------------------------------------------------ */

    .primary-navigation {
        gap: 24px;
    }


    .nav-list {
        gap: 22px;
    }


    /* ------------------------------------------------------
       HERO
    ------------------------------------------------------ */

    .hero-container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(380px, 0.9fr);

        gap: 60px;
    }


    .hero-architecture {
        padding: 36px;
    }


    /* ------------------------------------------------------
       TRUST
    ------------------------------------------------------ */

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


    /* ------------------------------------------------------
       FOUR-COLUMN CARDS
    ------------------------------------------------------ */

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


    /* ------------------------------------------------------
       FOOTER
    ------------------------------------------------------ */

    .footer-main {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .footer-brand {
        max-width: 600px;
    }


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


    /* ------------------------------------------------------
       LEGAL
    ------------------------------------------------------ */

    .legal-layout {
        grid-template-columns:
            minmax(210px, 250px)
            minmax(0, 1fr);

        gap: 48px;
    }


    .legal-index {
        padding: 20px;
    }

}


/* ==========================================================
   2. TABLET / SMALL LAPTOP
   <= 960px
========================================================== */

@media (max-width: 960px) {

    :root {
        --container-padding: 22px;

        --header-height: 72px;

        --space-10: 56px;
        --space-11: 68px;
        --space-12: 80px;
        --space-13: 88px;
    }


    /* ======================================================
       HEADER
    ======================================================= */

    .header-container {
        min-height: var(--header-height);
    }


    .mobile-menu-button {
        position: relative;

        z-index: 1002;

        display: block;
    }


    .primary-navigation {
        position: absolute;

        top: 100%;
        right: 0;
        left: 0;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        max-height:
            calc(100vh - var(--header-height));

        max-height:
            calc(100dvh - var(--header-height));

        padding:
            18px
            var(--container-padding)
            26px;

        overflow-y: auto;

        overscroll-behavior: contain;

        background: var(--color-white);

        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);

        box-shadow:
            0 18px 40px rgba(17, 24, 39, 0.08);
    }


    .primary-navigation.is-open {
        display: flex;
    }


    .nav-list {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;
    }


    .nav-list li {
        width: 100%;
    }


    .nav-list a {
        width: 100%;

        min-height: 54px;

        padding-block: 14px;

        border-bottom: 1px solid var(--color-border);

        font-size: 1rem;
    }


    .nav-list a::after {
        display: none;
    }


    .header-cta {
        width: 100%;

        min-height: 50px;

        margin-top: 20px;
    }


    /* ======================================================
       HERO
    ======================================================= */

    .hero-section {
        padding-block:
            88px
            100px;
    }


    .hero-container {
        grid-template-columns: 1fr;

        gap: 70px;
    }


    .hero-content {
        max-width: 820px;
    }


    .hero-description {
        max-width: 740px;
    }


    .hero-architecture {
        width: min(100%, 680px);

        margin-inline: auto;
    }


    /* ======================================================
       CARD GRIDS
    ======================================================= */

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


    /*
       Do not force the final card to span the complete row.

       .card-grid-three is reused on several pages, including
       larger DPA and legal grids, so consistent grid behavior
       is safer than a homepage-specific last-card exception.
    */


    /* ======================================================
       AUDIENCE SECTIONS
    ======================================================= */

    .split-layout,
    .split-layout-reverse {
        grid-template-columns: 1fr;

        gap: 48px;
    }


    .split-layout-reverse .split-content,
    .split-layout-reverse .split-panel {
        order: initial;
    }


    .split-content {
        max-width: 760px;
    }


    .split-panel {
        width: 100%;
    }


    /* ======================================================
       WORKFLOW
    ======================================================= */

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


    /* ======================================================
       TRUST
    ======================================================= */

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


    /* ======================================================
       FOOTER
    ======================================================= */

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

        row-gap: 44px;
    }


    /* ======================================================
       REUSABLE COMPONENTS
    ======================================================= */

    .content-columns {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    /* ======================================================
       FORMS
    ======================================================= */

    .access-form {
        max-width: 100%;
    }


    .form-section {
        padding: 28px 0;
    }


    /* ======================================================
       LEGAL / TRUST LIBRARY
    ======================================================= */

    .legal-hero {
        padding:
            80px
            0
            52px;
    }


    .legal-hero h1 {
        font-size: 2.75rem;
    }


    .legal-content-section {
        padding:
            56px
            0
            80px;
    }


    .legal-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .legal-index {
        position: static;

        top: auto;

        width: 100%;

        padding: 22px;
    }


    .legal-index-list {
        columns: 2;

        column-gap: 36px;
    }


    .legal-index-list li {
        break-inside: avoid;
    }


    .legal-body {
        max-width: 100%;
    }


    .legal-section {
        scroll-margin-top:
            calc(var(--header-height) + 28px);
    }


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


    /* ======================================================
       LARGE-TEXT / REFLOW FOUNDATION
    ======================================================= */

    .hero-content,
    .section-heading,
    .section-heading-wide,
    .split-content,
    .content-narrow,
    .page-intro-content,
    .legal-body,
    .legal-intro {
        max-width: 100%;
    }


    .architecture-node,
    .architecture-core,
    .feature-card,
    .access-card,
    .trust-card,
    .workflow-item,
    .split-panel,
    .legal-index,
    .legal-body,
    .policy-link {
        min-width: 0;
    }


    h1,
    h2,
    h3,
    h4,
    p,
    li,
    a {
        overflow-wrap: break-word;
    }

}


/* ==========================================================
   3. TABLET PORTRAIT / LARGE MOBILE
   <= 768px
========================================================== */

@media (max-width: 768px) {

    :root {
        --container-padding: 20px;

        --space-7: 28px;
        --space-8: 34px;
        --space-9: 40px;
        --space-10: 48px;
        --space-11: 60px;
        --space-12: 70px;
        --space-13: 76px;
    }


    /* ======================================================
       TYPOGRAPHY
    ======================================================= */

    h1 {
        font-size:
            clamp(2.8rem, 10vw, 4.5rem);

        line-height: 1;
    }


    h2 {
        font-size:
            clamp(2rem, 7.5vw, 3.25rem);

        line-height: 1.08;
    }


    h3 {
        font-size: 1.22rem;
    }


    p {
        font-size: 1rem;
    }


    .eyebrow {
        margin-bottom: 20px;

        font-size: 0.73rem;
    }


    /* ======================================================
       GLOBAL SECTIONS
    ======================================================= */

    .section {
        padding-block: var(--space-13);
    }


    .section-heading,
    .section-heading-wide {
        margin-bottom: 44px;
    }


    .section-heading-wide {
        text-align: left;
    }


    .section-action {
        justify-content: flex-start;

        margin-top: 44px;
    }


    /* ======================================================
       HERO
    ======================================================= */

    .hero-section {
        padding-block:
            70px
            84px;
    }


    .hero-container {
        gap: 56px;
    }


    .hero-description {
        font-size: 1.08rem;

        line-height: 1.65;
    }


    .hero-supporting-text {
        margin-bottom: 28px;
    }


    /* ======================================================
       HERO ARCHITECTURE
    ======================================================= */

    .hero-architecture {
        padding: 28px;
    }


    .architecture-label {
        margin-bottom: 28px;
    }


    .architecture-bottom {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .architecture-node,
    .architecture-core {
        width: 100%;

        max-width: none;
    }


    /* ======================================================
       MOVEMENT INTRO
    ======================================================= */

    .statement-block {
        padding: 24px;
    }


    /* ======================================================
       CARDS
    ======================================================= */

    .card-grid-three,
    .card-grid-four {
        grid-template-columns: 1fr;
    }


    .feature-card,
    .access-card,
    .trust-card {
        min-height: auto;
    }


    .feature-card {
        padding: 28px;
    }


    .access-card,
    .trust-card {
        padding: 26px;
    }


    /* ======================================================
       AUDIENCE
    ======================================================= */

    .split-layout {
        gap: 38px;
    }


    .split-panel {
        padding: 28px;
    }


    /* ======================================================
       WORKFLOW
    ======================================================= */

    .workflow {
        grid-template-columns: 1fr;
    }


    .workflow-item {
        min-height: auto;

        padding: 30px;
    }


    /* ======================================================
       TRUST
    ======================================================= */

    .trust-grid {
        grid-template-columns: 1fr;
    }


    /* ======================================================
       FINAL CTA
    ======================================================= */

    .final-cta {
        padding-block: 76px;
    }


    .final-cta-content {
        padding:
            48px
            26px;

        text-align: left;
    }


    .final-cta-content .eyebrow {
        justify-content: flex-start;
    }


    .final-cta-content h2,
    .final-cta-content > p:not(.eyebrow) {
        margin-right: 0;
        margin-left: 0;
    }


    .final-cta-actions {
        justify-content: flex-start;
    }


    /* ======================================================
       FOOTER
    ======================================================= */

    .site-footer {
        padding-top: 70px;
    }


    .footer-main {
        gap: 52px;

        padding-bottom: 52px;
    }


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

        gap:
            42px
            28px;
    }


    .footer-bottom {
        flex-direction: column;

        gap: 16px;
    }


    /* ======================================================
       PAGE INTRO
    ======================================================= */

    .page-intro {
        padding-block:
            72px
            76px;
    }


    /* ======================================================
       FORMS
    ======================================================= */

    .form-grid-two {
        grid-template-columns: 1fr;
    }


    .choice-grid {
        grid-template-columns: 1fr;
    }


    .form-section {
        padding: 26px 0;
    }


    .form-section legend {
        margin-bottom: 18px;

        font-size: 1.125rem;
    }


    .form-field input,
    .form-field select,
    .form-field textarea {
        font-size: 1rem;
    }


    .choice-control {
        min-height: 52px;
    }


    .form-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .form-actions .button {
        width: 100%;
    }


    /* ======================================================
       LEGAL / TRUST LIBRARY
    ======================================================= */

    .legal-hero {
        padding:
            68px
            0
            44px;
    }


    .legal-hero-content {
        max-width: 100%;
    }


    .legal-hero h1 {
        margin-top: 12px;
        margin-bottom: 16px;

        font-size: 2.375rem;
    }


    .legal-updated {
        margin-bottom: 24px;

        font-size: 0.875rem;
    }


    .legal-intro p {
        font-size: 0.975rem;

        line-height: 1.75;
    }


    .legal-content-section {
        padding:
            48px
            0
            68px;
    }


    .legal-layout {
        gap: 34px;
    }


    .legal-index {
        padding: 20px;
    }


    .legal-index-list {
        columns: 1;
    }


    .legal-section {
        margin-bottom: 36px;

        padding-bottom: 36px;
    }


    .legal-section h2 {
        margin-bottom: 18px;

        font-size: 1.6rem;
    }


    .legal-section h3 {
        margin-top: 26px;
    }


    .legal-section p,
    .legal-list li {
        font-size: 0.975rem;
    }


    .legal-callout {
        margin-bottom: 36px;

        padding: 24px;
    }


    .legal-related-grid {
        grid-template-columns: 1fr;
    }


    .legal-related-grid .policy-link {
        min-height: auto;
    }


    .legal-inline-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .legal-inline-actions .button {
        width: 100%;
    }

}


/* ==========================================================
   4. MOBILE
   <= 560px
========================================================== */

@media (max-width: 560px) {

    :root {
        --container-padding: 18px;

        --header-height: 68px;

        --radius-medium: 12px;
        --radius-large: 16px;

        --space-10: 42px;
        --space-11: 52px;
        --space-12: 60px;
        --space-13: 66px;
    }


    /* ======================================================
       HEADER
    ======================================================= */

    .header-container {
        min-height: var(--header-height);
    }


    .brand {
        font-size: 1.08rem;
    }


    .primary-navigation {
        max-height:
            calc(100vh - var(--header-height));

        max-height:
            calc(100dvh - var(--header-height));

        padding-top: 12px;
    }


    /* ======================================================
       TYPOGRAPHY
    ======================================================= */

    h1 {
        margin-bottom: 22px;

        font-size:
            clamp(2.55rem, 12vw, 3.75rem);

        letter-spacing: -0.045em;
    }


    h2 {
        margin-bottom: 20px;

        font-size:
            clamp(1.9rem, 9vw, 2.7rem);

        letter-spacing: -0.04em;
    }


    h3 {
        font-size: 1.17rem;
    }


    /* ======================================================
       BUTTON GROUPS
    ======================================================= */

    .hero-actions,
    .final-cta-actions,
    .page-intro-actions {
        width: 100%;

        flex-direction: column;
    }


    .hero-actions .button,
    .final-cta-actions .button,
    .page-intro-actions .button {
        width: 100%;
    }


    .button {
        min-height: 52px;
    }


    /* ======================================================
       HERO
    ======================================================= */

    .hero-section {
        padding-block:
            58px
            70px;
    }


    .hero-container {
        gap: 46px;
    }


    .hero-description {
        font-size: 1.02rem;
    }


    .hero-supporting-text {
        font-size: 0.94rem;
    }


    /* ======================================================
       ARCHITECTURE
    ======================================================= */

    .hero-architecture {
        padding: 22px;
    }


    .architecture-label {
        margin-bottom: 22px;

        font-size: 0.69rem;

        line-height: 1.5;
    }


    .architecture-node {
        padding: 18px;
    }


    .architecture-core {
        min-height: 118px;

        padding: 22px;
    }


    .architecture-core-text {
        font-size: 1.16rem;
    }


    .architecture-connector {
        height: 32px;
    }


    /* ======================================================
       INTRO
    ======================================================= */

    .statement-block {
        margin-top: 30px;

        padding:
            22px
            20px;
    }


    .statement-block p {
        font-size: 1rem;
    }


    /* ======================================================
       CARDS
    ======================================================= */

    .feature-card,
    .access-card,
    .trust-card {
        padding: 24px;
    }


    .card-number {
        margin-bottom: 24px;
    }


    /* ======================================================
       AUDIENCE
    ======================================================= */

    .split-content p:not(.eyebrow) {
        margin-bottom: 28px;

        font-size: 1rem;
    }


    .split-panel {
        padding: 24px;
    }


    .check-list {
        gap: 18px;
    }


    .check-list li {
        padding-left: 32px;

        font-size: 0.95rem;
    }


    /* ======================================================
       WORKFLOW
    ======================================================= */

    .workflow-item {
        padding:
            26px
            24px;
    }


    .workflow-number {
        margin-bottom: 22px;
    }


    /* ======================================================
       FINAL CTA
    ======================================================= */

    .final-cta {
        padding-block: 66px;
    }


    .final-cta-content {
        padding:
            40px
            22px;
    }


    /* ======================================================
       FOOTER
    ======================================================= */

    .site-footer {
        padding-top: 60px;
    }


    .footer-main {
        gap: 44px;
    }


    .footer-navigation {
        grid-template-columns: 1fr;

        gap: 34px;
    }


    .footer-heading {
        margin-bottom: 16px;
    }


    .footer-column ul {
        gap: 10px;
    }


    .footer-bottom {
        padding-block: 24px;
    }


    /* ======================================================
       SHARED COMPONENTS
    ======================================================= */

    .info-panel,
    .policy-link {
        padding: 22px;
    }


    .section-meta {
        align-items: flex-start;
    }


    /* ======================================================
       FORMS
    ======================================================= */

    .access-form {
        width: 100%;
    }


    .form-section {
        padding: 24px 0;
    }


    .form-grid {
        gap: 18px;
    }


    .form-field {
        gap: 7px;
    }


    .form-field label {
        font-size: 0.925rem;
    }


    .form-field input,
    .form-field select,
    .form-field textarea {
        width: 100%;

        min-height: 50px;

        padding:
            12px
            13px;

        border-radius: var(--radius-small);
    }


    .form-field textarea {
        min-height: 150px;
    }


    .form-helper {
        font-size: 0.825rem;

        line-height: 1.55;
    }


    .choice-grid {
        gap: 10px;
    }


    .choice-control {
        gap: 11px;

        min-height: 50px;

        padding:
            13px
            14px;
    }


    .choice-control span {
        font-size: 0.9rem;
    }


    .consent-list {
        gap: 12px;
    }


    .consent-control {
        padding: 15px;
    }


    .consent-control span {
        font-size: 0.875rem;

        line-height: 1.6;
    }


    .form-policy-note {
        margin-top: 18px;

        font-size: 0.825rem;
    }


    .form-actions {
        margin-top: 26px;
    }


    .button-large {
        width: 100%;

        min-height: 52px;
    }


    .form-status {
        margin-top: 14px;

        font-size: 0.875rem;
    }


    /* ======================================================
       LEGAL / TRUST LIBRARY
    ======================================================= */

    .legal-hero {
        padding:
            56px
            0
            38px;
    }


    .legal-hero h1 {
        margin-bottom: 16px;

        font-size: 2.25rem;

        line-height: 1.1;
    }


    .legal-updated {
        margin-bottom: 20px;
    }


    .legal-intro p {
        margin-bottom: 16px;

        font-size: 0.95rem;

        line-height: 1.7;
    }


    .legal-content-section {
        padding:
            40px
            0
            58px;
    }


    .legal-layout {
        gap: 28px;
    }


    .legal-index {
        padding: 18px;

        border-radius: var(--radius-small);
    }


    .legal-index-title {
        margin-bottom: 14px;
    }


    .legal-index-list {
        padding-left: 18px;
    }


    .legal-index-list li {
        margin-bottom: 9px;

        font-size: 0.85rem;
    }


    .legal-section {
        margin-bottom: 32px;

        padding-bottom: 32px;

        scroll-margin-top:
            calc(var(--header-height) + 22px);
    }


    .legal-section h2 {
        font-size: 1.45rem;

        line-height: 1.3;
    }


    .legal-section h3 {
        margin-top: 24px;

        font-size: 1rem;
    }


    .legal-section p,
    .legal-list li {
        font-size: 0.95rem;

        line-height: 1.72;
    }


    .legal-list {
        padding-left: 20px;
    }


    .legal-callout {
        margin-bottom: 32px;

        padding: 20px;

        border-left-width: 3px;

        border-radius: var(--radius-small);
    }


    .legal-note {
        padding: 16px;
    }


    .legal-table-wrapper {
        margin: 20px 0;

        border-radius: var(--radius-small);
    }


    .legal-table {
        min-width: 560px;
    }


    .legal-table th,
    .legal-table td {
        padding:
            12px
            14px;

        font-size: 0.875rem;
    }


    .legal-definitions dt {
        margin-top: 18px;
    }


    .legal-definitions dd {
        font-size: 0.95rem;
    }


    .legal-related-grid {
        gap: 14px;
    }

}


/* ==========================================================
   5. VERY SMALL MOBILE
   <= 380px
========================================================== */

@media (max-width: 380px) {

    :root {
        --container-padding: 16px;
    }


    /* ------------------------------------------------------
       HEADER
    ------------------------------------------------------ */

    .brand {
        font-size: 1rem;

        letter-spacing: 0.07em;
    }


    .mobile-menu-button {
        width: 44px;
        height: 44px;

        padding: 10px;
    }


    /* ------------------------------------------------------
       TYPOGRAPHY
    ------------------------------------------------------ */

    h1 {
        font-size: 2.35rem;
    }


    h2 {
        font-size: 1.8rem;
    }


    /* ------------------------------------------------------
       ARCHITECTURE
    ------------------------------------------------------ */

    .hero-architecture {
        padding: 18px;
    }


    .architecture-node {
        padding: 16px;
    }


    .architecture-core {
        padding:
            20px
            16px;
    }


    /* ------------------------------------------------------
       CARDS
    ------------------------------------------------------ */

    .feature-card,
    .access-card,
    .trust-card,
    .split-panel,
    .workflow-item {
        padding: 22px;
    }


    /* ------------------------------------------------------
       FINAL CTA
    ------------------------------------------------------ */

    .final-cta-content {
        padding:
            36px
            18px;
    }


    /* ------------------------------------------------------
       FORMS
    ------------------------------------------------------ */

    .form-section {
        padding: 22px 0;
    }


    .form-section legend {
        font-size: 1.05rem;
    }


    .form-field input,
    .form-field select,
    .form-field textarea {
        padding-right: 12px;
        padding-left: 12px;
    }


    .choice-control {
        padding: 12px;
    }


    .choice-control input[type="checkbox"],
    .choice-control input[type="radio"] {
        width: 17px;
        height: 17px;
    }


    /* ------------------------------------------------------
       LEGAL
    ------------------------------------------------------ */

    .legal-hero {
        padding:
            48px
            0
            34px;
    }


    .legal-hero h1 {
        font-size: 2.25rem;
    }


    .legal-content-section {
        padding:
            34px
            0
            48px;
    }


    .legal-index {
        padding: 16px;
    }


    .legal-callout {
        padding: 18px;
    }


    .legal-section {
        margin-bottom: 28px;

        padding-bottom: 28px;
    }


    .legal-section h2 {
        font-size: 1.35rem;
    }

}


/* ==========================================================
   6. VERY NARROW REFLOW
   <= 320px
========================================================== */

@media (max-width: 320px) {

    :root {
        --container-padding: 14px;
    }


    .hero-architecture,
    .feature-card,
    .access-card,
    .trust-card,
    .split-panel,
    .workflow-item,
    .final-cta-content,
    .info-panel,
    .policy-link {
        padding-right: 16px;
        padding-left: 16px;
    }


    .legal-body,
    .legal-intro,
    .legal-index,
    .legal-related,
    .footer-column,
    .form-field,
    .choice-control {
        overflow-wrap: anywhere;

        word-break: normal;
    }


    .legal-callout {
        padding: 16px;
    }

}


/* ==========================================================
   7. LANDSCAPE MOBILE
========================================================== */

@media
    (max-width: 960px)
    and (orientation: landscape)
    and (max-height: 600px) {

    .primary-navigation {
        max-height:
            calc(100vh - var(--header-height));

        max-height:
            calc(100dvh - var(--header-height));
    }


    .nav-list a {
        min-height: 46px;

        padding-block: 10px;
    }


    .header-cta {
        min-height: 46px;

        margin-top: 14px;
    }


    .form-section {
        padding: 22px 0;
    }


    .legal-hero {
        padding:
            52px
            0
            36px;
    }


    .legal-index {
        position: static;
    }

}


/* ==========================================================
   8. TOUCH DEVICES
========================================================== */

@media (pointer: coarse) {

    .nav-list a,
    .footer-column a,
    .text-link {
        min-height: 44px;
    }


    .footer-column a,
    .text-link {
        display: inline-flex;

        align-items: center;
    }


    .button {
        min-height: 48px;
    }


    .form-field input,
    .form-field select,
    .choice-control,
    .form-actions .button {
        min-height: 48px;
    }


    /*
       Legal body links often appear inside paragraphs, so they
       remain inline. Only the index needs a dedicated target.
    */

    .legal-index-list a {
        display: inline-flex;

        align-items: center;

        min-height: 44px;
    }

}


/* ==========================================================
   9. LARGE TEXT / REFLOW SUPPORT
========================================================== */

/*
   Keep content flexible when users zoom or increase text size.
   Do not hide content simply because the viewport becomes narrow.
*/

@media (max-width: 960px) {

    .container,
    .hero-container,
    .split-layout,
    .legal-layout,
    .footer-main,
    .footer-navigation,
    .card-grid,
    .workflow {
        min-width: 0;
    }


    .form-grid,
    .choice-grid,
    .legal-related-grid {
        min-width: 0;
    }


    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }

}


/* ==========================================================
   10. PRINT
========================================================== */

@media print {

    @page {
        margin: 18mm;
    }


    html,
    body {
        background: #ffffff;

        color: #000000;
    }


    .site-header,
    .mobile-menu-button,
    .hero-actions,
    .section-action,
    .final-cta-actions,
    .form-actions {
        display: none !important;
    }


    .section,
    .hero-section,
    .final-cta,
    .page-intro {
        padding-block: 32px;
    }


    .trust-section {
        background: #ffffff;

        color: #000000;
    }


    .trust-section h2,
    .trust-section h3 {
        color: #000000;
    }


    .trust-card {
        background: #ffffff;

        border-color: #cccccc;
    }


    .trust-card p,
    .trust-section .section-heading > p:not(.eyebrow) {
        color: #333333;
    }


    .form-field input,
    .form-field select,
    .form-field textarea,
    .choice-control {
        border: 1px solid #000000;

        box-shadow: none;
    }


    a {
        color: #000000;

        text-decoration: underline;
    }


    /*
       Detailed legal print handling is defined alongside
       the legal components in components.css.
    */

}