/*!
 * ThatWorx live showcase hero
 *
 * Welcome to the Refractory Factory.
 * If you're looking for the old breakpoint hacks, they were given a tasteful burial.
 */

/* Shared contrast rules for dark repositioned sections. */
.page-template-page-public-sector .twx-section h2,
.page-template-page-public-sector .twx-section h3,
.page-template-page-public-sector .twx-card h2,
.page-template-page-public-sector .twx-card h3,
.home .twx-capabilities h2,
.home .twx-capabilities h3,
.home .twx-experience h2,
.home .twx-partners h2,
.home .twx-partners h3,
.home .twx-local-launch h2,
.home .twx-local-launch h3 { color: #f5f7fb; }

.page-template-page-public-sector .twx-section p,
.page-template-page-public-sector .twx-card p,
.page-template-page-public-sector .twx-section li,
.home .twx-capabilities .twx-section__lede,
.home .twx-capabilities .twx-card p,
.home .twx-experience p:not(.twx-eyebrow),
.home .twx-partners .twx-section__lede,
.home .twx-partners .twx-card p,
.home .twx-local-launch .twx-section__lede,
.home .twx-local-launch p:not(.twx-eyebrow) { color: #cbd5e1; }

.page-template-page-public-sector .twx-section .twx-eyebrow,
.home .twx-capabilities .twx-eyebrow,
.home .twx-experience .twx-eyebrow,
.home .twx-partners .twx-eyebrow,
.home .twx-local-launch .twx-eyebrow { color: #2478ff; }

.lead-cta .twx-eyebrow { color: #fff; opacity: 0.92; }

/* Live showcase component. */
.hero-live-showcase { max-width: none; min-height: 0; position: relative; width: 100%; }
.hero-live-showcase::after { display: none; }
.hero-live-showcase__stage { padding-bottom: 3.25rem; position: relative; }
.hero-live-showcase__browser { background: #070b10; border: 1px solid rgba(7,11,16,.18); border-radius: 1.25rem; box-shadow: 0 34px 80px rgba(5,12,22,.28); overflow: hidden; position: relative; width: calc(100% - 2.5rem); }
.hero-live-showcase__bar { align-items: center; background: #0b111a; display: flex; gap: .42rem; height: 38px; padding: 0 .85rem; }
.hero-live-showcase__bar > span { background: rgba(255,255,255,.2); border-radius: 999px; flex: 0 0 7px; height: 7px; }
.hero-live-showcase__url { color: rgba(255,255,255,.66); font-size: .7rem; font-weight: 700; margin-left: .45rem; max-width: calc(100% - 68px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-live-showcase__desktop { aspect-ratio: 16/10; background: #fff; overflow: hidden; position: relative; }
.hero-live-showcase__desktop iframe { border: 0; height: 900px; left: 0; opacity: 1; pointer-events: auto; position: absolute; top: 0; transform-origin: top left; transition: opacity 320ms ease; width: 1440px; }

/* The phone is decoration. The desktop preview gets the mouse because sharing is overrated. */
.hero-live-showcase__phone { aspect-ratio: 390/844; background: #fff; border: 8px solid #0b111a; border-radius: 1.55rem; bottom: 1.25rem; box-shadow: 0 24px 54px rgba(5,12,22,.34); overflow: hidden; pointer-events: none; position: absolute; right: 0; width: clamp(135px,26%,190px); z-index: 3; }
.hero-live-showcase__phone-top { background: #0b111a; border-radius: 0 0 999px 999px; height: 16px; left: 50%; position: absolute; top: 0; transform: translateX(-50%); width: 42%; z-index: 2; }
.hero-live-showcase__phone iframe { border: 0; height: 844px; left: 0; opacity: 1; position: absolute; top: 0; transform-origin: top left; transition: opacity 320ms ease; width: 390px; }
.hero-live-showcase__iframe--incoming { opacity: 0 !important; pointer-events: none !important; z-index: 2; }
.hero-live-showcase__iframe--outgoing { opacity: 0 !important; pointer-events: none !important; z-index: 1; }
.hero-live-showcase__badge { align-items: center; backdrop-filter: blur(10px); background: rgba(7,11,16,.92); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; bottom: 0; color: #fff; display: flex; font-size: .76rem; font-weight: 700; gap: .5rem; left: 1rem; max-width: calc(100% - 190px); padding: .68rem .9rem; position: absolute; text-decoration: none; z-index: 4; }
.hero-live-showcase__badge span:not(.hero-live-showcase__live-dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-live-showcase__badge strong { color: #5b9cff; flex: 0 0 auto; }
.hero-live-showcase__live-dot { background: #36d17c; border-radius: 50%; box-shadow: 0 0 0 4px rgba(54,209,124,.14); flex: 0 0 7px; height: 7px; }
.hero-live-showcase__dots { align-items: center; display: flex; gap: .48rem; justify-content: center; margin-top: .75rem; }
.hero-live-showcase__dots button { background: #c8d2df; border: 0; border-radius: 999px; cursor: pointer; height: 8px; padding: 0; transition: background-color 180ms ease,width 180ms ease; width: 8px; }
.hero-live-showcase__dots button[aria-pressed="true"] { background: #0b6bff; width: 26px; }

@media (prefers-reduced-motion: reduce) {
 .hero-live-showcase iframe { transition: none !important; }
}

/* Tablet gets one column and a proper showcase instead of desktop cosplay. */
@media (max-width:1100px) {
 .home .hero { padding-block: clamp(3rem,6vw,4.5rem); }
 .home .hero__grid { grid-template-columns: 1fr; gap: clamp(2rem,4vw,3rem); }
 .home .hero__content { margin-inline: auto; max-width: 760px; }
 .home .hero .hero__headline { max-width: 720px; }
 .home .hero__visual.hero-live-showcase { margin-inline: auto; max-width: none; min-height: 0; width: min(100%,780px); }
 .home .hero-live-showcase__stage { padding-bottom: 3rem; }
 .home .hero-live-showcase__browser { width: calc(100% - 5rem); }
 .home .hero-live-showcase__phone { bottom: 1.1rem; right: .25rem; width: clamp(120px,22%,165px); }
 .home .hero-live-showcase__badge { bottom: 0; left: .75rem; max-width: calc(100% - 185px); }
}

@media (min-width:768px) and (max-width:900px) {
 .home .hero__content { max-width: 680px; }
 .home .hero__visual.hero-live-showcase { width: min(100%,700px); }
 .home .hero-live-showcase__browser { width: calc(100% - 3rem); }
 .home .hero-live-showcase__phone { width: clamp(112px,20%,145px); }
}

/* Mobile is not desktop after three espressos. Give it its own layout. */
@media (max-width:767px) {
 :root { --twx-gutter-total: 32px; }
 .twx-container { max-width: none; width: calc(100% - 32px); }
 .site-header__inner { min-height: 76px; }
 .hero,.page-hero,.contact-section,.twx-section { overflow: hidden; }
 .home .hero { padding: 2.25rem 0 2.5rem; }
 .home .hero > .twx-container,.home .hero__grid { max-width: none; width: 100%; }
 .home .hero__grid { gap: 1.5rem; }
 .home .hero__content { padding-inline: 28px; }
 .home .hero__trust { margin-bottom: 0; }
 .hero__actions { display: grid; gap: 12px; grid-template-columns: 1fr; }
 .hero__actions .twx-button { justify-content: center; width: 100%; }

 /* All your base are belong to us. All your mobile width, too. */
 .home .hero__visual.hero-live-showcase { margin: 0; max-width: none; min-height: 0; padding: 0; width: 100%; }
 .home .hero-live-showcase__stage { display: flex; flex-direction: column; padding-bottom: 0; width: 100%; }
 .home .hero-live-showcase__browser { align-self: center; border-radius: 1rem; box-shadow: 0 18px 42px rgba(5,12,22,.18); width: calc(100% - 16px); }
 .home .hero-live-showcase__desktop { aspect-ratio: 16/10; }
 .home .hero-live-showcase__desktop iframe { pointer-events: none; }
 .home .hero-live-showcase__phone { display: none; }

 /* The preview gets the spotlight; the action sits politely underneath. */
 .home .hero-live-showcase__badge { align-self: center; bottom: auto; font-size: .74rem; left: auto; margin-top: .75rem; max-width: calc(100% - 48px); padding: .62rem .8rem; position: relative; transform: none; white-space: nowrap; }
 .home .hero-live-showcase__dots { margin-top: .6rem; }
 .hero-live-showcase__bar { height: 34px; }
 .contact-section__grid { grid-template-columns: 1fr; }
 .contact-section__card { min-width: 0; }
 .twx-lead-form input,.twx-lead-form select,.twx-lead-form textarea { max-width: 100%; width: 100%; }
 .mobile-cta-bar { left: 0; right: 0; width: 100%; }
}