.te-page {
    color: var(--sys-gray-800);
}

.te-subnav {
    background: #fff;
    border-bottom: 1px solid #e6eef5;
    position: sticky;
    top: 4.25rem;
    z-index: 20;
}

.te-subnav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.te-subnav-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--sys-navy);
    text-decoration: none;
    white-space: nowrap;
}

.te-subnav-brand strong {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.1;
}

.te-subnav-brand small {
    display: block;
    margin-top: 0.12rem;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 500;
}

.te-subnav-mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    background: #e7f6f4;
    color: #0f766e;
}

.te-subnav-mark .hp-icon {
    width: 1.05rem;
    height: 1.05rem;
}

.te-subnav .product-anchor-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.15rem;
    margin: 0;
    overflow-x: auto;
}

.te-page .product-anchor-link {
    border: 0;
    background: transparent;
    color: #334155;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    transition: background 180ms ease, color 180ms ease;
}

.te-page .product-anchor-link:hover {
    background: #e7f6f4;
    color: #0f766e;
}

.te-page .product-anchor-link.is-current {
    background: #e7f6f4;
    color: #0f766e;
    box-shadow: inset 0 -2px 0 #0f766e;
}

.te-page .product-anchor-link:focus-visible,
.te-subnav-brand:focus-visible {
    outline: 2px solid #0f766e;
    outline-offset: 2px;
}

#overview,
#highlights,
#workflow,
#pricing,
#faq,
#comparison,
#explore {
    scroll-margin-top: 8.25rem;
}

.te-hero {
    position: relative;
    padding: 1.05rem 0 2.6rem;
    background: url("/images/products/travel-erp/travel-erp-hero-bg.webp?v=10") 88% 42% / cover no-repeat;
}

.te-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4.75rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 88%);
    pointer-events: none;
}

.te-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
    gap: 2.25rem;
    align-items: center;
}

.te-hero-copy {
    position: relative;
}

.te-hero-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -2.4rem -5.5rem -2.2rem -2.8rem;
    background: radial-gradient(115% 95% at 22% 46%, rgba(247, 251, 254, 0.9) 0%, rgba(247, 251, 254, 0.62) 38%, rgba(247, 251, 254, 0.22) 64%, rgba(247, 251, 254, 0) 80%);
    filter: blur(14px);
    pointer-events: none;
}

.te-showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 2rem;
    align-items: center;
}

.te-showcase-flip {
    direction: rtl;
}

.te-showcase-flip > * {
    direction: ltr;
}

.te-kicker {
    margin: 0 0 0.4rem;
    color: var(--sys-teal);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.te-hero h1,
.te-showcase h2,
.te-section-head h2,
.te-final h2 {
    font-family: var(--sys-font-display);
    color: var(--sys-navy);
    letter-spacing: -0.02em;
}

.te-hero h1 {
    font-size: clamp(2.15rem, 3.4vw, 3.15rem);
    font-weight: 650;
    line-height: 1.05;
    margin: 0 0 0.55rem;
    color: #07182e;
}

.te-hero h1 span {
    color: #0b6b63;
}

.te-hero .te-kicker {
    margin-bottom: 0.3rem;
    color: #0b6b63;
}

.te-hero .te-lead {
    max-width: 32rem;
    margin-bottom: 0.85rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #24384c;
}

.te-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.te-hero-actions .btn {
    min-height: 44px;
    padding: 0.5rem 1.15rem;
    border-radius: 0.55rem;
    font-weight: 650;
}

.te-hero-actions .btn-outline-primary {
    background: #fff;
}

.te-hero-actions .btn:focus-visible {
    outline: 2px solid var(--sys-navy);
    outline-offset: 2px;
}

.te-lead,
.te-section-head p,
.te-card p,
.te-feature-list span {
    color: var(--sys-gray-600);
}

.te-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0.7rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: #1a2e42;
}

.te-hero-points li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.86rem;
}

.te-hero-points li::before {
    content: "";
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%230F766E'/%3E%3Cpath d='M4.4 8.1 6.7 10.4 11.6 5.6' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.te-section {
    padding: 2.75rem 0;
}

#highlights.te-section {
    padding: 1.15rem 0 2.15rem;
    background: #fff;
}

#highlights .te-section-head {
    margin-bottom: 1.05rem;
}

#highlights .te-section-head h2 {
    color: var(--sys-navy);
    font-size: clamp(1.75rem, 2vw, 2rem);
    font-weight: 650;
    letter-spacing: -0.02em;
}

#highlights .te-section-head p {
    margin: 0;
    color: #5b6b7c;
    font-size: 0.92rem;
}

#highlights .te-hl-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.05rem;
    align-items: stretch;
}

.te-hl-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-height: 7rem;
    height: 100%;
    padding: 1.15rem 1.2rem;
    background: #fff;
    border: 1px solid #e6eef4;
    border-radius: 0.7rem;
    box-shadow: 0 1px 2px rgba(11, 31, 58, 0.04);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.te-hl-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(11, 31, 58, 0.08);
}

.te-hl-icon {
    display: grid;
    place-items: center;
    flex: 0 0 2.9rem;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 0.72rem;
    color: #064e49;
    background: #dcefed;
}

.te-hl-icon-blue {
    color: #1e40af;
    background: #e4eafc;
}

.te-hl-icon .hp-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.te-hl-icon .hp-icon path,
.te-hl-icon .hp-icon circle,
.te-hl-icon .hp-icon rect,
.te-hl-icon .hp-icon ellipse {
    stroke-width: 2.15;
}

.te-hl-icon .hp-icon.te-hl-team {
    width: 1.7rem;
    height: 1.7rem;
}

.te-hl-icon .hp-icon.te-hl-team path,
.te-hl-icon .hp-icon.te-hl-team circle {
    stroke-width: 1.65;
}

.te-hl-card h3 {
    color: var(--sys-navy);
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.3;
    margin: 0 0 0.28rem;
}

.te-hl-card p {
    margin: 0;
    color: #5c6d7e;
    font-size: 0.84rem;
    line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
    .te-hl-card {
        transition: none;
    }

    .te-hl-card:hover {
        transform: none;
    }
}

.te-showcase-alt,
.te-pricing {
    background: var(--sys-gray-50);
}

.te-section-head {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto 1.5rem;
}

.te-section-head h2,
.te-showcase h2 {
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    margin-bottom: 0.4rem;
}

.te-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.te-card {
    background: #fff;
    border: 1px solid var(--sys-gray-100);
    border-radius: 0.9rem;
    box-shadow: var(--sys-shadow-sm);
    padding: 1rem 1rem 0.9rem;
}

.te-card h3,
.te-feature-list strong {
    color: var(--sys-navy);
    font-size: 0.98rem;
    margin: 0 0 0.25rem;
}

.te-card p,
.te-feature-list span {
    margin: 0;
    font-size: 0.88rem;
}

.te-card-icon {
    display: block;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.55rem;
    border-radius: 0.55rem;
    background: var(--sys-teal-soft);
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.18);
}

.te-sales .te-showcase-grid {
    grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr);
    gap: 2.25rem;
    align-items: start;
}

.te-sales {
    padding: 3rem 0 2.7rem;
    background: #f5f9fc;
}

.te-sales h2 {
    max-width: none;
    font-size: 1.95rem;
    line-height: 1.15;
    color: var(--sys-navy);
}

.te-sales h2 span {
    display: block;
    white-space: nowrap;
}

.te-sales .te-lead {
    max-width: 34rem;
    font-size: 0.98rem;
    color: #24384c;
}

.te-sales-list {
    list-style: none;
    margin: 1.15rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.95rem;
}

.te-sales-list li {
    display: flex;
    gap: 0.85rem;
    align-items: center;
}

.te-sales-list .te-sales-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.85rem;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 999px;
    color: #2563eb;
    background: #e4efff;
    line-height: 0;
}

.te-sales-icon .hp-icon {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0;
}

.te-sales-list strong {
    display: block;
    color: var(--sys-navy);
    font-size: 0.95rem;
    margin-bottom: 0.12rem;
}

.te-sales-list span {
    display: block;
    color: #334155;
    font-size: 0.86rem;
    line-height: 1.4;
}

.te-sales + .te-section {
    background: #fff;
}

.te-quote {
    padding: 3rem 0 2.7rem;
    background: #fff;
}

.te-quote .te-showcase-grid {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    gap: 2.15rem;
    align-items: center;
}

.te-quote h2 {
    max-width: none;
    font-size: 1.95rem;
    line-height: 1.15;
    color: var(--sys-navy);
}

.te-quote h2 span {
    display: block;
    white-space: nowrap;
}

.te-quote .te-lead {
    color: #334155;
    font-size: 0.95rem;
}

.te-quote .te-sales-icon {
    width: 3.05rem;
    height: 3.05rem;
    flex-basis: 3.05rem;
}

.te-quote .te-sales-icon .hp-icon {
    width: 1.45rem;
    height: 1.45rem;
}

.te-quote .te-preview {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.te-quote + .te-section {
    background: #f5f9fc;
}

.te-book {
    padding: 3rem 0 2.7rem;
    background: #f5f9fc;
}

.te-book .te-showcase-grid {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    gap: 2.15rem;
    align-items: center;
}

.te-book h2 {
    max-width: none;
    font-size: 1.9rem;
    line-height: 1.15;
    color: var(--sys-navy);
}

.te-book h2 span {
    display: block;
    white-space: nowrap;
}

.te-book .te-lead {
    color: #334155;
    font-size: 0.95rem;
}

.te-book .te-sales-icon {
    width: 3.05rem;
    height: 3.05rem;
    flex-basis: 3.05rem;
}

.te-book .te-preview {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.te-book + .te-section {
    background: #fff;
}

.te-cx {
    padding: 1.7rem 0 1.5rem;
    background: #fff;
}

.te-cx .te-showcase-grid {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
    gap: 1.5rem;
    align-items: stretch;
}

.te-cx .te-stage {
    order: 0;
    display: flex;
}

.te-cx h2 {
    max-width: none;
    font-size: 1.7rem;
    line-height: 1.12;
    margin-bottom: 0.28rem;
}

.te-cx h2 span {
    display: block;
    white-space: nowrap;
}

.te-cx .te-lead {
    color: #334155;
    font-size: 0.88rem;
    line-height: 1.35;
    margin-bottom: 0;
}

.te-cx .te-showcase-grid > div:first-child {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.te-cx .te-sales-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.55rem;
    margin-top: 0.55rem;
}

.te-cx .te-sales-list li {
    gap: 0.6rem;
    align-items: flex-start;
}

.te-cx .te-sales-icon {
    margin-top: 0.05rem;
}

.te-cx .te-sales-list span {
    font-size: 0.78rem;
    line-height: 1.25;
}

.te-cx .te-sales-list strong {
    margin-bottom: 0.04rem;
}

.te-cx .te-sales-icon {
    width: 2.15rem;
    height: 2.15rem;
    flex-basis: 2.15rem;
}

.te-cx .te-sales-icon .hp-icon {
    width: 1.35rem;
    height: 1.35rem;
    stroke-width: 2.1;
}

.te-cx .te-preview {
    flex: 1;
    display: flex;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.te-cx + .te-section {
    background: #f5f9fc;
}

.te-fin {
    padding: 3rem 0;
    background: #f5f9fc;
}

.te-fin .te-showcase-grid {
    grid-template-columns: minmax(0, 0.41fr) minmax(0, 0.59fr);
    gap: 2.15rem;
    align-items: stretch;
}

.te-fin h2 {
    max-width: none;
    font-size: 1.95rem;
    line-height: 1.14;
    margin-bottom: 0.35rem;
}

.te-fin h2 span {
    display: block;
}

.te-fin .te-lead {
    color: #334155;
    font-size: 0.94rem;
    line-height: 1.4;
    margin-bottom: 0;
}

.te-fin .te-showcase-grid > div:first-child {
    display: flex;
    flex-direction: column;
}

.te-fin .te-sales-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.35rem;
    margin-top: 0.65rem;
}

.te-fin .te-sales-list li {
    gap: 0.65rem;
    align-items: flex-start;
}

.te-fin .te-sales-icon {
    width: 2.8rem;
    height: 2.8rem;
    flex-basis: 2.8rem;
    margin-top: 0.05rem;
}

.te-fin .te-sales-icon .hp-icon {
    width: 1.35rem;
    height: 1.35rem;
    stroke-width: 2.1;
}

.te-fin .te-sales-list span {
    font-size: 0.8rem;
    line-height: 1.3;
}

.te-fin .te-sales-list strong {
    margin-bottom: 0.08rem;
}

.te-fin .te-stage {
    display: flex;
}

.te-fin .te-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
}

.te-fin-dash {
    display: grid;
    flex: 1;
    grid-template-columns: 8.6rem minmax(0, 1fr);
    min-width: 0;
    background: #fff;
    border: 1px solid #e3ebf3;
    border-radius: 0.8rem;
    box-shadow: 0 14px 30px rgba(11, 31, 58, 0.08);
    overflow: hidden;
    color: var(--sys-navy);
    font-size: 0.68rem;
}

.te-fin-dash aside {
    background: #0b1f3a;
    color: #dbe7f5;
    padding: 0.7rem 0.45rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
}

.te-fin-dash aside img {
    display: block;
    height: 1.7rem;
    width: auto;
    max-width: 100%;
    margin: 0 0.15rem 0.45rem;
    object-fit: contain;
    object-position: left center;
    mix-blend-mode: screen;
}

.te-fin-dash aside span {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.28rem 0.32rem;
    border-radius: 0.35rem;
    color: #d5e2f0;
}

.te-fin-dash aside .hp-icon {
    width: 0.78rem;
    height: 0.78rem;
    flex: 0 0 auto;
}

.te-fin-dash aside .is-active {
    background: #0f766e;
    color: #fff;
    font-weight: 700;
}

.te-fin-main {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.7rem 0.75rem 0.65rem;
}

.te-fin-main header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.te-fin-main header strong {
    font-size: 0.95rem;
}

.te-fin-main header span {
    border: 1px solid #d7e2ee;
    border-radius: 0.35rem;
    padding: 0.18rem 0.45rem;
    color: #475569;
    white-space: nowrap;
}

.te-fin-main header span::after {
    content: "▾";
    margin-left: 0.35rem;
    color: #94a3b8;
}

.te-fin-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
}

.te-fin-metrics article {
    border: 1px solid #e6eef5;
    border-radius: 0.4rem;
    background: #fbfcfe;
    padding: 0.42rem 0.45rem 0.36rem;
    min-width: 0;
}

.te-fin-metrics small,
.te-fin-metrics b,
.te-fin-metrics em {
    display: block;
}

.te-fin-metrics small {
    color: #64748b;
}

.te-fin-metrics b {
    margin: 0.12rem 0;
    font-size: 0.82rem;
    letter-spacing: -0.02em;
}

.te-fin-metrics em {
    font-style: normal;
    font-weight: 700;
    font-size: 0.62rem;
}

.te-fin-metrics .is-up { color: #15803d; }
.te-fin-metrics .is-down { color: #dc2626; }

.te-fin-main h3 {
    margin: 0.6rem 0 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.te-fin-table {
    overflow-x: auto;
}

.te-fin-dash table {
    width: 100%;
    border-collapse: collapse;
}

.te-fin-dash th,
.te-fin-dash td {
    text-align: left;
    padding: 0.32rem 0.28rem;
    border-bottom: 1px solid #eef3f7;
    white-space: nowrap;
}

.te-fin-dash th {
    color: #64748b;
    font-weight: 650;
}

.te-fin-dash td:nth-child(5),
.te-fin-dash th:nth-child(5) {
    text-align: right;
}

.te-fin-dash .is-receipt { color: #15803d; font-weight: 700; }
.te-fin-dash .is-supplier { color: #b45309; font-weight: 700; }
.te-fin-dash .is-expense { color: #1d4ed8; font-weight: 700; }
.te-fin-dash .is-refund { color: #be123c; font-weight: 700; }

.te-fin-dash .is-paid,
.te-fin-dash .is-pending {
    display: inline-block;
    border-radius: 999px;
    padding: 0.05rem 0.38rem;
    font-weight: 700;
}

.te-fin-dash .is-paid {
    background: #dcfce7;
    color: #15803d;
}

.te-fin-dash .is-pending {
    background: #ffedd5;
    color: #c2410c;
}

.te-fin + .te-section {
    background: #fff;
}

.te-adm {
    padding: 3rem 0;
    background: #fff;
}

.te-adm .te-showcase-grid {
    grid-template-columns: minmax(0, 0.59fr) minmax(0, 0.41fr);
    gap: 2.15rem;
    align-items: stretch;
}

.te-adm .te-stage {
    order: -1;
}

.te-adm .te-showcase-grid > div:first-child {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.te-adm h2 {
    max-width: none;
    font-size: 1.95rem;
    line-height: 1.14;
    margin-bottom: 0.35rem;
}

.te-adm h2 span { display: block; }

.te-adm .te-lead {
    color: #334155;
    font-size: 0.94rem;
    line-height: 1.4;
    margin-bottom: 0;
}

.te-adm .te-sales-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.15rem;
    margin-top: 0.45rem;
}

.te-adm .te-sales-list li {
    gap: 0.55rem;
    align-items: flex-start;
}

.te-adm .te-sales-icon {
    width: 2rem;
    height: 2rem;
    flex-basis: 2rem;
    margin-top: 0;
}

.te-adm .te-sales-icon .hp-icon {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 2.1;
}

.te-adm .te-sales-list span {
    font-size: 0.75rem;
    line-height: 1.2;
}

.te-adm .te-sales-list strong {
    margin-bottom: 0;
    font-size: 0.84rem;
    line-height: 1.2;
}

.te-adm .te-preview {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
}

.te-adm-dash {
    display: grid;
    grid-template-columns: 9.4rem minmax(0, 1fr);
    min-width: 0;
    background: #fff;
    border: 1px solid #e3ebf3;
    border-radius: 0.8rem;
    box-shadow: 0 14px 30px rgba(11, 31, 58, 0.08);
    overflow: hidden;
    color: var(--sys-navy);
    font-size: 0.68rem;
}

.te-adm-dash aside {
    background: #0b1f3a;
    color: #dbe7f5;
    padding: 0.7rem 0.45rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
}

.te-adm-dash aside img {
    display: block;
    height: 1.7rem;
    width: auto;
    max-width: 100%;
    margin: 0 0.1rem 0.4rem;
    object-fit: contain;
    object-position: left center;
    mix-blend-mode: screen;
}

.te-adm-dash aside span {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.26rem 0.32rem;
    border-radius: 0.35rem;
    color: #d5e2f0;
}

.te-adm-dash aside .hp-icon {
    width: 0.78rem;
    height: 0.78rem;
    flex: 0 0 auto;
}

.te-adm-dash aside .is-active {
    background: #0f766e;
    color: #fff;
    font-weight: 700;
}

.te-adm-main {
    min-width: 0;
    padding: 0.7rem 0.75rem 0.65rem;
}

.te-adm-main header,
.te-adm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.te-adm-main header strong {
    display: block;
    font-size: 0.95rem;
}

.te-adm-main header span {
    display: block;
    margin-top: 0.12rem;
    color: #64748b;
}

.te-adm-main header em,
.te-adm-head span {
    border: 1px solid #d7e2ee;
    border-radius: 0.35rem;
    padding: 0.18rem 0.45rem;
    color: #475569;
    font-style: normal;
    white-space: nowrap;
}

.te-adm-main header em::after {
    content: "▾";
    margin-left: 0.35rem;
    color: #94a3b8;
}

.te-adm-head span {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
    font-weight: 700;
}

.te-adm-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    margin: 0.55rem 0 0.6rem;
}

.te-adm-metrics article {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #e6eef5;
    border-radius: 0.4rem;
    background: #fbfcfe;
    padding: 0.4rem 0.4rem;
    min-width: 0;
}

.te-adm-metrics .hp-icon {
    width: 1rem;
    height: 1rem;
    color: #2563eb;
    flex: 0 0 auto;
}

.te-adm-metrics small,
.te-adm-metrics b { display: block; }
.te-adm-metrics small { color: #64748b; }
.te-adm-metrics b { font-size: 0.95rem; line-height: 1.1; }

.te-adm-main h3 {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
}

.te-adm-head { margin-bottom: 0.3rem; align-items: center; }

.te-adm-table { overflow-x: auto; }

.te-adm-dash table {
    width: 100%;
    border-collapse: collapse;
}

.te-adm-dash th,
.te-adm-dash td {
    text-align: left;
    padding: 0.3rem 0.25rem;
    border-bottom: 1px solid #eef3f7;
    white-space: nowrap;
}

.te-adm-dash th { color: #64748b; font-weight: 650; }

.te-adm-dash td:first-child {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.te-adm-dash td i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-style: normal;
    font-weight: 700;
    font-size: 0.55rem;
}

.te-adm-dash td i.is-b { background: #dcfce7; color: #15803d; }
.te-adm-dash td i.is-c { background: #fef3c7; color: #b45309; }
.te-adm-dash td i.is-d { background: #ede9fe; color: #6d28d9; }

.te-adm-dash td span {
    display: inline-block;
    border-radius: 999px;
    padding: 0.05rem 0.38rem;
    background: #dcfce7;
    color: #15803d;
    font-weight: 700;
}

.te-adm-main > h3 { margin: 0.55rem 0 0.3rem; }

.te-adm-roles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
}

.te-adm-roles article {
    border: 1px solid #e6eef5;
    border-radius: 0.4rem;
    background: #fbfcfe;
    padding: 0.4rem 0.45rem;
    min-width: 0;
}

.te-adm-roles b,
.te-adm-roles span { display: block; }
.te-adm-roles span { color: #64748b; margin-top: 0.1rem; }

.te-adm + .te-section { background: #edf4f9; }

.te-cxp {
    position: relative;
    flex: 1;
    display: flex;
    padding-right: 4.35rem;
}

.te-desk {
    display: grid;
    flex: 1;
    height: 100%;
    grid-template-columns: 6.7rem minmax(0, 1fr);
    background: #fff;
    border: 1px solid #e3ebf3;
    border-radius: 0.8rem;
    box-shadow: 0 14px 30px rgba(11, 31, 58, 0.08);
    overflow: hidden;
    color: var(--sys-navy);
    font-size: 0.68rem;
}

.te-desk aside {
    background: #f3f7fc;
    padding: 0.75rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.te-desk-brand {
    display: block;
    height: 1.85rem;
    width: auto;
    max-width: 100%;
    margin: 0 0 0.45rem;
    object-fit: contain;
    object-position: left center;
    filter: invert(1);
}

.te-desk-hero {
    flex: 1 1 auto;
    min-height: 7.4rem;
    height: auto;
}

.te-desk aside span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.35rem;
    border-radius: 0.35rem;
    color: #475569;
}

.te-desk aside .hp-icon {
    width: 0.85rem;
    height: 0.85rem;
}

.te-desk aside .is-active {
    background: #e4efff;
    color: #1d4ed8;
    font-weight: 700;
}

.te-desk-main {
    display: flex;
    flex-direction: column;
    padding: 0.7rem 0.75rem 0.75rem;
}

.te-desk-main header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.65rem;
    align-items: start;
    margin-bottom: 0.4rem;
}

.te-desk-main header > div {
    display: contents;
}

.te-desk-main header strong {
    display: block;
    grid-column: 1;
    grid-row: 1;
    font-size: 0.92rem;
    white-space: nowrap;
}

.te-desk-main header span {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    color: #64748b;
    font-size: 0.64rem;
    line-height: 1.2;
    white-space: nowrap;
    padding-right: 3.2rem;
}

.te-desk-pack span {
    color: #64748b;
}

.te-desk-main header p {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    white-space: nowrap;
    color: #64748b;
}

.te-desk-main header em {
    margin-left: 0.25rem;
    border-radius: 999px;
    padding: 0.08rem 0.35rem;
    background: #dcfce7;
    color: #15803d;
    font-style: normal;
    font-weight: 700;
}

.te-desk-hero {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    background: linear-gradient(120deg, #0e7490, #166534);
    color: #fff;
}

.te-desk-hero img,
.te-handset-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 42% 58%;
    display: block;
}

.te-desk-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6, 28, 48, 0.5) 0%, rgba(6, 28, 48, 0.16) 42%, rgba(6, 28, 48, 0) 68%);
    pointer-events: none;
}

.te-desk-hero div {
    position: absolute;
    left: 0.75rem;
    top: 34%;
    bottom: auto;
    z-index: 1;
    max-width: 72%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.te-desk-hero b,
.te-desk-hero span {
    display: block;
}

.te-desk-hero b {
    font-size: 1.15rem;
}

.te-desk-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0.45rem 7.2rem 0.45rem 0;
}

.te-desk-facts dt { color: #64748b; }
.te-desk-facts dd { margin: 0; font-weight: 700; }

.te-desk-pack {
    display: grid;
    grid-template-columns: 4.1rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid #e6eef5;
    border-radius: 0.45rem;
    background: #fbfcfe;
    margin-right: 7.2rem;
    padding: 0.45rem 0.55rem;
}

.te-desk-pack img {
    width: 4.1rem;
    height: 2.7rem;
    object-fit: cover;
    border-radius: 0.3rem;
    display: block;
}

.te-desk-pack b,
.te-desk-pack span { display: block; }

.te-desk-review {
    border-radius: 0.35rem;
    padding: 0.22rem 0.45rem;
    background: #eef4ff;
    color: #1d4ed8 !important;
    font-weight: 650;
    white-space: nowrap;
}

.te-handset {
    position: absolute;
    top: 5.15rem;
    bottom: 0;
    right: 0;
    width: 11.15rem;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 0.28rem 0.28rem 0.2rem;
    border: 0.28rem solid #0b1f3a;
    border-radius: 0.95rem;
    background: #fff;
    box-shadow: 0 8px 18px rgba(11, 31, 58, 0.14);
    color: var(--sys-navy);
    font-size: 0.62rem;
}

.te-handset header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.te-handset header img {
    height: 1.15rem;
    width: auto;
    max-width: 7.2rem;
    object-fit: contain;
    object-position: left center;
    filter: invert(1);
}

.te-handset-photo {
    flex: 1 1 auto;
    min-height: 4.4rem;
    height: auto;
    border-radius: 0.35rem;
    overflow: hidden;
    background: linear-gradient(120deg, #0e7490, #166534);
}

.te-handset p { margin: 0.3rem 0; }
.te-handset p b,
.te-handset p span { display: block; }
.te-handset p span { color: #64748b; }

.te-handset ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex: 0 0 auto;
}

.te-handset li {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.14rem 0;
    border-top: 1px solid #eef3f7;
    color: #1e293b;
}

.te-handset li .hp-icon {
    width: 0.8rem;
    height: 0.8rem;
    color: #2563eb;
}

.te-handset li::after {
    content: "›";
    margin-left: auto;
    color: #94a3b8;
}

.te-bk {
    background: #fff;
    border: 1px solid #e3ebf3;
    border-radius: 0.8rem;
    box-shadow: 0 12px 28px rgba(11, 31, 58, 0.08);
    padding: 0.85rem 0.95rem 0.7rem;
    color: var(--sys-navy);
    font-size: 0.72rem;
}

.te-bk-head,
.te-bk-head > div,
.te-bk-actions,
.te-bk-stay-top,
.te-bk-people header,
.te-bk-people > div {
    display: flex;
    align-items: center;
}

.te-bk-head {
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
}

.te-bk-head strong {
    font-size: 0.95rem;
}

.te-bk-head > div > span {
    margin-left: 0.45rem;
    color: #5b6b7c;
}

.te-bk-head em {
    margin-left: 0.45rem;
}

.te-bk-actions {
    gap: 0.35rem;
}

.te-bk-tabs {
    display: flex;
    gap: 0.7rem;
    margin: 0 0 0.55rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid #e8eef4;
    overflow-x: auto;
    color: #6b7c8d;
    white-space: nowrap;
}

.te-bk-tabs .is-active {
    color: #1d4ed8;
    font-weight: 700;
    box-shadow: inset 0 -2px 0 #1d4ed8;
    padding-bottom: 0.3rem;
}

.te-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
    font-style: normal;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.te-pill-ok {
    background: #dcfce7;
    color: #15803d;
}

.te-pill-due {
    background: #fee2e2;
    color: #dc2626;
}

.te-pill-voucher {
    background: #ecfdf3;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    border-radius: 0.4rem;
}

.te-bk-actions span {
    border: 1px solid #d7e3f0;
    border-radius: 0.4rem;
    padding: 0.22rem 0.5rem;
    background: #fff;
    color: #475569;
    font-weight: 650;
}

.te-bk-actions span:first-child {
    color: #0f766e;
}

.te-bk-actions span::after {
    content: "⌄";
    margin-left: 0.25rem;
    color: #64748b;
    font-size: 0.7rem;
}

.te-bk-hotel {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #eef3f7;
}

.te-bk-photo {
    height: 5.5rem;
    border-radius: 0.45rem;
    overflow: hidden;
    background: #e7eef6;
}

.te-bk-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
}

.te-bk-photo span {
    display: grid;
    place-items: center;
    height: 100%;
    color: #5b6b7c;
    text-align: center;
    padding: 0.3rem;
}

.te-bk-stay small,
.te-bk-stay > div > span,
.te-bk-summary dt,
.te-bk-people > div > span {
    color: #64748b;
}

.te-bk-stay small {
    display: block;
    font-size: 0.64rem;
}

.te-bk-stay b {
    display: block;
    font-size: 0.84rem;
}

.te-bk-stay-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    padding-top: 0.1rem;
}

.te-bk-stay dl,
.te-bk-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem 0.6rem;
    margin: 0.4rem 0 0.35rem;
}

.te-bk-stay dt,
.te-bk-summary dt {
    font-size: 0.62rem;
}

.te-bk-stay dd,
.te-bk-summary dd {
    margin: 0;
    font-weight: 700;
}

.te-bk-lower {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 0.65rem;
    margin-top: 0.65rem;
}

.te-bk-summary,
.te-bk-people {
    border: 1px solid #e6eef5;
    border-radius: 0.55rem;
    background: #fbfcfe;
    padding: 0.55rem 0.65rem;
}

.te-bk-summary {
    grid-template-columns: 1fr;
    gap: 0.22rem;
    margin: 0;
}

.te-bk-summary > div,
.te-bk-people > div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.te-bk-pay dd {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem;
    font-weight: 650;
}

.te-bk-people header {
    margin-bottom: 0.2rem;
}

.te-bk-people > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1.1fr) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    padding: 0.16rem 0;
}

.te-bk-people i {
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    font-style: normal;
    font-size: 0.56rem;
    font-weight: 700;
}

.te-bk-people .is-nk { background: #dbeafe; color: #1d4ed8; }
.te-bk-people .is-rk { background: #ede9fe; color: #6d28d9; }
.te-bk-people .is-ak { background: #ffedd5; color: #c2410c; }
.te-bk-people .is-sk { background: #dcfce7; color: #15803d; }

.te-bk-view {
    color: #2563eb !important;
    font-weight: 650;
}

.te-qb {
    background: #fff;
    border: 1px solid #e3ebf3;
    border-radius: 0.8rem;
    box-shadow: 0 12px 28px rgba(11, 31, 58, 0.08);
    padding: 0.9rem 1rem 0.4rem;
    color: var(--sys-navy);
    font-size: 0.72rem;
}

.te-qb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}

.te-qb-head strong {
    font-size: 0.95rem;
}

.te-qb-draft {
    border-radius: 0.4rem;
    padding: 0.28rem 0.55rem;
    color: #1d4ed8;
    background: #eef4ff;
    font-weight: 650;
}

.te-qb-steps {
    display: flex;
    gap: 0.85rem;
    list-style: none;
    margin: 0 0 0.55rem;
    padding: 0 0 0.45rem;
    border-bottom: 1px solid #e8eef4;
    overflow-x: auto;
}

.te-qb-steps li {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #7b8b9c;
    white-space: nowrap;
}

.te-qb-steps b {
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: #e8eef5;
    font-size: 0.64rem;
}

.te-qb-steps .is-active {
    color: var(--sys-teal);
    font-weight: 700;
}

.te-qb-steps .is-active b {
    background: var(--sys-teal);
    color: #fff;
}

.te-qb-row {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1.15fr) 5.4rem minmax(0, 0.9fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0.55rem 0;
    border-top: 1px solid #eef3f7;
}

.te-qb-day b,
.te-qb-copy b,
.te-qb-service b {
    display: block;
    font-size: 0.78rem;
}

.te-qb-day span,
.te-qb-copy span,
.te-qb-service span {
    display: block;
    color: #4b5d70;
    line-height: 1.35;
}

.te-qb-photo {
    width: 5.4rem;
    height: 3.6rem;
    border-radius: 0.4rem;
    overflow: hidden;
    background: #e7eef6;
}

.te-qb-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.te-qb-photo span {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 0.2rem;
    text-align: center;
    color: #5b6b7c;
    font-size: 0.62rem;
}

.te-qb-service-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem;
}

.te-qb-service em {
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 0.05rem 0.35rem;
    background: #e7f6ee;
    color: #047857;
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 700;
}

.te-qb-change {
    color: #1d4ed8 !important;
    font-weight: 650;
    margin-top: 0.15rem;
}

.te-sales .te-preview {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.te-enq {
    background: #fff;
    border: 1px solid #d7e3ee;
    border-radius: 0.85rem;
    box-shadow: 0 16px 36px rgba(11, 31, 58, 0.1);
    padding: 0.85rem 0.95rem 0.95rem;
    color: var(--sys-navy);
    font-size: 0.72rem;
}

.te-enq-top {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: center;
}

.te-enq-crumb {
    margin: 0;
    color: #64788b;
    font-size: 0.68rem;
}

.te-enq-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.te-enq-status,
.te-enq-convert,
.te-enq-more {
    display: inline-flex;
    align-items: center;
    border-radius: 0.4rem;
    padding: 0.22rem 0.45rem;
    font-weight: 650;
    white-space: nowrap;
}

.te-enq-status {
    color: #1d4ed8;
    background: #fff;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

.te-enq-convert {
    color: #fff;
    background: var(--sys-teal);
}

.te-enq-more {
    color: #64788b;
    letter-spacing: 0.08em;
}

.te-enq h3 {
    margin: 0.45rem 0 0.55rem;
    font-size: 0.95rem;
}

.te-enq-panels {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 0.55rem;
    align-items: start;
}

.te-enq-card {
    border: 1px solid #e6eef5;
    border-radius: 0.6rem;
    background: #fbfdfe;
    padding: 0.55rem 0.65rem;
}

.te-enq-who {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.45rem;
}

.te-enq-avatar {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: #e8e4fb;
    color: #5b4cdb;
    font-weight: 700;
}

.te-enq-who b {
    display: block;
    font-size: 0.8rem;
}

.te-enq-who p,
.te-enq-card > p {
    margin: 0;
    color: #5c6d7e;
    line-height: 1.35;
}

.te-enq dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.6rem;
    margin: 0;
}

.te-enq dt {
    color: #7b8b9c;
    font-size: 0.64rem;
}

.te-enq dd {
    margin: 0;
    font-weight: 650;
}

.te-enq h4 {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
}

.te-enq-card > p {
    margin-bottom: 0.55rem;
}

.te-enq-follows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.28rem;
}

.te-enq-follows li {
    display: grid;
    grid-template-columns: 0.7rem minmax(0, 1fr);
    column-gap: 0.35rem;
    align-items: center;
    color: #4b5d70;
}

.te-enq-follows li::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #0f766e;
    justify-self: center;
}

.te-enq-follows b {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    color: #24384c;
    font-weight: 650;
    font-size: 0.68rem;
}

.te-enq-follows span {
    grid-column: 2;
    grid-row: 2;
    color: #334155;
}

.te-enq-tabs {
    display: flex;
    gap: 0.85rem;
    margin: 0.65rem 0 0.4rem;
    border-bottom: 1px solid #e6eef5;
    overflow-x: auto;
}

.te-enq-tabs span {
    padding-bottom: 0.35rem;
    color: #64788b;
    white-space: nowrap;
}

.te-enq-tabs .is-active {
    color: #1d4ed8;
    box-shadow: inset 0 -2px 0 #1d4ed8;
    font-weight: 700;
}

.te-enq-time {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.te-enq-time li {
    display: grid;
    grid-template-columns: 5.4rem minmax(0, 1fr) auto;
    gap: 0.4rem;
    align-items: center;
}

.te-enq-time b {
    font-weight: 650;
}

.te-enq-time span {
    color: #334155;
}

.te-enq-time time {
    color: #7b8b9c;
}

.te-feature-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.te-feature-list li {
    display: grid;
    gap: 0.15rem;
    padding-left: 1.6rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%230F766E' fill-opacity='.12'/%3E%3Cpath d='M8 12.2 10.6 15 16 9' fill='none' stroke='%230F766E' stroke-width='2'/%3E%3C/svg%3E") left 0.1rem / 1.15rem no-repeat;
}

.te-stage {
    min-width: 0;
}

.te-preview {
    aspect-ratio: 16 / 10;
    border-radius: 1rem;
    border: 1px solid var(--sys-gray-100);
    background: linear-gradient(160deg, #e7f0f4, #d5e4ea);
    box-shadow: var(--sys-shadow-md);
    padding: 0.85rem;
    overflow: hidden;
}

.te-app {
    height: 100%;
    background: #fff;
    border-radius: 0.75rem;
    padding: 0.75rem 0.85rem;
    color: var(--sys-navy);
    font-size: 0.78rem;
}

.te-app-bar,
.te-pills,
.te-split,
.te-metrics,
.te-days {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.te-app-bar span,
.te-pills span {
    background: var(--sys-teal-soft);
    color: var(--sys-teal-dark);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-weight: 600;
}

.te-pills {
    justify-content: flex-start;
    margin: 0.55rem 0;
}

.te-app table {
    width: 100%;
    border-collapse: collapse;
}

.te-app th,
.te-app td {
    text-align: left;
    padding: 0.35rem 0.2rem;
    border-bottom: 1px solid var(--sys-gray-100);
}

.te-days,
.te-split,
.te-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.7rem;
}

.te-days article,
.te-split div,
.te-metrics div {
    background: var(--sys-gray-50);
    border-radius: 0.55rem;
    padding: 0.55rem;
}

.te-portal {
    display: grid;
    grid-template-columns: 1.4fr 0.7fr;
    gap: 0.6rem;
    height: 100%;
}

.te-portal .te-app {
    background: linear-gradient(180deg, #0e7490, #155e75);
    color: #fff;
}

.te-portal-title {
    font-family: var(--sys-font-display);
    font-size: 1.35rem;
    margin: 0.8rem 0 0;
}

.te-phone {
    background: #111827;
    color: #fff;
    border-radius: 1rem;
    padding: 0.8rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.te-explore {
    padding: 2.6rem 0 2.5rem;
    background: #edf4f9;
    scroll-margin-top: 8.25rem;
}

.te-explore .te-kicker {
    margin-bottom: 0.35rem;
    color: #0d9488;
    font-size: 0.78rem;
}

.te-explore h2 {
    font-size: clamp(1.7rem, 2.2vw, 2rem);
    margin-bottom: 0.35rem;
}

.te-explore .te-section-head {
    margin-bottom: 1.25rem;
}

.te-explore .te-section-head p:last-child {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
}

.te-explore-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
}

.te-explore-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.te-explore-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.35rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid #d7e2ee;
    border-radius: 999px;
    background: #fff;
    color: var(--sys-navy);
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
}

.te-explore-tabs button.is-on {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.te-explore-tabs .hp-icon {
    width: 1rem;
    height: 1rem;
}

.te-explore-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 16rem;
}

.te-explore-search input {
    width: 100%;
    min-height: 2.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid #d7e2ee;
    border-radius: 0.55rem;
    font-size: 0.84rem;
}

.te-explore-search button,
.te-explore-more {
    border: 0;
    background: transparent;
    color: #0f766e;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.te-explore-count {
    margin: 0 0 0.75rem;
    color: #64748b;
    font-size: 0.8rem;
}

.te-explore-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.te-explore-card {
    padding: 0.8rem 0.9rem;
    background: #fff;
    border: 1px solid #e3ebf3;
    border-radius: 0.55rem;
}

.te-explore-card h3 {
    margin: 0 0 0.2rem;
    color: var(--sys-navy);
    font-size: 0.92rem;
    font-weight: 700;
}

.te-explore-card p,
.te-explore-extra {
    margin: 0;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.4;
}

.te-explore-extra {
    margin-top: 0.35rem;
}

.te-explore-empty {
    margin: 0.4rem 0 0;
    color: #64748b;
}

.te-explore-link {
    margin: 0.9rem 0 0;
    text-align: center;
}

.te-explore-link a {
    color: #0f766e;
    font-weight: 700;
    text-decoration: none;
}

.te-explore-link a::after {
    content: " →";
}

.te-explore-tabs button:focus-visible,
.te-explore-search input:focus-visible,
.te-explore-search button:focus-visible,
.te-explore-more:focus-visible,
.te-explore-link a:focus-visible {
    outline: 2px solid #0f766e;
    outline-offset: 2px;
}

@media (max-width: 1024px) {
    .te-explore-bar {
        flex-direction: column;
    }

    .te-explore-search {
        flex-basis: auto;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .te-explore-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 0.2rem;
    }

    .te-explore-tabs button {
        flex: 0 0 auto;
    }

    .te-explore-grid {
        grid-template-columns: 1fr;
    }
}

.te-workflow {
    padding: 2.15rem 0 2rem;
    background: #fff;
}

.te-workflow .te-section-head {
    margin-bottom: 1.3rem;
}

.te-workflow .te-kicker {
    margin-bottom: 0.35rem;
    color: #0d9488;
}

.te-workflow h2 {
    font-size: 1.75rem;
    line-height: 1.2;
    margin-bottom: 0.3rem;
}

.te-workflow .te-section-head p:last-child {
    margin: 0;
    color: #64748b;
    font-size: 0.875rem;
}

.te-flow {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.te-flow li {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    height: 3.6rem;
    padding: 0.6rem 0.7rem;
    background: #fff;
    border: 1px solid #e3ebf3;
    border-radius: 0.6rem;
    box-shadow: 0 6px 16px rgba(11, 31, 58, 0.05);
    color: var(--sys-navy);
    font-weight: 650;
    font-size: 0.92rem;
    white-space: nowrap;
}

.te-flow li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -0.82rem;
    top: 50%;
    width: 0.42rem;
    height: 0.42rem;
    border-top: 2px solid #0f766e;
    border-right: 2px solid #0f766e;
    transform: translateY(-50%) rotate(45deg);
}

.te-flow-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 0.4rem;
    background: #e7f6f4;
    color: #0f766e;
}

.te-flow li:nth-child(2) .te-flow-icon,
.te-flow li:nth-child(3) .te-flow-icon {
    background: #e4efff;
    color: #2563eb;
}

.te-flow-icon .hp-icon {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 2;
}

.te-flow b {
    font-weight: 650;
}

@media (hover: hover) {
    .te-flow li:hover {
        box-shadow: 0 8px 18px rgba(11, 31, 58, 0.08);
    }
}

.te-why {
    padding: 2.4rem 0 2.5rem;
    background: #edf4f9;
}

.te-why .te-section-head {
    max-width: none;
    margin-bottom: 1.35rem;
}

.te-why .te-kicker {
    margin-bottom: 0.35rem;
    color: #0d9488;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.te-why h2 {
    font-size: 1.85rem;
    line-height: 1.2;
    margin: 0;
    color: var(--sys-navy);
}

.te-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.te-why-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 5.75rem;
    padding: 1rem 1.05rem;
    background: #fff;
    border: 1px solid #e3ebf3;
    border-radius: 0.7rem;
    box-shadow: 0 6px 16px rgba(11, 31, 58, 0.04);
    transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.te-why-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    border-radius: 0.55rem;
    background: #e4efff;
    color: #2563eb;
}

.te-why-icon .hp-icon {
    width: 1.3rem;
    height: 1.3rem;
    stroke-width: 2.1;
}

.te-why-card h3 {
    margin: 0 0 0.2rem;
    color: var(--sys-navy);
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.3;
}

.te-why-card p {
    margin: 0;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.4;
}

@media (hover: hover) {
    .te-why-card:hover {
        border-color: #c9d8ea;
        box-shadow: 0 10px 20px rgba(11, 31, 58, 0.08);
        transform: translateY(-2px);
    }
}

.te-pricing {
    padding: 2.2rem 0 2.5rem;
    background: #fff;
    scroll-margin-top: 8.25rem;
}

.te-pricing .te-section-head {
    max-width: 46rem;
    margin-bottom: 1.15rem;
}

.te-pricing .te-kicker {
    margin-bottom: 0.35rem;
    color: #0d9488;
    font-size: 0.78rem;
}

.te-pricing h2 {
    font-size: clamp(1.7rem, 2.2vw, 2rem);
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.te-pricing .te-section-head p:last-child {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

.te-trial {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 auto 1rem;
    max-width: 52rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #e3ebf3;
    border-radius: 0.8rem;
}

.te-trial strong {
    display: block;
    color: var(--sys-navy);
    font-size: 0.98rem;
}

.te-trial p {
    margin: 0.15rem 0 0;
    color: #64748b;
    font-size: 0.84rem;
}

.te-billing {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.65rem 0.85rem;
    margin-bottom: 1.15rem;
}

.te-billing-label {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 650;
}

.te-billing-switch {
    display: inline-flex;
    padding: 0.2rem;
    background: #fff;
    border: 1px solid #d7e2ee;
    border-radius: 999px;
}

.te-billing-switch button {
    border: 0;
    background: transparent;
    color: var(--sys-navy);
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-size: 0.84rem;
    font-weight: 650;
    cursor: pointer;
}

.te-billing-switch button.is-on {
    background: #0f766e;
    color: #fff;
}

.te-billing-switch button:focus-visible,
.te-tip:focus-visible,
.te-plan-btn:focus-visible,
.te-compare a:focus-visible,
.te-plan-more:focus-visible {
    outline: 2px solid #0f766e;
    outline-offset: 2px;
}

.te-billing-switch button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.te-save {
    color: #047857;
    background: #e7f6ee;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.te-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
    align-items: stretch;
}

.te-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.45rem 1.35rem 1.3rem;
    background: #fff;
    border: 1px solid #e3ebf3;
    border-radius: 0.8rem;
    box-shadow: 0 8px 20px rgba(11, 31, 58, 0.04);
    transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.te-plan-featured {
    border-color: #0f766e;
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.12);
}

.te-plan-badge {
    position: absolute;
    top: -0.7rem;
    left: 1.2rem;
    background: #0f766e;
    color: #fff;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.te-plan h3 {
    margin: 0.15rem 0 0.3rem;
    color: var(--sys-navy);
    font-size: 1.28rem;
    font-weight: 700;
}

.te-plan-summary {
    min-height: 2.6rem;
    margin: 0 0 0.75rem;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.4;
}

.te-plan-price {
    min-height: 5.4rem;
}

.te-amount {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
}

.te-amount span {
    color: var(--sys-navy);
    font-size: 1.95rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.te-gst,
.te-plan-limits {
    margin: 0.2rem 0 0;
    color: #64748b;
    font-size: 0.8rem;
}

.te-plan-limits {
    margin: 0.65rem 0 0.35rem;
    padding: 0;
    list-style: none;
}

.te-plan-features {
    flex: 1;
    margin: 0.35rem 0 0.8rem;
    padding: 0;
    list-style: none;
}

.te-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0.38rem 0;
    color: #24384c;
    font-size: 0.875rem;
    line-height: 1.35;
}

.te-plan-features li::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-top: 0.38rem;
    flex: 0 0 0.4rem;
    border-radius: 50%;
    background: #0f766e;
}

.te-tip {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    margin-top: 0.12rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: help;
}

.te-tip svg {
    width: 0.95rem;
    height: 0.95rem;
}

.te-tip-pop {
    display: none;
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: calc(100% + 0.4rem);
    width: 14rem;
    transform: translateX(-50%);
    padding: 0.55rem 0.65rem;
    background: var(--sys-navy);
    color: #fff;
    border-radius: 0.45rem;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 8px 18px rgba(11, 31, 58, 0.2);
}

.te-tip:hover .te-tip-pop,
.te-tip:focus .te-tip-pop,
.te-tip:focus-visible .te-tip-pop,
.te-tip.is-open .te-tip-pop {
    display: block;
}

.te-plan-more {
    margin-bottom: 0.7rem;
    color: #0f766e;
    font-size: 0.82rem;
    font-weight: 650;
}

.te-plan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    margin-top: auto;
    border: 1px solid #0f766e;
    border-radius: 0.55rem;
    color: #0f766e;
    background: #fff;
    font-weight: 700;
    text-decoration: none;
}

.te-plan-btn-fill {
    background: #0f766e;
    color: #fff;
}

.te-compare {
    margin: 0.95rem 0 0.4rem;
    text-align: center;
}

.te-compare a {
    color: #0f766e;
    font-weight: 700;
    text-decoration: none;
}

.te-compare a::after {
    content: " →";
}

@media (hover: hover) {
    .te-plan:hover {
        border-color: #c5d5e6;
        box-shadow: 0 12px 24px rgba(11, 31, 58, 0.08);
        transform: translateY(-2px);
    }

    .te-plan-featured:hover {
        border-color: #0f766e;
    }
}

@media (max-width: 1024px) {
    .te-plan-grid {
        grid-template-columns: 1fr;
        max-width: 28rem;
        margin-inline: auto;
    }

    .te-plan-summary {
        min-height: 0;
    }
}

@media (max-width: 767.98px) {
    .te-trial {
        flex-direction: column;
        align-items: stretch;
    }

    .te-plan-btn,
    .te-trial .te-plan-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .te-plan,
    .te-plan:hover {
        transition: none;
        transform: none;
    }
}

.te-compare-section,
.te-faq-section {
    padding: 2.5rem 0 2.6rem;
}

.te-compare-section {
    background: #f5f9fc;
}

.te-faq-section {
    background: #fff;
}

.te-compare-section .te-kicker,
.te-faq-section .te-kicker {
    margin-bottom: 0.35rem;
    color: #0d9488;
    font-size: 0.78rem;
}

.te-compare-section h2,
.te-faq-section h2 {
    font-size: clamp(1.7rem, 2.2vw, 2rem);
    margin-bottom: 0.35rem;
}

.te-compare-section .te-section-head p:last-child,
.te-faq-section .te-section-head p:last-child {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
}

.te-compare-section .te-section-head,
.te-faq-section .te-section-head {
    margin-bottom: 1.1rem;
}

.te-compare-tools {
    display: flex;
    justify-content: flex-end;
    gap: 0.85rem;
    margin-bottom: 0.65rem;
}

.te-compare-tools button,
.te-cat > h3 button,
.te-faq-item button {
    font: inherit;
}

.te-compare-tools button {
    border: 0;
    background: transparent;
    color: #0f766e;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.te-cat {
    margin-bottom: 0.55rem;
    background: #fff;
    border: 1px solid #e3ebf3;
    border-radius: 0.7rem;
    overflow: visible;
}

.te-cat > h3 {
    margin: 0;
}

.te-cat > h3 button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3.15rem;
    padding: 0.75rem 1rem;
    border: 0;
    background: transparent;
    color: var(--sys-navy);
    font-size: 0.98rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.te-chevron {
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid #0f766e;
    border-bottom: 2px solid #0f766e;
    transform: rotate(45deg);
    transition: transform 180ms ease;
}

.te-cat.is-open .te-chevron {
    transform: rotate(225deg);
}

.te-cat-panel {
    display: none;
    border-top: 1px solid #e3ebf3;
}

.te-cat.is-open .te-cat-panel {
    display: block;
}

.te-cat-scroll {
    overflow-x: auto;
}

.te-cat table {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
}

.te-cat th,
.te-cat td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid #eef3f8;
    font-size: 0.875rem;
    font-weight: 500;
}

.te-cat thead th {
    background: #f8fbfc;
    color: var(--sys-navy);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.te-cat thead th:first-child,
.te-cat tbody th {
    width: 40%;
    text-align: left;
    color: #24384c;
    font-weight: 600;
}

.te-cat td {
    width: 20%;
    text-align: center;
    color: #334155;
}

.te-cat tbody tr:nth-child(even) td,
.te-cat tbody tr:nth-child(even) th {
    background: #fbfcfe;
}

.te-cat .is-featured {
    background: #f3fbfa;
}

.te-yes,
.te-no {
    font-size: 0.78rem;
    font-weight: 700;
}

.te-yes { color: #047857; }
.te-no { color: #94a3b8; }

.te-faq-list {
    max-width: 56rem;
    margin: 0 auto;
}

.te-faq-item {
    margin-bottom: 0.55rem;
    background: #fff;
    border: 1px solid #e3ebf3;
    border-radius: 0.7rem;
}

.te-faq-item h3 {
    margin: 0;
}

.te-faq-item button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.85rem 1.05rem;
    border: 0;
    border-radius: 0.7rem;
    background: #fff;
    color: var(--sys-navy);
    font-size: 0.98rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.te-faq-item button:hover {
    background: #f8fbfc;
}

.te-faq-mark {
    position: relative;
    width: 0.85rem;
    height: 0.85rem;
    flex: 0 0 0.85rem;
}

.te-faq-mark::before,
.te-faq-mark::after {
    content: "";
    position: absolute;
    background: #0f766e;
}

.te-faq-mark::before {
    left: 0;
    right: 0;
    top: 0.35rem;
    height: 2px;
}

.te-faq-mark::after {
    top: 0;
    bottom: 0;
    left: 0.35rem;
    width: 2px;
}

.te-faq-item.is-open .te-faq-mark::after {
    display: none;
}

.te-faq-item > div {
    display: none;
    padding: 0 1.1rem 1rem;
}

.te-faq-item.is-open > div {
    display: block;
}

.te-faq-item p {
    margin: 0;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.55;
}

.te-cat > h3 button:focus-visible,
.te-compare-tools button:focus-visible,
.te-faq-item button:focus-visible {
    outline: 2px solid #0f766e;
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .te-faq-list {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .te-chevron {
        transition: none;
    }
}

.te-faq {
    max-width: 46rem;
}

.te-final {
    background:
        radial-gradient(ellipse 38% 90% at 92% 40%, rgba(255, 255, 255, 0.16), transparent 68%),
        linear-gradient(90deg, #0f4c81 0%, #0f8f8a 100%);
    color: #fff;
}

.te-final-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-top: 2.05rem;
    padding-bottom: 2.05rem;
}

.te-final-copy {
    flex: 1 1 65%;
    min-width: 0;
}

.te-final-actions {
    display: flex;
    flex: 0 1 35%;
    justify-content: flex-end;
    gap: 0.65rem;
}

.te-final h2 {
    color: #fff;
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    line-height: 1.2;
    margin: 0 0 0.3rem;
}

.te-final p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.95rem;
    line-height: 1.4;
}

.te-final-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.55rem 1.05rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.te-final-btn-primary {
    background: #fff;
    border-color: #fff;
    color: #0b1f3a;
}

.te-final-btn-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.88);
    color: #fff;
}

.te-final-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.te-final-btn-primary:hover,
.te-final-btn-primary:focus-visible {
    background: #fff;
    color: #0b1f3a;
    box-shadow: 0 6px 16px rgba(11, 31, 58, 0.2);
}

.te-final-btn-secondary:hover,
.te-final-btn-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

.te-preview-hero {
    aspect-ratio: auto;
    max-width: 94%;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.te-dash {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    background: #fff;
    border: 1px solid #d7e3ec;
    border-radius: 1rem;
    box-shadow: 0 18px 36px rgba(11, 31, 58, 0.18);
    overflow: hidden;
    color: var(--sys-navy);
    font-size: 0.68rem;
}

.te-dash-side {
    background: var(--sys-navy);
    color: #d5e0ea;
    padding: 0.85rem 0.55rem;
}

.te-dash-brand {
    margin: 0 0 0.55rem;
    padding: 0 0.35rem;
}

.te-dash-brand img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 2rem;
    object-fit: contain;
    object-position: left center;
}

.te-dash-side ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.te-dash-side li {
    padding: 0.24rem 0.45rem;
    border-radius: 0.4rem;
}

.te-dash-side li.is-active {
    background: var(--sys-teal);
    color: #fff;
    font-weight: 650;
}

.te-dash-main {
    padding: 0.5rem 0.7rem 0.4rem;
    min-width: 0;
}

.te-dash-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
    color: var(--sys-gray-600);
}

.te-dash-branch {
    border: 1px solid var(--sys-gray-100);
    border-radius: 999px;
    padding: 0.12rem 0.45rem 0.12rem 0.5rem;
    background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 8l3-3.5' fill='none' stroke='%235A6B7D' stroke-width='1.4'/%3E%3C/svg%3E") right 0.35rem center / 0.55rem no-repeat;
    padding-right: 1rem;
}

.te-dash-bell {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 1px solid var(--sys-gray-100);
    color: var(--sys-navy);
}

.te-dash-user {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    text-align: left;
    line-height: 1.15;
}

.te-dash-user b,
.te-dash-user small {
    display: block;
}

.te-dash-user small {
    color: var(--sys-gray-600);
    font-size: 0.62rem;
}

.te-dash-avatar {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--sys-teal);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 750;
}

.te-dash-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.55rem;
}

.te-dash-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 750;
}

.te-dash-new,
.te-dash-tabs span {
    border-radius: 999px;
    font-weight: 650;
}

.te-dash-new {
    background: var(--sys-teal);
    color: #fff;
    padding: 0.28rem 0.6rem;
}

.te-dash-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.te-dash-tabs span {
    background: #f3f7fa;
    border: 1px solid var(--sys-gray-100);
    padding: 0.18rem 0.45rem;
}

.te-dash-tabs .is-active {
    background: var(--sys-teal-soft);
    color: var(--sys-teal-dark);
    border-color: transparent;
}

.te-dash-search {
    border: 1px solid var(--sys-gray-100);
    border-radius: 0.45rem;
    color: var(--sys-gray-600);
    padding: 0.35rem 0.55rem;
    margin-bottom: 0.45rem;
}

.te-dash table {
    width: 100%;
    border-collapse: collapse;
}

.te-dash th,
.te-dash td {
    text-align: left;
    padding: 0.38rem 0.25rem;
    border-bottom: 1px solid #eef3f7;
    white-space: nowrap;
}

.te-dash th {
    color: var(--sys-gray-600);
    font-weight: 650;
}

.te-dash .st {
    display: inline-block;
    border-radius: 999px;
    padding: 0.08rem 0.4rem;
    font-weight: 700;
    font-size: 0.66rem;
}

.te-dash .st-progress { background: #e8f1ff; color: #1d4ed8; }
.te-dash .st-quoted { background: #f3e8ff; color: #7e22ce; }
.te-dash .st-booked { background: #e7f6ee; color: #047857; }
.te-dash .st-new { background: #fff4e5; color: #c2410c; }

@media (max-width: 1199.98px) {
    .te-hero h1 { font-size: 2.35rem; }
    .te-dash { font-size: 0.66rem; grid-template-columns: 7.4rem minmax(0, 1fr); }
}

@media (max-width: 1199.98px) {
    #highlights .te-hl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .te-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .te-hero-grid,
    .te-showcase-grid,
    .te-highlight-grid,
    .te-portal,
    .te-sales .te-showcase-grid {
        grid-template-columns: 1fr;
    }

    .te-sales h2 {
        max-width: none;
        font-size: clamp(1.7rem, 4vw, 2rem);
    }

    .te-sales h2 span,
    .te-quote h2 span,
    .te-book h2 span,
    .te-cx h2 span,
    .te-fin h2 span,
    .te-adm h2 span {
        display: inline;
        white-space: normal;
    }

    .te-quote .te-showcase-grid,
    .te-book .te-showcase-grid,
    .te-cx .te-showcase-grid,
    .te-fin .te-showcase-grid,
    .te-adm .te-showcase-grid,
    .te-adm-dash,
    .te-adm-metrics,
    .te-adm-roles,
    .te-fin-dash,
    .te-qb-row,
    .te-bk-hotel,
    .te-bk-lower,
    .te-bk-stay dl,
    .te-desk,
    .te-desk-facts {
        grid-template-columns: 1fr;
    }

    .te-cx .te-stage { order: 0; display: block; }
    .te-adm .te-stage { order: 0; }

    .te-adm-dash aside {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 0.45rem;
    }

    .te-adm-dash aside img {
        height: 1.35rem;
        margin: 0 0.35rem 0 0;
    }

    .te-adm-metrics,
    .te-adm-roles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .te-fin-dash aside {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 0.45rem;
    }

    .te-fin-dash aside img {
        height: 1.35rem;
        margin: 0 0.35rem 0 0;
    }

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

    .te-cxp {
        display: block;
        padding-right: 0;
        padding-bottom: 1rem;
    }

    .te-desk-main { display: block; }

    .te-desk-main header span {
        white-space: normal;
        padding-right: 0;
    }

    .te-desk-hero {
        flex: none;
        height: 11rem;
        min-height: 0;
    }

    .te-handset {
        position: relative;
        top: auto;
        bottom: auto;
        right: auto;
        display: block;
        height: auto;
        width: min(16rem, 100%);
        margin: 0.8rem auto 0;
    }

    .te-handset ul { display: block; }

    .te-handset-photo {
        flex: none;
        height: 5.5rem;
        min-height: 0;
    }

    .te-bk-stay-side {
        align-items: flex-start;
        flex-direction: row;
    }

    .te-bk-people > div {
        display: flex;
        flex-wrap: wrap;
    }

    .te-qb-steps {
        gap: 0.55rem;
    }

    #highlights .te-hl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .te-showcase-flip {
        direction: ltr;
    }

    .te-subnav-inner {
        align-items: center;
    }

    .te-subnav-brand small {
        display: none;
    }

    .te-flow {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.85rem 1.15rem;
    }

    .te-flow li:nth-child(3)::after {
        display: none;
    }

    .te-hero h1 {
        font-size: 2.15rem;
    }

    .te-dash-main {
        overflow-x: auto;
    }

    .te-dash {
        grid-template-columns: 1fr;
    }

    .te-dash-side ul {
        display: flex;
        gap: 0.2rem;
        overflow-x: auto;
    }

    .te-dash-side li {
        white-space: nowrap;
    }

    .te-dash-branch,
    .te-dash-user b {
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    .te-final-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .te-final-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .te-final-btn {
        flex: 1 1 9rem;
    }

    .te-why {
        padding: 1.75rem 0 1.9rem;
    }

    .te-why h2 {
        font-size: 1.55rem;
    }

    .te-why-grid {
        grid-template-columns: 1fr;
        max-width: 22rem;
        margin-inline: auto;
    }

    .te-why-card {
        min-height: 0;
        padding: 0.85rem 0.9rem;
    }

    #highlights .te-hl-grid {
        grid-template-columns: 1fr;
    }

    .te-enq-panels,
    .te-enq dl,
    .te-enq-time li {
        grid-template-columns: 1fr;
    }

    .te-enq-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .te-hl-card {
        min-height: 0;
        padding: 0.95rem 1rem;
    }

    .te-flow {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        max-width: 18rem;
        margin: 0 auto;
    }

    .te-flow li::after,
    .te-flow li:nth-child(3)::after {
        display: block;
        right: auto;
        left: 50%;
        top: auto;
        bottom: -0.62rem;
        transform: translateX(-50%) rotate(135deg);
    }

    .te-flow li:last-child::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .te-page * {
        scroll-behavior: auto;
    }

    .te-why-card,
    .te-why-card:hover {
        transition: none;
        transform: none;
    }
}