/* Compact desktop and tablet */
@media (max-width: 1200px) {
    .header-inner {
        gap: 25px;
    }
    .brand img {
        width: 185px;
    }
    .nav-links,
    .nav-actions {
        gap: 17px;
    }
    .primary-navigation {
        gap: 15px;
    }
    .primary-navigation a {
        font-size: 11px;
    }
    .hero-grid {
        gap: 36px;
    }
    .hero-copy h1 {
        font-size: 53px;
    }
    .hero-audience {
        gap: 25px;
    }
    .hero-audience > div {
        gap: 27px;
    }
    .split-section {
        gap: 55px;
    }
    .hero-copy .button {
        padding-inline: 17px;
    }
    .dashboard-body {
        padding: 20px 20px 0;
    }
    .dashboard-total {
        margin-inline: -20px;
        padding-inline: 20px;
    }
    .verification-note {
        margin-left: 24px;
    }
    .window-top {
        font-size: 8px;
    }
    .whmcs-benefits {
        gap: 20px;
    }
    .architecture {
        gap: 10px;
    }
    .faq-layout {
        gap: 55px;
    }
}
@media (max-width: 1024px) {
    .container {
        width: calc(100% - 48px);
    }
    .site-header {
        height: auto;
        min-height: 72px;
    }
    .header-inner {
        min-height: 72px;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0;
    }
    .menu-toggle:not([hidden]) {
        display: flex;
    }
    .primary-navigation {
        width: 100%;
        flex-basis: 100%;
        padding: 14px 0 24px;
        gap: 24px;
        align-items: flex-start;
    }
    .nav-links {
        flex-wrap: wrap;
        gap: 14px 24px;
    }
    .nav-actions {
        gap: 20px;
    }
    .js .primary-navigation {
        display: none;
    }
    .js .primary-navigation.is-open {
        display: flex;
        position: absolute;
        inset: 72px 0 auto;
        background: var(--tmh-navy);
        padding: 25px 24px 35px;
        max-height: calc(100dvh - 72px);
        overflow-y: auto;
        box-shadow: 0 15px 25px #07132630;
        flex-direction: column;
    }
    .js .primary-navigation .nav-links {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
    }
    .js .primary-navigation .nav-links > a {
        padding: 13px 0;
        border-bottom: 1px solid #31425b;
        font-size: 15px;
    }
    .js .primary-navigation .nav-actions {
        width: 100%;
        justify-content: space-between;
    }
    .js .primary-navigation .nav-actions a {
        font-size: 14px;
    }
    .hero {
        padding-top: 57px;
    }
    .hero-grid {
        gap: 28px;
        grid-template-columns: 1fr 1fr;
    }
    .hero-copy h1 {
        font-size: 44px;
    }
    .hero-description {
        font-size: 15px;
    }
    .hero-copy .eyebrow {
        font-size: 8px;
    }
    .hero-copy .button-row {
        gap: 10px;
    }
    .hero-copy .button {
        font-size: 11px;
        padding-inline: 12px;
        gap: 9px;
    }
    .hero-audience {
        flex-direction: column;
        gap: 14px;
        padding-top: 45px;
    }
    .hero-audience > div {
        gap: 38px;
        font-size: 12px;
    }
    .dashboard-heading h2 {
        font-size: 15px;
        gap: 7px;
    }
    .dashboard-heading > .icon-tile {
        width: 31px;
        height: 31px;
    }
    .dashboard-heading > .icon-tile .icon {
        width: 17px;
        height: 17px;
    }
    .dashboard-body {
        padding: 17px 15px 0;
    }
    .server-route {
        padding: 12px;
        gap: 8px;
    }
    .server-route strong {
        font-size: 11px;
    }
    .route-arrow {
        margin: 0;
    }
    .migration-stats strong {
        font-size: 23px;
    }
    .dashboard-total {
        margin-inline: -15px;
        padding-inline: 15px;
        gap: 8px;
    }
    .dashboard-total > span:last-child {
        font-size: 8px;
    }
    .verification-note {
        margin-left: 8px;
        margin-right: 8px;
        padding: 12px;
        gap: 8px;
    }
    .verification-note strong {
        font-size: 10px;
    }
    .verification-note div > span {
        font-size: 9px;
    }
    .verification-icon {
        padding: 6px;
    }
    .window-top > span:not(.demo-tag) {
        font-size: 7px;
    }
    .window-top {
        gap: 7px;
        padding-inline: 10px;
    }
    .window-top .demo-tag {
        font-size: 7px;
    }
    .section {
        padding: 75px 0;
    }
    .split-section {
        gap: 35px;
    }
    .section-copy h2 {
        font-size: 34px;
    }
    .section-copy p {
        font-size: 14px;
    }
    .steps {
        gap: 24px;
        grid-template-columns: repeat(3, 1fr);
    }
    .steps li:nth-child(3)::after {
        display: none;
    }
    .features-band .section-heading {
        display: block;
    }
    .features-band h2 {
        margin-top: 12px;
    }
    .feature-card {
        padding: 20px;
    }
    .feature-card h3 {
        font-size: 15px;
    }
    .feature-card p {
        font-size: 12px;
    }
    .discovery-summary {
        padding: 18px;
        flex-wrap: wrap;
    }
    .discovery-table-head,
    .discovery-row {
        padding-inline: 18px;
        grid-template-columns: 1fr 65px 25px;
    }
    .discovery-row {
        font-size: 11px;
    }
    .discovery-summary > .status {
        font-size: 8px;
    }
    .whmcs-intro {
        gap: 35px;
    }
    .whmcs-transfer {
        padding: 20px;
        margin-inline: 16px;
    }
    .whmcs-service {
        padding: 20px 16px;
        gap: 8px;
    }
    .whmcs-service strong {
        font-size: 12px;
    }
    .whmcs-service .icon-tile {
        width: 32px;
        height: 32px;
    }
    .whmcs-transfer h3 {
        font-size: 19px;
    }
    .whmcs-benefits {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
    .automation-flow {
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }
    .automation-flow li:nth-child(5)::after {
        display: none;
    }
    .comparison {
        gap: 20px;
        grid-template-columns: 0.8fr 1fr 1.2fr;
    }
    .comparison h3 {
        font-size: 25px;
    }
    .comparison ul {
        font-size: 11px;
    }
    .pricing-grid {
        gap: 20px;
    }
    .price-card,
    .calculator-card {
        padding: 28px;
    }
    .failed-pricing {
        gap: 16px;
    }
    .failed-pricing > .large-icon {
        display: none;
    }
    .revenue-example > div {
        padding: 23px;
    }
    .security-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .faq-layout {
        grid-template-columns: 0.8fr 1.2fr;
        gap: 35px;
    }
    .footer-grid {
        gap: 27px;
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }
    .platform-sidebar {
        width: 155px;
    }
}
/* Mobile */
@media (max-width: 767px) {
    .container {
        width: calc(100% - 40px);
    }
    h1 {
        font-size: 43px;
    }
    h2 {
        font-size: 32px;
    }
    .section {
        padding: 60px 0;
    }
    .hero {
        padding-top: 40px;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 37px;
    }
    .hero-copy {
        max-width: 550px;
    }
    .hero-copy h1 {
        font-size: clamp(40px, 8.2vw, 56px);
        max-width: 520px;
    }
    .hero-copy .eyebrow {
        font-size: 9px;
        margin-bottom: 20px;
    }
    .hero-description {
        font-size: 15px;
        max-width: 480px;
        margin-top: 20px;
    }
    .hero-price {
        margin-top: 20px;
    }
    .hero-copy .button {
        font-size: 12px;
        padding: 12px 16px;
        gap: 13px;
    }
    .hero-small {
        font-size: 11px;
    }
    .hero-small br {
        display: none;
    }
    .hero-visual {
        max-width: 550px;
        width: 100%;
        justify-self: center;
        padding: 0 3px 20px;
    }
    .dashboard-body {
        padding: 22px 21px 0;
    }
    .dashboard-heading h2 {
        font-size: 18px;
        gap: 10px;
    }
    .dashboard-heading > .icon-tile {
        width: 39px;
        height: 39px;
    }
    .server-route {
        padding: 16px 18px;
        margin-top: 18px;
    }
    .server-route strong {
        font-size: 13px;
    }
    .server-route small {
        font-size: 10px;
    }
    .migration-stats {
        margin-block: 23px;
    }
    .migration-stats strong {
        font-size: 26px;
    }
    .migration-stats span {
        font-size: 10px;
    }
    .window-top {
        height: 36px;
        padding-inline: 13px;
        gap: 10px;
    }
    .window-top > span:not(.demo-tag) {
        font-size: 9px;
    }
    .window-top .demo-tag {
        font-size: 8px;
    }
    .account-list strong {
        font-size: 11px;
    }
    .dashboard-total {
        margin-inline: -21px;
        padding-inline: 21px;
    }
    .dashboard-total > span:last-child {
        font-size: 9px;
    }
    .verification-note {
        margin-inline: 12px;
        padding: 14px;
    }
    .verification-note strong {
        font-size: 11px;
    }
    .verification-note div > span {
        font-size: 10px;
    }
    .hero-audience {
        padding-top: 36px;
        padding-bottom: 25px;
        gap: 16px;
        text-align: center;
    }
    .hero-audience > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 27px;
        font-size: 11px;
    }
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 9px 0;
    }
    .trust-grid > div {
        padding: 19px 0;
    }
    .trust-grid > div:nth-child(2) {
        border-right: 0;
    }
    .trust-grid > div:nth-child(-n + 2) {
        border-bottom: 1px solid var(--tmh-border);
    }
    .trust-grid strong {
        font-size: 27px;
    }
    .trust-grid span {
        font-size: 10px;
    }
    .section-heading {
        margin-bottom: 32px;
    }
    .section-heading p {
        font-size: 14px;
    }
    .section-heading p br {
        display: none;
    }
    .eyebrow {
        font-size: 9px;
    }
    .steps {
        grid-template-columns: 1fr 1fr;
        gap: 29px 25px;
    }
    .steps li:nth-child(3)::after {
        display: block;
    }
    .steps li:nth-child(2n)::after {
        display: none;
    }
    .steps p {
        font-size: 12px;
    }
    .features-band {
        margin-top: 45px;
        padding-top: 40px;
    }
    .features-band h2 {
        font-size: 27px;
    }
    .feature-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .feature-card {
        padding: 18px;
    }
    .feature-card h3 {
        font-size: 14px;
        line-height: 1.4;
    }
    .feature-card p {
        font-size: 11px;
    }
    .split-section {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .section-copy h2 {
        font-size: 32px;
    }
    .section-copy p {
        font-size: 14px;
        margin-top: 18px;
    }
    .shared-visual {
        order: 2;
    }
    .section-copy .check-list {
        margin-top: 20px;
    }
    .preview-panel {
        width: 100%;
        max-width: 550px;
        margin-inline: auto;
    }
    .discovery-summary {
        padding: 21px;
    }
    .discovery-table-head,
    .discovery-row {
        padding-inline: 21px;
        grid-template-columns: 1fr 75px 28px;
    }
    .discovery-row {
        font-size: 12px;
    }
    .discovery-summary > .status {
        font-size: 9px;
    }
    .whmcs-preview {
        max-width: 550px;
        width: 100%;
        margin-inline: auto;
        transform: none;
    }
    .whmcs-transfer {
        padding: 25px;
    }
    .whmcs-service {
        padding: 22px;
    }
    .whmcs-benefits {
        grid-template-columns: 1fr 1fr;
        gap: 28px 25px;
        margin-top: 40px;
        padding-top: 30px;
    }
    .whmcs-benefits h3 {
        font-size: 14px;
    }
    .whmcs-benefits p {
        font-size: 12px;
    }
    .automation-flow {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .automation-flow li:nth-child(5)::after {
        display: block;
    }
    .automation-flow li:nth-child(3n)::after {
        display: none;
    }
    .comparison {
        grid-template-columns: 1fr 1fr;
        gap: 28px 16px;
        margin-top: 35px;
        padding-top: 30px;
    }
    .comparison-heading {
        grid-column: 1/-1;
    }
    .comparison h3 {
        font-size: 27px;
    }
    .comparison h3 br {
        display: none;
    }
    .comparison ul {
        font-size: 11px;
        line-height: 1.8;
    }
    .comparison h4 {
        font-size: 12px;
    }
    .comparison-automated li {
        align-items: flex-start;
    }
    .comparison-automated .icon {
        margin-top: 3px;
        width: 12px;
        height: 12px;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .price-card,
    .calculator-card {
        padding: 28px;
    }
    .price-card .big-price {
        font-size: 83px;
    }
    .price-card > .small-note {
        font-size: 11px;
    }
    .calculator-card > .small-note {
        font-size: 11px;
    }
    .calculator-results > div {
        font-size: 12px;
    }
    .pricing-examples {
        display: flex;
        flex-direction: column;
        gap: 0;
        border: 1px solid var(--tmh-border);
        border-radius: 8px;
        background: white;
        overflow: hidden;
        margin-top: 20px;
    }
    .pricing-examples > div {
        border: 0;
        border-bottom: 1px solid var(--tmh-border);
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
    }
    .pricing-examples > div:last-child {
        border: 0;
    }
    .pricing-examples strong {
        margin: 0;
        font-size: 17px;
    }
    .pricing-examples span {
        font-size: 12px;
    }
    .failed-pricing {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        margin-top: 30px;
        padding-top: 25px;
    }
    .failed-pricing p {
        max-width: none;
    }
    .wallet-example {
        padding: 17px 20px;
    }
    .wallet-example dl {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        margin-top: 10px;
    }
    .wallet-example dl > div {
        flex-direction: column;
        gap: 4px;
        font-size: 12px;
    }
    .revenue-example > div {
        padding: 21px;
    }
    .revenue-example strong {
        font-size: 26px;
    }
    .code-panel pre {
        font-size: 10px;
    }
    .architecture {
        gap: 10px;
        font-size: 10px;
        flex-direction: column;
        padding: 25px;
        margin-top: 30px;
    }
    .architecture .icon {
        transform: rotate(90deg);
    }
    .platform-preview {
        margin-top: 35px;
    }
    .platform-sidebar {
        display: none;
    }
    .platform-main {
        padding: 0 19px 23px;
    }
    .platform-main .preview-top {
        font-size: 11px;
    }
    .admin-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 17px;
        margin-block: 22px;
    }
    .admin-stats strong {
        font-size: 23px;
    }
    .preview-caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 17px;
    }
    .preview-caption p {
        font-size: 12px;
    }
    .security-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .security-card h3 {
        font-size: 16px;
    }
    .security-card p {
        font-size: 13px;
        margin-top: 8px;
    }
    .security-card .icon-tile {
        width: 42px;
        height: 42px;
    }
    .compatibility-grid {
        grid-template-columns: 1fr;
    }
    .supported-panel {
        padding: 27px;
    }
    .roadmap-panel {
        padding: 23px;
    }
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .faq-layout .section-copy {
        position: static;
    }
    .faq-toggle {
        font-size: 13px;
        padding-block: 19px;
    }
    .faq-answer p {
        font-size: 13px;
        padding-right: 15px;
    }
    .final-cta {
        padding: 60px 0;
    }
    .final-cta h2 {
        font-size: 34px;
    }
    .final-cta p {
        font-size: 14px;
    }
    .final-cta .button-row {
        flex-direction: column;
        align-items: stretch;
        max-width: 340px;
        margin-inline: auto;
    }
    .final-cta .cta-small {
        max-width: 280px;
        margin-inline: auto;
        line-height: 2;
    }
    .cta-small > span {
        padding: 0 4px;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }
    .footer-about {
        grid-column: 1/-1;
    }
    .site-footer {
        padding-top: 45px;
    }
    .footer-grid h2 {
        font-size: 12px;
        margin-bottom: 18px;
    }
    .footer-grid > div > a:not(.brand) {
        font-size: 12px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        font-size: 10px;
        margin-top: 30px;
        padding-block: 20px;
    }
    .document-hero {
        padding: 45px 0;
    }
    .document-hero h1 {
        font-size: 36px;
    }
    .document-hero p {
        font-size: 14px;
    }
    .document-content {
        padding-block: 40px 60px;
    }
    .document-content p,
    .document-content ul,
    .document-content ol {
        font-size: 14px;
    }
    .error-section {
        padding: 75px 0 85px;
    }
    .error-section h1 {
        font-size: 33px;
    }
}
@media (max-width: 374px) {
    .container {
        width: calc(100% - 32px);
    }
    .hero-copy h1 {
        font-size: 37px;
    }
    .hero-copy .button-row {
        align-items: stretch;
        flex-direction: column;
    }
    .window-top > span:not(.demo-tag) {
        font-size: 7px;
    }
    .dashboard-body {
        padding-inline: 15px;
    }
    .dashboard-total {
        margin-inline: -15px;
        padding-inline: 15px;
    }
    .dashboard-heading h2 {
        font-size: 16px;
        gap: 7px;
    }
    .dashboard-total > span:last-child {
        font-size: 8px;
    }
    .verification-note {
        margin-inline: 0;
        gap: 7px;
        padding: 12px;
    }
    .verification-note strong {
        font-size: 10px;
    }
    .account-list strong {
        font-size: 10px;
    }
    .feature-grid {
        grid-template-columns: 1fr;
    }
    .feature-card p {
        font-size: 12px;
    }
    .account-input > span {
        font-size: 9px;
    }
    .price-card,
    .calculator-card {
        padding: 23px;
    }
    .whmcs-mini-flow {
        padding-inline: 17px;
        font-size: 9px;
    }
    .discovery-total span {
        font-size: 9px;
    }
}