/* Scoped Android landing page. Brand colors match the Android application. */
.ts-page {
    --ts-blue:#1677be;
    --ts-deep:#0866ac;
    --ts-ink:#152e41;
    --ts-muted:#586d7d;
    --ts-line:#dce6ec;
    color:var(--ts-ink);
    background:#fff;
    font-family:Arial,Helvetica,sans-serif;
    line-height:1.6
}
.ts-page * {
    box-sizing:border-box
}
.ts-page a {
    color:inherit
}
.ts-page .ts-wrap {
    width:min(1200px,calc(100% - 80px));
    margin-inline:auto
}
.ts-page h1,.ts-page h2,.ts-page h3,.ts-page p {
    margin:0
}
.ts-page h1,.ts-page h2,.ts-page h3 {
    font-weight:600;
    letter-spacing:-.045em;
    line-height:1.1
}
.ts-page .ts-product-nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:82px;
    font-size:13px
}
.ts-product-nav>div {
    display:flex;
    gap:30px
}
.ts-page .ts-product-name {
    font-weight:700;
    font-size:16px;
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none
}
.ts-platform {
    color:#697e8c;
    font-weight:400
}
.ts-mark {
    font-size:28px;
    color:var(--ts-blue)
}
.ts-product-nav a {
    text-decoration:none
}
.ts-page a:hover {
    text-decoration:underline
}
.ts-hero {
    background:linear-gradient(110deg,#f6f9fc 20%,#edf5fb 100%);
    overflow:hidden
}
.ts-hero-grid {
    display:grid;
    grid-template-columns:1.12fr 1fr;
    min-height:690px;
    align-items:center;
    gap:30px
}
.ts-hero-copy {
    padding:58px 0
}
.ts-page .ts-eyebrow {
    font-size:10px;
    font-weight:700;
    letter-spacing:.15em;
    display:block;
    color:var(--ts-deep);
    margin-bottom:25px
}
.ts-status-dot {
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--ts-blue);
    margin:0 8px 1px 0
}
.ts-page h1 {
    font-size:clamp(44px,4.8vw,68px);
    line-height:1.06;
    margin-bottom:26px
}
.ts-page h1 span {
    color:var(--ts-blue)
}
.ts-page .ts-lead {
    font-size:18px;
    line-height:1.65;
    color:var(--ts-muted);
    max-width:455px
}
.ts-actions {
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:32px
}
/* Rounded CTA and arrow treatment adapted from Alex Maracinaru / Uiverse.
   Reference and MIT notice: docs/android/uiverse-button-LICENSE.txt */
.ts-page .ts-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 58px;
    padding: 7px 8px 7px 22px;
    border: 1px solid #253b49;
    border-radius: 999px;
    color: #fff;
    background: #172e3d;
    box-shadow: 0 3px 5px #152e4110, inset 0 1px 0 #ffffff18;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: background .2s ease, box-shadow .2s ease;
}
.ts-page .ts-button:hover,
.ts-page .ts-button:focus-visible {
    background: #223f50;
    box-shadow: 0 6px 18px #152e4120, inset 0 1px 0 #ffffff20;
    text-decoration: none;
}
.ts-page .ts-button:active {
    box-shadow: inset 0 2px 4px #00000020;
}
.ts-button img {
    object-fit: contain;
    width: 22px;
    height: 24px;
    flex-shrink: 0;
}
.ts-page .ts-button .ts-button-label {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0 5px 0 0;
}
.ts-page .ts-button .ts-button-arrow {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    color: #172e3d;
    background: #e4f2fb;
    transition: background .2s ease;
}
.ts-button-arrow svg {
    transition: transform .2s ease;
}
.ts-button:hover .ts-button-arrow,
.ts-button:focus-visible .ts-button-arrow {
    background: #fff;
}
.ts-button:hover .ts-button-arrow svg,
.ts-button:focus-visible .ts-button-arrow svg {
    transform: translateX(3px);
}
.ts-page .ts-apk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    max-width: 100%;
    padding: 13px 20px;
    border: 1px solid #bacdd9;
    border-radius: 999px;
    background: #ffffffb3;
    color: #294657;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}
.ts-apk-button svg {
    flex-shrink: 0;
}
.ts-page .ts-apk-button:hover,
.ts-page .ts-apk-button:focus-visible {
    border-color: #7998ad;
    background: #fff;
    text-decoration: none;
}
.ts-page .ts-text-link {
    font-size:13px;
    font-weight:600;
    text-decoration:none
}
.ts-text-link span {
    margin-left:8px
}
.ts-page .ts-install-note {
    font-size:11px;
    color:var(--ts-muted);
    margin-top:17px
}
.ts-install-note span {
    margin:0 9px
}
.ts-hero-footer {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:46px;
    font-size:11px;
    color:var(--ts-muted)
}
.ts-hero-footer strong {
    font-weight:600;
    color:var(--ts-ink)
}
.ts-small-shield {
    display:grid;
    place-items:center;
    width:33px;
    height:38px;
    background:#e0edf7;
    border-radius:9px 9px 16px 16px;
    color:var(--ts-blue);
    font-size:17px
}
.ts-hero-art {
    height:690px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center
}
.ts-phone {
    width:239px;
    background:#142d40;
    border:7px solid #183247;
    border-radius:34px;
    overflow:hidden;
    box-shadow:0 32px 65px #15436b35,0 0 0 2px #91a7b8;
    position:relative;
    z-index:1;
    transform:rotate(6deg)
}
.ts-phone img {
    width:100%;
    height:auto;
    display:block
}
.ts-orbit {
    position:absolute;
    width:460px;
    height:460px;
    border:1px solid #ccdfef;
    border-radius:50%
}
.ts-orbit-two {
    width:590px;
    height:590px;
    border-style:dashed;
    opacity:.75
}
.ts-art-label {
    position:absolute;
    top:39px;
    font-size:9px;
    letter-spacing:.23em;
    color:#6c879a
}
.ts-art-caption {
    position:absolute;
    bottom:33px;
    font-size:11px;
    color:#667e90
}
.ts-float {
    position:absolute;
    z-index:2;
    left:0;
    bottom:136px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    padding:16px 21px;
    border:1px solid #e1eaf0;
    border-radius:13px;
    box-shadow:0 16px 35px #163a5912;
    transform:rotate(-3deg)
}
.ts-float>span {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    background:#eaf6f0;
    color:#268960;
    border-radius:50%
}
.ts-float strong {
    font-size:12px;
    display:block
}
.ts-float small {
    font-size:10px;
    color:var(--ts-muted)
}
.ts-facts {
    border-bottom:1px solid var(--ts-line)
}
.ts-facts .ts-wrap {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    padding-block:26px;
    font-size:12px;
    color:var(--ts-muted)
}
.ts-facts span {
    text-align:center;
    border-right:1px solid var(--ts-line)
}
.ts-facts span:last-child {
    border:0
}
.ts-facts b {
    color:var(--ts-ink);
    margin-right:10px;
    font-weight:600
}
.ts-section {
    padding-block:96px
}
.ts-section-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;
    margin-bottom:42px
}
.ts-page h2 {
    font-size:clamp(30px,3.2vw,44px)
}
.ts-section-head>p {
    font-size:14px;
    color:var(--ts-muted);
    padding-bottom:4px
}
.ts-steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:42px
}
.ts-steps article {
    border-top:1px solid var(--ts-line);
    padding-top:23px
}
.ts-step-number {
    display:flex;
    justify-content:space-between;
    color:var(--ts-blue);
    font-size:12px;
    margin-bottom:30px
}
.ts-step-number span {
    font-size:22px;
    line-height:1
}
.ts-page h3 {
    font-size:24px;
    letter-spacing:-.035em
}
.ts-steps p {
    font-size:14px;
    color:var(--ts-muted);
    margin-top:16px;
    max-width:330px
}
.ts-inside {
    padding-block:85px;
    background:#f5f8fa
}
.ts-showcase {
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:24px
}
.ts-report-card {
    background:#e4eff8;
    border-radius:20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    padding:38px 32px 0;
    overflow:hidden;
    height:415px
}
.ts-tag {
    font-size:9px;
    letter-spacing:.15em;
    font-weight:700;
    color:var(--ts-deep)
}
.ts-report-card h3 {
    font-size:32px;
    margin-top:37px
}
.ts-report-card p {
    font-size:14px;
    margin-top:18px;
    color:var(--ts-muted)
}
.ts-report-preview {
    margin-top:42px;
    border:6px solid #183247;
    border-radius:25px 25px 0 0;
    box-shadow:0 20px 30px #163a5920;
    overflow:hidden;
    transform:rotate(-3deg);
    transform-origin:bottom
}
.ts-report-preview img {
    width:100%;
    height:auto;
    display:block
}
.ts-control-card {
    padding:38px;
    background:white;
    border:1px solid #e2eaf0;
    border-radius:20px
}
.ts-control-symbol {
    font-size:66px;
    color:var(--ts-blue);
    line-height:1;
    margin:22px 0
}
.ts-control-card h3 {
    font-size:30px
}
.ts-control-card p {
    font-size:14px;
    color:var(--ts-muted);
    margin:17px 0 22px
}
.ts-page .ts-preview-note {
    font-size:11px;
    color:var(--ts-muted);
    margin-top:20px
}
.ts-trust {
    text-align:center;
    padding-block:92px
}
.ts-trust p {
    max-width:580px;
    color:var(--ts-muted);
    font-size:16px;
    margin:25px auto
}
.ts-faq-section {
    background:#f7f9fb;
    padding:75px 0
}
.ts-faq-grid {
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:80px
}
.ts-faq-grid>div>p {
    font-size:13px;
    color:var(--ts-muted);
    margin-top:24px
}
.ts-faq-grid>div>p a {
    display:block;
    color:var(--ts-deep)
}
.ts-faq-list details {
    border-bottom:1px solid var(--ts-line)
}
.ts-faq-list summary {
    list-style:none;
    display:flex;
    justify-content:space-between;
    gap:20px;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    padding:20px 0
}
.ts-faq-list summary::-webkit-details-marker {
    display:none
}
.ts-faq-list summary span {
    font-size:21px;
    color:var(--ts-blue);
    font-weight:400
}
.ts-faq-list details[open] summary span {
    transform:rotate(45deg)
}
.ts-faq-list details>div {
    font-size:14px;
    color:var(--ts-muted);
    padding:0 28px 22px 0
}
.ts-faq-list details a {
    color:var(--ts-deep);
    text-decoration:underline
}
.ts-bottom-cta {
    padding-block:80px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px
}
.ts-bottom-cta>div>p {
    font-size:11px;
    text-align:center;
    color:var(--ts-muted);
    margin-top:14px
}
.ts-page a:focus-visible,.ts-page summary:focus-visible {
    outline:3px solid #1677be;
    outline-offset:5px
}
.ts-page [id] {
    scroll-margin-top:100px
}
@media(min-width:1600px) {
    .ts-page .ts-wrap {
        width:1240px
    }
}
@media(max-width:1000px) {
    .ts-page .ts-wrap {
        width:calc(100% - 48px)
    }
    .ts-hero-grid {
        gap:10px
    }
    .ts-page h1 {
        font-size:50px
    }
    .ts-hero-art {
        height:650px
    }
    .ts-actions {
        gap:17px;
        flex-wrap:wrap
    }
    .ts-float {
        left:-20px
    }
    .ts-facts b {
        display:block
    }
    .ts-report-card {
        grid-template-columns:1fr 1fr;
        padding:26px 20px 0
    }
    .ts-report-card h3 {
        font-size:27px
    }
    .ts-control-card {
        padding:26px
    }
    .ts-faq-grid {
        gap:35px
    }
    .ts-steps {
        gap:24px
    }
}
@media(max-width:700px) {
    .ts-page .ts-wrap {
        width:calc(100% - 40px)
    }
    .ts-product-nav>div {
        display:none
    }
    .ts-page .ts-product-nav {
        min-height:65px
    }
    .ts-page .ts-product-name {
        font-size:14px
    }
    .ts-hero-grid {
        grid-template-columns:1fr
    }
    .ts-hero-copy {
        padding:42px 0 0
    }
    .ts-page h1 {
        font-size:49px
    }
    .ts-page .ts-eyebrow {
        font-size:9px;
        letter-spacing:.11em;
        margin-bottom:22px
    }
    .ts-page .ts-lead {
        font-size:16px;
        max-width:450px
    }
    .ts-hero-footer {
        margin-top:28px
    }
    .ts-hero-art {
        height:575px
    }
    .ts-phone {
        width:211px
    }
    .ts-float {
        left:0;
        bottom:95px;
        padding:12px 16px
    }
    .ts-art-label {
        display:none
    }
    .ts-art-caption {
        bottom:20px
    }
    .ts-orbit {
        width:345px;
        height:345px
    }
    .ts-orbit-two {
        width:440px;
        height:440px
    }
    .ts-facts .ts-wrap {
        gap:10px;
        padding-block:21px;
        font-size:10px
    }
    .ts-facts b {
        font-size:11px;
        margin:0 0 4px
    }
    .ts-section {
        padding-block:60px
    }
    .ts-section-head {
        display:block;
        margin-bottom:30px
    }
    .ts-section-head>p {
        margin-top:20px
    }
    .ts-steps {
        grid-template-columns:1fr;
        gap:28px
    }
    .ts-step-number {
        margin-bottom:15px
    }
    .ts-steps p {
        max-width:none;
        margin-top:12px
    }
    .ts-inside {
        padding-block:55px
    }
    .ts-showcase {
        grid-template-columns:1fr
    }
    .ts-report-card {
        height:390px;
        padding:28px 24px 0
    }
    .ts-report-card h3 {
        font-size:28px
    }
    .ts-report-preview {
        margin-top:62px
    }
    .ts-control-card {
        padding:28px
    }
    .ts-control-symbol {
        float:right;
        margin:25px 5px
    }
    .ts-control-card h3 {
        margin-top:27px
    }
    .ts-trust {
        padding-block:60px
    }
    .ts-trust p {
        font-size:14px
    }
    .ts-faq-section {
        padding-block:55px
    }
    .ts-faq-grid {
        grid-template-columns:1fr;
        gap:25px
    }
    .ts-bottom-cta {
        padding-block:55px;
        display:block
    }
    .ts-bottom-cta>div+div {
        margin-top:28px;
        text-align:left
    }
    .ts-bottom-cta>div>p {
        text-align:left
    }
    .ts-page .ts-button {
        padding:7px 8px 7px 18px;
        font-size:13px
    }
    .ts-page .ts-install-note {
        font-size:10px
    }
    .ts-actions {
        gap:18px
    }
    .ts-page .ts-text-link {
        font-size:12px
    }
}
@media(prefers-reduced-motion:reduce) {
    .ts-page .ts-button {
        transition:none;
        transform:none
    }
}

/* Allow translated labels and longer words without clipping the shared layout. */
.ts-page .ts-actions {
    flex-wrap: wrap;
}
.ts-page .ts-button {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}
.ts-page .ts-button img {
    flex-shrink: 0;
}
.ts-page .ts-section-head > div,
.ts-page .ts-report-card > div,
.ts-page .ts-bottom-cta > div {
    min-width: 0;
}
.ts-page .ts-section-head > div {
    flex: 1.3;
}
.ts-page .ts-section-head > p {
    flex: 1;
}
.ts-page .ts-report-card {
    height: auto;
    min-height: 440px;
}
.ts-page .ts-report-card h3 {
    hyphens: auto;
    overflow-wrap: break-word;
}
.ts-page .ts-report-card p {
    padding-bottom: 28px;
}
.ts-page .ts-report-preview {
    height: 370px;
    align-self: end;
}
.ts-page .ts-facts span {
    padding-inline: 8px;
}
:lang(zh) .ts-page h1,
:lang(zh) .ts-page h2,
:lang(zh) .ts-page h3 {
    line-height: 1.25;
    letter-spacing: 0;
}
@media (max-width: 700px) {
    .ts-page .ts-report-card {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 0;
    }
    .ts-page .ts-report-card h3 br {
        display: none;
    }
    .ts-page .ts-report-preview {
        width: 210px;
        height: 320px;
        margin: 10px auto 0;
    }
    .ts-page .ts-report-card h3 {
        margin-top: 24px;
    }
    .ts-page .ts-eyebrow {
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ts-page .ts-button,
    .ts-page .ts-apk-button,
    .ts-page .ts-button-arrow,
    .ts-page .ts-button-arrow svg {
        transition: none;
        transform: none;
    }
}
