/* Mobile-first overrides: native scrolling, compact navigation and touch-friendly forms. */

.mobile-topic-nav {
    display: none;
}

.service-details {
    width: 100%;
    min-width: 0;
}

.service-details > summary,
.form-more > summary {
    display: none;
}

@media (max-width: 680px), (max-width: 940px) and (max-height: 500px) and (orientation: landscape) {
    :root {
        --topbar-height: 52px;
        --bottom-nav-space: 66px;
    }

    html {
        min-height: 100%;
        overflow-x: clip;
        overflow-y: auto;
        scroll-behavior: smooth;
        scroll-padding-top: 0;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        min-height: 100dvh;
        overflow-x: clip;
        overflow-y: visible;
        overscroll-behavior-x: none;
        background: #f4f7f8;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 80;
        min-height: calc(var(--topbar-height) + env(safe-area-inset-top));
        padding:
            env(safe-area-inset-top)
            calc(16px + env(safe-area-inset-right))
            0
            calc(16px + env(safe-area-inset-left));
        border-bottom: 1px solid #dfe8e8;
        background: #ffffff;
        box-shadow: none;
        backdrop-filter: none;
    }

    .brand {
        font-size: 15px;
    }

    .brand-logo {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    .nav {
        display: none;
    }

    .swipe-viewport {
        width: 100%;
        height: auto;
        overflow: visible;
        touch-action: auto;
    }

    .screen-track {
        display: block;
        width: 100%;
        height: auto;
        overflow-anchor: none;
        transform: none !important;
        transition: none;
        will-change: auto;
    }

    .screen {
        width: 100%;
        min-width: 0;
        height: auto;
        overflow: visible;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none;
        will-change: auto;
    }

    body[data-current-view="info"] .order-screen,
    body[data-current-view="order"] .info-screen {
        display: none;
    }

    body[data-current-view="info"] .info-screen,
    body[data-current-view="order"] .order-screen {
        display: block;
    }

    .mobile-topic-nav {
        position: sticky;
        top: calc(var(--topbar-height) + env(safe-area-inset-top));
        z-index: 70;
        display: block;
        border-bottom: 1px solid #e3ebeb;
        background: rgba(255, 255, 255, 0.97);
    }

    .mobile-topic-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2px;
        width: min(100%, 430px);
        margin: 0 auto;
        padding:
            5px
            calc(8px + env(safe-area-inset-right))
            4px
            calc(8px + env(safe-area-inset-left));
        overflow: hidden;
    }

    .mobile-topic-tabs::-webkit-scrollbar {
        display: none;
    }

    .mobile-topic-button {
        min-width: 0;
        min-height: 44px;
        padding: 0 2px;
        overflow: hidden;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #667079;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        text-align: center;
        text-overflow: clip;
        white-space: nowrap;
        cursor: pointer;
        transition:
            color 180ms ease,
            background 180ms ease;
    }

    .mobile-topic-button.is-active {
        background: #e5f3f0;
        color: #0f675f;
    }

    .mobile-topic-button:focus-visible {
        outline-offset: -3px;
    }

    .mobile-topic-progress {
        display: block;
        width: 100%;
        height: 2px;
        overflow: hidden;
        background: #e4ecec;
    }

    .mobile-topic-progress > span {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 100ms linear;
    }

    .topic-scroll {
        height: auto;
        overflow: visible;
        scroll-behavior: smooth;
        scroll-snap-type: none;
        overscroll-behavior: auto;
    }

    .topic-panel {
        display: block;
        min-height: 0;
        height: auto;
        overflow: visible;
        padding: 34px 16px;
        scroll-margin-top: calc(var(--topbar-height) + 54px + env(safe-area-inset-top));
        scroll-snap-align: none;
        scroll-snap-stop: normal;
        border-bottom: 1px solid #e0e8e8;
        background: #ffffff;
    }

    .topic-panel:nth-child(even) {
        background: #f2f7f6;
    }

    .topic-panel:last-child {
        padding-bottom: calc(var(--bottom-nav-space) + 22px + env(safe-area-inset-bottom));
    }

    .topic-hero {
        padding-top: 20px;
        background:
            linear-gradient(180deg, #ffffff 0%, #f4f9f8 100%);
    }

    .topic-content {
        display: grid;
        width: 100%;
        min-height: 0;
        margin: 0;
        gap: 16px;
    }

    .hero-layout,
    .topic-layout {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        gap: 16px;
        row-gap: 16px;
    }

    .topic-copy,
    .focus-panel,
    .topic-panel.is-visible .topic-copy,
    .topic-panel.is-visible .focus-panel {
        width: 100%;
        max-width: none;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .topic-panel.is-visible .topic-content {
        animation: none;
    }

    .eyebrow {
        min-height: 0;
        margin-bottom: 8px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: var(--accent);
        font-size: 11px;
        line-height: 1.3;
    }

    .topic-hero .eyebrow,
    .topic-hero .topic-copy .eyebrow,
    .topic-copy .eyebrow {
        background: transparent;
        color: var(--accent);
    }

    .topic-copy h1,
    .topic-copy h2,
    h1 {
        width: 100%;
        max-width: 22ch;
        margin-bottom: 12px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 36px;
        font-weight: 900;
        line-height: 1.02;
        overflow-wrap: normal;
        word-break: normal;
        text-wrap: balance;
    }

    .topic-copy h2 {
        margin-bottom: 8px;
        font-size: 30px;
        line-height: 1.06;
    }

    .topic-panel:not(.topic-hero) .topic-copy > .eyebrow {
        display: none;
    }

    .lead,
    .topic-copy p {
        max-width: 42rem;
        color: #616b74;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        text-wrap: pretty;
    }

    .signal-row {
        display: none;
    }

    .hero-action,
    body[data-visual-style="bold"] .hero-action {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        margin-top: 18px;
    }

    .hero-action p {
        display: none;
    }

    .hero-cta {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        padding: 9px 48px;
        border: 0;
        border-radius: 6px;
        background: var(--accent);
        color: #ffffff;
        font-weight: 900;
        cursor: pointer;
        box-shadow: none;
    }

    .hero-cta span:first-child {
        white-space: normal;
    }

    .hero-cta span:last-child {
        position: absolute;
        right: 10px;
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.16);
        color: #ffffff;
    }

    .focus-panel {
        display: grid;
        gap: 14px;
        padding: 20px 0 0;
        border: 0;
        border-top: 1px solid #dce6e6;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .service-details {
        display: block;
    }

    .service-details > summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 28px;
        align-items: center;
        gap: 12px;
        min-height: 48px;
        padding: 0;
        border-top: 1px solid #dce6e6;
        color: #273137;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.2;
        cursor: pointer;
        list-style: none;
    }

    .service-details > summary::-webkit-details-marker {
        display: none;
    }

    .service-details > summary::after {
        content: "+";
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background: #e2f1ee;
        color: var(--accent);
        font-size: 18px;
        font-weight: 800;
        line-height: 1;
    }

    .service-details[open] > summary::after {
        content: "\2212";
    }

    .service-details > .focus-panel {
        margin-top: 12px;
        padding-top: 0;
        border-top: 0;
    }

    .service-details .focus-head > span {
        display: none;
    }

    .service-details[open] > .focus-panel {
        animation: serviceDetailsIn 220ms ease both;
    }

    .focus-head span {
        display: inline-flex;
        min-height: 0;
        margin-bottom: 8px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: var(--accent);
        font-size: 11px;
        line-height: 1.3;
    }

    .focus-head strong {
        max-width: 25ch;
        color: #172023;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 22px;
        line-height: 1.12;
        text-wrap: balance;
    }

    .focus-list {
        gap: 0;
        border-top: 1px solid #e0e8e8;
    }

    .focus-list li {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
        min-height: 48px;
        padding: 9px 0;
        border: 0;
        border-bottom: 1px solid #e0e8e8;
        border-radius: 0;
        background: transparent;
    }

    .focus-list li:last-child {
        border-bottom: 0;
    }

    .focus-list b {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background: #dff1ee;
        color: #0f675f;
        font-size: 10px;
    }

    .focus-list span {
        color: #303940;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.35;
    }

    .topic-cta {
        width: 100%;
        min-height: 48px;
        margin-top: 2px;
        border: 0;
        border-radius: 6px;
        background: var(--accent);
        color: #ffffff;
        box-shadow: none;
    }

    .topic-progress {
        display: none;
    }

    .style-showcase {
        display: grid;
        grid-column: 1;
        gap: 9px;
        width: 100%;
        padding: 10px;
        border: 1px solid #d8e6e4;
        border-left: 3px solid var(--accent);
        border-radius: 8px;
        background: #ffffff;
        box-shadow: none;
        backdrop-filter: none;
    }

    .style-showcase-kicker {
        display: none;
    }

    .style-showcase p {
        color: #39434a;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
    }

    .style-switch {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        width: 100%;
        min-height: 44px;
        padding: 4px;
        overflow: hidden;
        border: 1px solid #d8e5e3;
        border-radius: 8px;
        background: #f0f5f4;
        box-shadow: none;
        transform: none;
    }

    .style-switch:hover {
        transform: none;
    }

    .style-switch-label {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        min-height: 34px;
        font-size: 13px;
        line-height: 1;
        text-align: center;
        transition: color 220ms ease;
    }

    .style-switch-label-minimal {
        grid-column: 1;
        grid-row: 1;
        color: #ffffff;
    }

    .style-switch-label-bold {
        grid-column: 2;
        grid-row: 1;
        color: #677179;
    }

    .style-switch-track {
        position: absolute;
        top: 4px;
        left: 4px;
        width: calc(50% - 4px);
        height: 34px;
        border-radius: 6px;
        background: var(--accent);
        box-shadow: none;
        transform: translateX(0);
        transition:
            transform 380ms var(--motion-ease),
            background 260ms ease;
    }

    .style-switch-thumb {
        display: none;
    }

    .order-screen {
        min-height: calc(100dvh - var(--topbar-height) - env(safe-area-inset-top));
        padding:
            24px
            calc(16px + env(safe-area-inset-right))
            calc(var(--bottom-nav-space) + 26px + env(safe-area-inset-bottom))
            calc(16px + env(safe-area-inset-left));
        overflow: visible;
        background: #f4f7f8;
    }

    .order-screen::before {
        display: none;
    }

    .order-form {
        gap: 15px;
        width: 100%;
        max-height: none;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--text);
        backdrop-filter: none;
    }

    .form-head .eyebrow {
        display: block;
        margin-bottom: 7px;
    }

    .form-head h2 {
        margin-bottom: 4px;
        color: var(--text);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 30px;
        line-height: 1.08;
        text-align: left;
        text-wrap: balance;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .field {
        position: relative;
        display: grid;
        gap: 6px;
        scroll-margin-top: calc(var(--topbar-height) + 12px + env(safe-area-inset-top));
        scroll-margin-bottom: calc(var(--bottom-nav-space) + 18px + env(safe-area-inset-bottom));
    }

    .field > span {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        border: 0;
        color: #354047;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.25;
        text-transform: none;
        white-space: normal;
    }

    .field > input,
    .field > select,
    .field > textarea,
    .custom-select-trigger {
        width: 100%;
        min-height: 48px;
        padding: 11px 12px;
        border: 1px solid #d5e1e1;
        border-radius: 7px;
        background: #ffffff;
        color: #111417;
        font-size: 16px;
        line-height: 1.3;
    }

    .field > textarea {
        min-height: 124px;
        max-height: 240px;
        resize: vertical;
    }

    .field > input:focus,
    .field > select:focus,
    .field > textarea:focus,
    .custom-select-trigger:focus-visible,
    .custom-select.is-open .custom-select-trigger {
        border-color: var(--accent);
        background: #ffffff;
        box-shadow: 0 0 0 3px var(--accent-soft);
    }

    .form-more {
        display: block;
        padding: 0;
        border-top: 1px solid #dfe7e7;
        border-bottom: 1px solid #dfe7e7;
    }

    .form-more > summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto 24px;
        align-items: center;
        gap: 8px;
        min-height: 50px;
        color: #273137;
        cursor: pointer;
        list-style: none;
    }

    .form-more > summary::-webkit-details-marker {
        display: none;
    }

    .form-more > summary strong {
        font-size: 14px;
    }

    .form-more > summary span {
        color: #788289;
        font-size: 12px;
    }

    .form-more > summary::after {
        content: "+";
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 999px;
        background: #e6f1ef;
        color: var(--accent);
        font-size: 17px;
        font-weight: 800;
        line-height: 1;
    }

    .form-more[open] > summary::after {
        content: "−";
    }

    .form-more > .form-grid {
        padding: 3px 0 15px;
    }

    .submit-button {
        min-height: 50px;
        border: 0;
        border-radius: 7px;
        background: var(--accent);
        color: #ffffff;
        font-size: 16px;
        box-shadow: none;
    }

    .form-status {
        min-height: 16px;
        max-height: none;
        font-size: 13px;
        line-height: 1.35;
    }

    .bottom-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 90;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        padding:
            6px
            calc(12px + env(safe-area-inset-right))
            calc(6px + env(safe-area-inset-bottom))
            calc(12px + env(safe-area-inset-left));
        overflow: visible;
        border: 0;
        border-top: 1px solid #dce5e5;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 -8px 28px rgba(20, 29, 38, 0.10);
        transform: none;
        backdrop-filter: none;
        transition:
            opacity 180ms ease,
            transform 260ms var(--motion-ease);
    }

    .bottom-nav::before {
        display: none;
    }

    .bottom-nav-button {
        min-height: 48px;
        border-radius: 7px;
        color: #68727a;
        font-size: 14px;
        text-transform: none;
        transform: none;
    }

    .bottom-nav-button.is-active {
        background: var(--accent);
        color: #ffffff;
        transform: none;
    }

    body.is-form-focused .bottom-nav,
    body[data-current-view="info"].is-hero-nav-hidden .bottom-nav {
        opacity: 0;
        transform: translateY(110%);
        pointer-events: none;
    }

    .status-popup {
        top: calc(var(--topbar-height) + 10px + env(safe-area-inset-top));
        width: calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
        min-height: 48px;
        border-radius: 7px;
        background: #172023;
        box-shadow: 0 14px 36px rgba(20, 29, 38, 0.22);
        backdrop-filter: none;
    }

    body[data-visual-style="bold"] {
        background: #070907;
    }

    body[data-visual-style="bold"] .topbar {
        border-bottom-color: #202520;
        background: #070907;
    }

    body[data-visual-style="bold"] .mobile-topic-nav {
        border-bottom-color: #252a25;
        background: rgba(7, 9, 7, 0.98);
    }

    body[data-visual-style="bold"] .mobile-topic-button {
        color: #aeb6ad;
    }

    body[data-visual-style="bold"] .mobile-topic-button.is-active {
        background: var(--accent);
        color: var(--ink);
    }

    body[data-visual-style="bold"] .mobile-topic-progress {
        background: #252a25;
    }

    body[data-visual-style="bold"] .topic-panel {
        border-bottom-color: rgba(7, 9, 7, 0.18);
    }

    body[data-visual-style="bold"] .topic-panel::before {
        display: none;
    }

    body[data-visual-style="bold"] .topic-hero {
        background-color: #050605;
        background-image:
            linear-gradient(180deg, rgba(5, 6, 5, 0.94) 0%, rgba(5, 6, 5, 0.86) 58%, rgba(5, 6, 5, 0.96) 100%),
            url("/static/$assets/sitecraft-digital-structure.webp");
        background-position: 68% center;
        background-size: cover;
        color: #ffffff;
    }

    body[data-visual-style="bold"] .topic-panel:nth-child(2) {
        background: #c9ff32;
        color: #090b09;
    }

    body[data-visual-style="bold"] .topic-panel:nth-child(3) {
        background: #ff6b4b;
        color: #090b09;
    }

    body[data-visual-style="bold"] .topic-panel:nth-child(4) {
        background: #8cecff;
        color: #090b09;
    }

    body[data-visual-style="bold"] .topic-copy h1,
    body[data-visual-style="bold"] .topic-copy h2,
    body[data-visual-style="bold"] h1 {
        font-family: "Arial Black", Arial, Helvetica, sans-serif;
        font-size: 38px;
        line-height: 0.98;
        overflow-wrap: normal;
        word-break: normal;
    }

    body[data-visual-style="bold"] .topic-copy h2 {
        font-size: 34px;
        line-height: 1;
    }

    body[data-visual-style="bold"] .topic-hero h1,
    body[data-visual-style="bold"] .topic-hero .lead {
        text-shadow: none;
    }

    body[data-visual-style="bold"] .lead,
    body[data-visual-style="bold"] .topic-copy p {
        color: rgba(9, 11, 9, 0.76);
        font-size: 16px;
        line-height: 1.5;
    }

    body[data-visual-style="bold"] .topic-hero .lead,
    body[data-visual-style="bold"] .topic-hero .topic-copy p {
        color: rgba(255, 255, 255, 0.82);
    }

    body[data-visual-style="bold"] .style-showcase {
        border-color: #303630;
        border-left-color: var(--accent);
        border-radius: 7px;
        background: #0d100d;
        box-shadow: none;
    }

    body[data-visual-style="bold"] .style-showcase p {
        color: #e0e5df;
    }

    body[data-visual-style="bold"] .style-switch {
        border-color: #343a34;
        border-radius: 7px;
        background: #181c18;
    }

    body[data-visual-style="bold"] .style-switch-track {
        border-radius: 5px;
        background: var(--accent);
        transform: translateX(100%);
    }

    body[data-visual-style="bold"] .style-switch-label-minimal {
        color: #a9b0a8;
    }

    body[data-visual-style="bold"] .style-switch-label-bold {
        color: var(--ink);
    }

    body[data-visual-style="bold"] .hero-cta {
        border: 0;
        border-radius: 5px;
        background: var(--accent);
        color: var(--ink);
        box-shadow: 0 4px 0 var(--coral);
    }

    body[data-visual-style="bold"] .hero-cta span:last-child {
        border-radius: 4px;
        background: var(--ink);
        color: var(--accent);
    }

    body[data-visual-style="bold"] .focus-panel {
        gap: 14px;
        padding: 16px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 6px;
        background: #0d100d;
        color: #ffffff;
        box-shadow: none;
    }

    body[data-visual-style="bold"] .service-details > summary {
        border-top-color: rgba(7, 9, 7, 0.22);
        color: #090b09;
    }

    body[data-visual-style="bold"] .service-details > summary::after {
        background: #0d100d;
        color: #ffffff;
    }

    body[data-visual-style="bold"] .topic-hero .service-details > summary {
        border-top-color: rgba(255, 255, 255, 0.18);
        color: #ffffff;
    }

    body[data-visual-style="bold"] .topic-hero .service-details > summary::after {
        background: var(--accent);
        color: var(--ink);
    }

    body[data-visual-style="bold"] .focus-head span {
        min-height: 22px;
        margin-bottom: 9px;
        padding: 3px 7px;
        border-radius: 4px;
        background: var(--accent);
        color: var(--ink);
        font-size: 9px;
    }

    body[data-visual-style="bold"] .focus-head strong {
        color: #ffffff;
        font-family: "Arial Black", Arial, Helvetica, sans-serif;
        font-size: 22px;
        line-height: 1.04;
    }

    body[data-visual-style="bold"] .focus-list {
        border-top-color: rgba(255, 255, 255, 0.16);
    }

    body[data-visual-style="bold"] .focus-list li {
        border-bottom-color: rgba(255, 255, 255, 0.14);
    }

    body[data-visual-style="bold"] .focus-list b {
        border-radius: 4px;
        background: var(--accent);
        color: var(--ink);
    }

    body[data-visual-style="bold"] .focus-list span {
        color: rgba(255, 255, 255, 0.88);
    }

    body[data-visual-style="bold"] .topic-cta {
        border-radius: 5px;
        background: var(--accent);
        color: var(--ink);
        box-shadow: 0 4px 0 var(--coral);
    }

    body[data-visual-style="bold"] .order-screen {
        background:
            linear-gradient(rgba(255, 107, 75, 0.88), rgba(255, 107, 75, 0.88)),
            url("/static/$assets/sitecraft-digital-structure.webp");
        background-position: center;
        background-size: cover;
    }

    body[data-visual-style="bold"] .order-form {
        padding: 18px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 7px;
        background: #0d100d;
        color: #ffffff;
        box-shadow: none;
    }

    body[data-visual-style="bold"] .form-head h2 {
        color: #ffffff;
        font-family: "Arial Black", Arial, Helvetica, sans-serif;
    }

    body[data-visual-style="bold"] .field > span {
        color: var(--accent);
    }

    body[data-visual-style="bold"] .field > input,
    body[data-visual-style="bold"] .field > select,
    body[data-visual-style="bold"] .field > textarea,
    body[data-visual-style="bold"] .custom-select-trigger {
        border-color: #343a34;
        background: #181c18;
        color: #ffffff;
    }

    body[data-visual-style="bold"] .field > input:focus,
    body[data-visual-style="bold"] .field > select:focus,
    body[data-visual-style="bold"] .field > textarea:focus,
    body[data-visual-style="bold"] .custom-select-trigger:focus-visible,
    body[data-visual-style="bold"] .custom-select.is-open .custom-select-trigger {
        border-color: var(--accent);
        background: #1c211c;
    }

    body[data-visual-style="bold"] .form-more {
        border-color: #343a34;
    }

    body[data-visual-style="bold"] .form-more > summary {
        color: #ffffff;
    }

    body[data-visual-style="bold"] .form-more > summary span {
        color: #99a098;
    }

    body[data-visual-style="bold"] .form-more > summary::after {
        background: #252b25;
        color: var(--accent);
    }

    body[data-visual-style="bold"] .submit-button {
        border-radius: 5px;
        background: var(--accent);
        color: var(--ink);
        box-shadow: 0 4px 0 var(--coral);
    }

    body[data-visual-style="bold"] .bottom-nav {
        border-top-color: #242924;
        background: rgba(7, 9, 7, 0.98);
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.28);
    }

    body[data-visual-style="bold"] .bottom-nav-button {
        color: #b8bfb7;
    }

    body[data-visual-style="bold"] .bottom-nav-button.is-active {
        background: var(--accent);
        color: var(--ink);
    }
}

@media (max-width: 340px) {
    .mobile-topic-button {
        padding-right: 0;
        padding-left: 0;
        font-size: 11px;
    }

    .topic-copy h1,
    h1 {
        font-size: 32px;
    }

    .topic-copy h2 {
        font-size: 28px;
    }

    body[data-visual-style="bold"] .topic-copy h1,
    body[data-visual-style="bold"] h1 {
        font-size: 34px;
    }

    body[data-visual-style="bold"] .topic-copy h2 {
        font-size: 30px;
    }

}

@media (max-width: 940px) and (max-height: 500px) and (orientation: landscape) {
    :root {
        --topbar-height: 44px;
        --bottom-nav-space: 58px;
    }

    .topbar {
        padding-right: calc(24px + env(safe-area-inset-right));
        padding-left: calc(24px + env(safe-area-inset-left));
    }

    .mobile-topic-tabs {
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .mobile-topic-button {
        min-height: 44px;
    }

    .topic-panel {
        padding: 24px calc(24px + env(safe-area-inset-right)) 28px calc(24px + env(safe-area-inset-left));
    }

    .order-screen {
        padding-right: calc(24px + env(safe-area-inset-right));
        padding-left: calc(24px + env(safe-area-inset-left));
    }

    .style-showcase {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
        align-items: center;
        gap: 16px;
    }

    .topic-copy h1,
    h1 {
        max-width: 18ch;
        font-size: 38px;
    }

    .topic-copy h2 {
        font-size: 32px;
    }

    .bottom-nav {
        right: auto;
        left: 50%;
        width: min(380px, calc(100% - 32px));
        border: 1px solid #dce5e5;
        border-bottom: 0;
        border-radius: 8px 8px 0 0;
        transform: translateX(-50%);
    }

    body.is-form-focused .bottom-nav,
    body[data-current-view="info"].is-hero-nav-hidden .bottom-nav {
        transform: translate(-50%, 110%);
    }

    body[data-visual-style="bold"] .bottom-nav {
        border-color: #242924;
    }
}

@media (prefers-contrast: more) {
    .mobile-topic-nav,
    .topbar,
    .bottom-nav,
    .style-showcase,
    .field > input,
    .field > select,
    .field > textarea {
        border-color: currentColor;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-topic-tabs,
    .topic-scroll,
    html {
        scroll-behavior: auto;
    }

    .mobile-topic-progress > span,
    .bottom-nav,
    .style-switch-track {
        transition-duration: 0.01ms;
    }

    .service-details[open] > .focus-panel {
        animation: none;
    }
}

@keyframes serviceDetailsIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}