/* The host retains one viewport; the original app keeps its own scrolling. */
body.trajkot-configurator-fullscreen.tjsc-configurator-intro-page main#main.trajkot-configurator-host {
    display: flex;
    flex-direction: column;
}

body.trajkot-configurator-fullscreen.tjsc-configurator-intro-page main#main.trajkot-configurator-host > .trajkot-site-embed {
    /* A zero flex basis also handles mobile-host.js assigning an inline height. */
    flex: 1 1 0;
    min-height: 0;
}

.tjsc-configurator-intro {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    flex: 0 0 auto;
    gap: 8px 20px;
    padding: 9px clamp(14px, 2.5vw, 36px);
    border-bottom: 1px solid var(--line, #deded7);
    background: var(--paper, #fffdf9);
    color: var(--ink, #17273f);
}

.tjsc-configurator-intro h1 {
    margin: 0;
    font: 600 17px/1.3 Arial, Helvetica, sans-serif;
    letter-spacing: 0;
}

.tjsc-configurator-intro p {
    max-width: 92ch;
    margin: 0;
    font: 400 12px/1.4 Arial, Helvetica, sans-serif;
}

html[data-tj-theme="dark"] .tjsc-configurator-intro {
    background: #111620;
    color: #eff1f5;
    border-bottom-color: #394152;
}

html[data-tjsc-private-config="true"] .tjsc-configurator-intro,
body.trajkot-site-notice-view .tjsc-configurator-intro {
    display: none;
}

/* The offer/error notice view already has an intentionally scrolling layout. */
body.trajkot-configurator-fullscreen.tjsc-configurator-intro-page.trajkot-site-notice-view main#main.trajkot-configurator-host {
    display: block;
}

@media (max-width: 760px) {
    .tjsc-configurator-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
        padding: 7px 14px;
    }

    .tjsc-configurator-intro h1 {
        font-size: 15px;
        line-height: 1.25;
    }

    .tjsc-configurator-intro p {
        font-size: 11.5px;
        line-height: 1.35;
    }
}