/* Keep the desktop frame and its contents in the same proportions at every width. */
.app-window { container-type: inline-size; border-radius: 8px; }
.window-bar { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; height: 2.9cqw; overflow: hidden; padding: 0 0 0 1.35cqw; background: #15171a; border-bottom: .07746cqw solid #282c30; }
.window-title { display: flex; align-items: center; height: 100%; gap: .67cqw; font-family: "Segoe UI", sans-serif; font-size: 1.12cqw; line-height: normal; font-weight: 400; letter-spacing: 0; color: #d4d7dc; }
.window-title img { display: block; width: 1.35cqw; height: 1.35cqw; object-fit: contain; flex: 0 0 auto; }
.window-controls { align-self: stretch; display: flex; color: #bec3ca; }
.window-controls > span { width: 3.8cqw; flex: 0 0 3.8cqw; display: flex; align-items: center; justify-content: center; }
.window-controls svg { display: block; width: 1.12cqw; height: 1.12cqw; fill: none; stroke: currentColor; stroke-width: 1; }


/* Navigation styling belongs to the alternative pages. */


/* YPT comparison page. Shared navigation and desktop frame appear above. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { background: #080a0b; color: #eef1f3; }
.ypt-main { --section-before: clamp(72px, 11vh, 148px); --section-after: clamp(76px, 12vh, 160px); overflow: clip; background: #080a0b; }
.ypt-main *, .ypt-main *::before, .ypt-main *::after { box-sizing: border-box; }
.ypt-skip { position: fixed; z-index: 100; top: 10px; left: 16px; padding: 12px 20px; background: #5ee0b4; color: #08120f; border-radius: 8px; transform: translateY(-180%); }
.ypt-skip:focus { transform: translateY(0); }
.ypt-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ypt-container { width: min(1080px, calc(100% - 48px)); margin: 0 auto; }
.ypt-hero { padding: 82px 24px 44px; text-align: center; }
.ypt-eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 22px; font-size: .68rem; font-weight: 600; letter-spacing: .18em; color: #95b3a7; }
.ypt-eyebrow > span, .ypt-status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #4bdaa7; box-shadow: 0 0 14px #4bdaa750; }
.ypt-hero h1 { max-width: 1000px; margin: 0 auto; font-size: clamp(2.35rem, 5vw, 4.4rem); font-weight: 700; line-height: 1.12; letter-spacing: -.045em; }
.ypt-hero h1 em { color: #66dfb4; font-style: normal; }
.ypt-title-copy { font-size: .78em; }
.ypt-intro { max-width: 650px; margin: 24px auto 0; color: #a8b3ba; font-size: 1.04rem; line-height: 1.75; }
.ypt-actions { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 16px; }
.ypt-button, .ypt-secondary-button { display: inline-flex; justify-content: center; align-items: center; gap: 20px; min-height: 48px; padding: 12px 23px; border: 1px solid #5bd8aa; border-radius: 9px; background: #5bd8aa; color: #071d15; font-size: .9rem; font-weight: 700; text-decoration: none; transition: background-color 160ms ease; }
.ypt-button:hover { background: #7ae6c0; }
.ypt-secondary-button { color: #d9e4df; border-color: #3c4349; background: #191d20; }
.ypt-secondary-button:hover { background: #272c30; }
.ypt-text-link { display: inline-flex; gap: 10px; align-items: center; color: #76dfb9; text-decoration: none; font-size: .88rem; font-weight: 600; }
.ypt-text-link:hover { color: #b2f7db; }
.ypt-platforms { margin: 17px 0 0; color: #7e8b88; font-size: .75rem; line-height: 1.7; }
.ypt-platforms span { margin: 0 7px; }
.ypt-preview { width: min(1000px, calc(100% - 48px)); margin: 0 auto; padding-bottom: var(--section-after); }
.ypt-preview .app-window { border: 1px solid #343a40; background: #090a0b; box-shadow: 0 24px 90px #0006; }
.ypt-preview-fallback { padding: 40px; text-align: center; color: #a8b3ba; }
.ypt-comparison { padding-block: var(--section-before) var(--section-after); }
.ypt-section-copy { text-align: center; max-width: 700px; margin: 0 auto 42px; }
.ypt-kicker { color: #59d6a7; font-size: .85rem; font-weight: 600; margin: 0 0 16px; }
.ypt-main h2 { margin: 0; font-size: clamp(1.85rem, 3.3vw, 2.8rem); letter-spacing: -.035em; line-height: 1.2; font-weight: 650; }
.ypt-section-copy > p:last-child:not(.ypt-kicker) { max-width: 590px; margin: 20px auto 0; color: #9eabb2; font-size: .95rem; line-height: 1.75; }
.ypt-table-wrap { overflow-x: auto; border: 1px solid #2b3034; border-radius: 16px; background: #111315; scrollbar-width: thin; scrollbar-color: #41474d #111315; }
.ypt-table { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; text-align: left; }
.ypt-table col { width: 35%; }
.ypt-table col:last-child { width: 30%; }
.ypt-fokasu-column { background: #1b1f22; }
.ypt-table th, .ypt-table td { padding: 25px 28px; border-bottom: 1px solid #2d3236; }
.ypt-table thead th { height: 105px; font-size: 1.35rem; font-weight: 650; vertical-align: middle; }
.ypt-table thead th:first-child { color: #97a39d; font-size: .8rem; font-weight: 500; }
.ypt-table thead th:nth-child(2) { color: #9cf0c9; }
.ypt-table thead img { vertical-align: -3px; margin-right: 7px; }
.ypt-table small { display: block; margin-top: 7px; font-size: .72rem; color: #92a499; font-weight: 400; }
.ypt-table tbody th { font-size: .94rem; font-weight: 600; line-height: 1.7; }
.ypt-table tbody th, .ypt-table tbody td { vertical-align: top; }
.ypt-table td { color: #a6b1ae; font-size: .85rem; line-height: 1.7; }
.ypt-table td:nth-child(2) { color: #d9e9df; }
.ypt-check { display: inline-block; color: #65ddb0; margin-right: 9px; font-size: 1rem; line-height: 1; }
.ypt-table tbody tr:last-child > * { border-bottom: 0; }
.ypt-mobile-label { display: none; }
.ypt-reasons { padding-block: var(--section-before) var(--section-after); }
.ypt-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ypt-feature-grid:focus-visible { outline: 2px solid #8ceac6; outline-offset: 5px; border-radius: 16px; }
.ypt-feature-card { overflow: hidden; border: 1px solid #2b2f33; border-radius: 16px; background: #141618; }
.ypt-block-visual, .ypt-clan-visual { height: 260px; margin: 24px 24px 0; padding: 22px; border: 1px solid #303438; border-radius: 10px; background: #111315; }
.ypt-mini-label { display: flex; align-items: center; gap: 9px; margin-bottom: 23px; color: #c9dbd0; font-size: .78rem; font-weight: 600; }
.ypt-mini-label > span:last-child { margin-left: auto; }
.ypt-block-item { display: flex; justify-content: space-between; gap: 10px; padding: 14px 0; border-top: 1px solid #2c3034; color: #b7c9bd; font-size: .85rem; }
.ypt-block-item > span:last-child { font-size: .7rem; color: #67d4a7; padding: 2px 7px; border-radius: 4px; background: #252a2d; }
.ypt-live-label { color: #789985; font-size: .65rem; font-weight: 400; }
.ypt-clan-visual .ypt-mini-label { margin-bottom: 13px; }
.ypt-chat-bubble { margin: 0 32px 12px 0; padding: 10px 14px; border-radius: 8px 8px 8px 0; background: #22262a; font-size: .75rem; }
.ypt-chat-bubble > span { color: #e0c378; font-size: .65rem; }
.ypt-chat-bubble p { margin: 4px 0 0; color: #bfd0c3; line-height: 1.5; }
.ypt-chat-reply { margin: 0 0 0 30px; background: #2a2e32; border-radius: 8px 8px 0 8px; }
.ypt-feature-copy { padding: 30px; }
.ypt-feature-number { font-size: .65rem; letter-spacing: .1em; color: #76a68a; }
.ypt-feature-copy h3 { margin: 16px 0 12px; font-size: 1.45rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.3; }
.ypt-feature-copy > p { color: #94a59a; font-size: .87rem; line-height: 1.8; margin: 0 0 22px; }
.ypt-choice { padding-block: var(--section-before) var(--section-after); }
.ypt-choice > .ypt-kicker, .ypt-choice > h2 { text-align: center; }
.ypt-choice > h2 { max-width: 700px; margin: auto; }
.ypt-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; max-width: 850px; margin: 42px auto 0; }
.ypt-choice h3 { margin: 0 0 13px; font-size: 1rem; font-weight: 600; }
.ypt-choice p:not(.ypt-kicker) { margin: 0; color: #95a49a; font-size: .9rem; line-height: 1.85; }
.ypt-faq { max-width: 800px; padding-block: var(--section-before) var(--section-after); }
.ypt-faq details { border-bottom: 1px solid #2d3236; }
.ypt-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 23px 0; color: #d4ded8; font-size: .95rem; cursor: pointer; list-style: none; }
.ypt-faq summary::-webkit-details-marker { display: none; }
.ypt-faq summary::after { content: '+'; color: #75b991; font-size: 1.3rem; }
.ypt-faq details[open] summary::after { content: '−'; }
.ypt-faq details > p { margin: 0 35px 25px 0; color: #98a79d; font-size: .88rem; line-height: 1.85; }
.ypt-faq a { color: #7adfb4; text-underline-offset: 3px; }
.ypt-main a:focus-visible, .ypt-main summary:focus-visible, .ypt-table-wrap:focus-visible { outline: 2px solid #8ceac6; outline-offset: 5px; }
@media (max-width: 800px) {
 .ypt-hero { padding-top: 60px; }
 .ypt-table th, .ypt-table td { padding: 20px; }
 .ypt-feature-grid { gap: 16px; }
 .ypt-block-visual, .ypt-clan-visual { padding: 16px; margin: 16px 16px 0; height: 250px; }
 .ypt-feature-copy { padding: 24px; }
 .ypt-choice-grid { gap: 35px; }
}
@media (max-width: 600px) {
 .ypt-table-wrap { overflow: hidden; }
 .ypt-table { display: block; min-width: 0; }
 .ypt-table colgroup { display: none; }
 .ypt-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .ypt-table tbody { display: block; }
 .ypt-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid #2d3236; }
 .ypt-table tbody tr:last-child { border-bottom: 0; }
 .ypt-table tbody th { grid-column: 1 / -1; display: block; padding: 20px 18px 14px; border: 0; }
 .ypt-table tbody td { display: block; min-width: 0; padding: 0 18px 22px; border: 0; overflow-wrap: anywhere; }
 .ypt-table tbody td:nth-child(2) { background: #1b1f22; padding-top: 12px; }
 .ypt-table tbody td:last-child { padding-top: 12px; }
 .ypt-mobile-label { display: block; margin-bottom: 8px; color: #d4ded8; font-size: .8rem; font-weight: 650; line-height: 1.4; }
 .ypt-table td:nth-child(2) .ypt-mobile-label { color: #9cf0c9; }
 html { scroll-padding-top: 90px; }
 .ypt-container, .ypt-preview { width: calc(100% - 32px); }
 .ypt-hero { padding: 45px 20px 32px; }
 .ypt-eyebrow { font-size: .6rem; }
 .ypt-hero h1 { font-size: clamp(2rem, 7.8vw, 2.8rem); }
 .ypt-title-copy { font-size: 1em; }
 .ypt-intro { font-size: .92rem; margin: 22px auto 0; }
 .ypt-actions { gap: 20px; }
 .ypt-platforms { font-size: .68rem; }
 .ypt-section-copy { margin-bottom: 30px; }
 .ypt-main h2 { font-size: 1.85rem; }
 .ypt-section-copy > p:last-child:not(.ypt-kicker) { font-size: .88rem; }
 .ypt-feature-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(100% - 28px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding: 4px 4px 16px; scrollbar-width: thin; scrollbar-color: #41474d transparent; }
 .ypt-feature-card { min-width: 0; display: flex; flex-direction: column; scroll-snap-align: start; }
 .ypt-block-visual, .ypt-clan-visual { height: auto; min-height: 210px; margin: 16px 16px 0; padding: 14px; }
 .ypt-mini-label { flex-wrap: wrap; }
 .ypt-feature-copy { display: flex; flex-direction: column; flex: 1; padding: 22px 18px; }
 .ypt-feature-copy h3 { font-size: 1.25rem; }
 .ypt-feature-copy .ypt-text-link { margin-top: auto; }
 .ypt-choice-grid { grid-template-columns: 1fr; gap: 24px; }
 .ypt-choice-grid { margin-top: 30px; padding: 0 12px; gap: 30px; }
 .ypt-faq summary { font-size: .9rem; }
 .ypt-button, .ypt-secondary-button { font-size: .83rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ypt-button, .ypt-secondary-button { transition: none; } }
@media (max-width: 700px) {
 .ypt-main { --section-before: 106px; --section-after: 106px; }
}

.ypt-table-brand { display: inline-flex; align-items: flex-start; gap: 7px; }
.ypt-table thead .ypt-table-brand img { flex-shrink: 0; margin: 3px 0 0; }