/* Actual app screenshots in proportional, lightly overlapping device frames. */
.landing-page .landing-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-top: 76px; padding-bottom: 62px; }
.landing-page .landing-hero h1 { letter-spacing: -.045em; }
.landing-page .hero-device-preview { display: grid; grid-template-columns: minmax(0, 77fr) minmax(0, 6fr) minmax(0, 17fr); align-items: end; width: 100%; max-width: 570px; margin: 0 auto; container-type: inline-size; }
.landing-page .hero-device { --frame-thickness: .8cqw; position: relative; display: block; min-width: 0; padding: 0; color: var(--text-primary); text-decoration: none; border: 0; border-radius: var(--device-corner); background: #111214; box-shadow: 0 12px 26px -18px color-mix(in srgb, var(--text-primary) 30%, transparent); }
/* Scale the supplied corner radii against 1024 pt iPad and 390 pt iPhone widths. */
.landing-page .device-ipad { --device-corner: calc(83cqw * 18 / 1024); grid-column: 1 / 3; grid-row: 1; aspect-ratio: 248.6 / 179.5; }
.landing-page .device-screen { position: absolute; inset: var(--frame-thickness); overflow: hidden; border-radius: calc(var(--device-corner) - var(--frame-thickness)); background: var(--canvas-bg); }
.landing-page .device-screenshot { display: none; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.landing-page .device-screenshot[data-device-theme="light"] { display: block; }
:root[data-theme]:not([data-theme="light"]) .landing-page .device-screenshot[data-device-theme="light"] { display: none; }
:root[data-theme="dark"] .landing-page .device-screenshot[data-device-theme="dark"],
:root[data-theme="ui"] .landing-page .device-screenshot[data-device-theme="ui"],
:root[data-theme="itb"] .landing-page .device-screenshot[data-device-theme="itb"],
:root[data-theme="ugm"] .landing-page .device-screenshot[data-device-theme="ugm"] { display: block; }
.landing-page .device-iphone { --device-corner: calc(23cqw * 55 / 390); grid-column: 2 / 4; grid-row: 1; z-index: 1; aspect-ratio: 9 / 19.5; transform: translateY(4%); box-shadow: 0 12px 24px -12px #0005; }
.landing-page .device-dynamic-island { position: absolute; z-index: 1; left: 50%; top: 2.4%; width: 29%; aspect-ratio: 3.6; transform: translateX(-50%); border-radius: 999px; background: #101113; }
.landing-page .phone-screenshot-area { position: absolute; inset: 0; }
.landing-page .phone-screenshot-area .device-screenshot { position: absolute; inset: 0; }
.landing-page .device-preview-caption { grid-column: 1 / -1; margin-top: calc(20px + 2cqw); text-align: center; font-size: .69rem; line-height: 1.8; color: var(--text-muted); }

.landing-page #fitur { padding-top: 46px; }
.landing-page .program-section-heading { flex-direction: column; align-items: center; gap: 0; margin-bottom: 37px; text-align: center; }
.landing-page .program-heading-copy { width: 100%; }
.landing-page .program-heading-copy :is(.section-title, .section-desc) { margin-inline: auto; }
.landing-page .program-heading-copy .section-title { max-width: 850px; }
.landing-page .program-heading-copy .section-desc { max-width: 690px; }
.landing-page .program-section-heading .program-tabs { align-self: center; margin-top: 25px; }
.landing-page .landing-countdown { width: 100%; padding-top: 28px; }
.landing-page .landing-countdown-sentence { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 0 17px; margin: 0; color: var(--text-primary); font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.4; font-weight: 650; letter-spacing: -.035em; }
.landing-page .landing-countdown .countdown-number { position: relative; isolation: isolate; padding-inline: 3px; font-family: var(--font-display); font-size: clamp(4.75rem, 8vw, 7rem); font-weight: 800; letter-spacing: -.065em; line-height: 1.1; color: var(--text-primary); }
.landing-page .landing-countdown .countdown-number::after { position: absolute; z-index: -1; content: ''; bottom: .02em; left: 0; width: 100%; height: .14em; border-radius: 999px; background: var(--category-mint-bg); transform: rotate(-3deg); }
.landing-page .landing-countdown[data-exam-countdown="tka"] .countdown-number::after { background: var(--category-purple-bg); }
.landing-page .landing-countdown-caption { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px 10px; margin: 16px 0 0; color: var(--text-muted); font-size: .7rem; line-height: 1.6; }
.landing-page .landing-countdown-caption time { color: var(--text-secondary); font-weight: 700; }
.landing-page .program-panel { padding-top: 29px; }
.landing-page .program-intro { margin-bottom: 19px; }
.landing-page .program-intro h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.landing-page .program-intro p { max-width: 730px; font-size: .82rem; }
.landing-page .program-highlights { margin-bottom: 21px; }
.landing-page .subject-marquee-shell { position: relative; min-width: 0; padding: 0; border: 0; background: transparent; }
.landing-page .subject-marquee { position: relative; z-index: 1; width: 100%; min-width: 0; overflow: hidden; padding: 7px 0 12px; touch-action: pan-y; cursor: grab; border-radius: 17px; }
.landing-page .subject-marquee.is-dragging { cursor: grabbing; }
.landing-page .subject-marquee:focus-visible { outline: 3px solid var(--focus-ring, var(--primary)); outline-offset: 5px; }
.landing-page .subject-marquee .program-subject-grid { display: flex; align-items: stretch; gap: 18px; width: max-content; max-width: none; will-change: transform; user-select: none; }
.landing-page .subject-marquee .program-subject-grid .subtest-mini-card { position: relative; flex: 0 0 302px; width: 302px; min-height: 228px; padding: 24px 23px 30px; border-radius: 22px; grid-column: auto; transition: transform .25s ease, box-shadow .25s ease; }
.landing-page .subject-marquee .subtest-mini-card:hover { transform: translateY(-5px); box-shadow: 0 7px 0 color-mix(in srgb, var(--text-primary) 8%, transparent); }
.landing-page .subject-marquee.is-dragging .subtest-mini-card { transform: none; box-shadow: none; }
.landing-page .subject-marquee .subtest-mini-card h3 { max-width: 250px; min-height: 46px; font-size: .95rem; line-height: 1.5; letter-spacing: -.02em; }
.landing-page .subject-marquee .subtest-mini-card p { font-size: .78rem; line-height: 1.85; }
.landing-page .subject-marquee .subtest-code-badge { min-width: 38px; padding: 6px 9px; text-align: center; }
.landing-page .subject-marquee .header-sub { margin-bottom: 20px; }
.landing-page .subject-marquee .subtest-mini-card[data-subject-index="1"] { background: var(--category-yellow-bg); --landing-card-text: var(--category-yellow-text); }
.landing-page .subject-marquee .subtest-mini-card[data-subject-index="2"] { background: var(--category-purple-bg); --landing-card-text: var(--category-purple-text); }
.landing-page .subject-marquee .subtest-mini-card[data-subject-index="3"] { background: var(--category-blue-bg); --landing-card-text: var(--category-blue-text); }
.landing-page .subject-marquee .subtest-mini-card[data-subject-index="4"] { background: var(--category-mint-bg); --landing-card-text: var(--category-mint-text); }
.landing-page .subject-marquee .subtest-mini-card[data-subject-index="5"] { background: var(--category-ochre-bg); --landing-card-text: var(--category-ochre-text); }
.landing-page .subject-marquee .subtest-mini-card[data-subject-index="6"] { background: var(--category-lavender-bg); --landing-card-text: var(--category-lavender-text); }
.landing-page .subject-marquee .subtest-mini-card[data-subject-index="7"] { background: var(--category-sky-bg); --landing-card-text: var(--category-sky-text); }
.landing-page .subject-marquee [data-program="tka"] .subtest-mini-card[data-subject-color="mint"] { background: var(--tka-mint-bg); --landing-card-text: var(--tka-mint-text); }
.landing-page .subject-marquee [data-program="tka"] .subtest-mini-card[data-subject-color="ochre"] { background: var(--tka-ochre-bg); --landing-card-text: var(--tka-ochre-text); }
.landing-page .subject-marquee [data-program="tka"] .subtest-mini-card[data-subject-color="lavender"] { background: var(--tka-lavender-bg); --landing-card-text: var(--tka-lavender-text); }
.landing-page .subject-marquee [data-program="tka"] .subtest-mini-card[data-subject-color="blue"] { background: var(--tka-blue-bg); --landing-card-text: var(--tka-blue-text); }
.landing-page .subject-marquee [data-program="tka"] .subtest-mini-card[data-subject-color="indigo"] { background: var(--tka-indigo-bg); --landing-card-text: var(--tka-indigo-text); }
.landing-page .subject-marquee [data-program="tka"] .subtest-mini-card[data-subject-color="lime"] { background: var(--tka-lime-bg); --landing-card-text: var(--tka-lime-text); }
.landing-page .subject-marquee [data-program="tka"] .subtest-mini-card[data-subject-color="rose"] { background: var(--tka-rose-bg); --landing-card-text: var(--tka-rose-text); }
.landing-page .subject-marquee [data-program="tka"] .subtest-mini-card[data-subject-color="purple"] { background: var(--tka-purple-bg); --landing-card-text: var(--tka-purple-text); }
.landing-page .subject-marquee [data-program="tka"] .subtest-mini-card[data-subject-color="coral"] { background: var(--tka-coral-bg); --landing-card-text: var(--tka-coral-text); }
.landing-page .subject-marquee [data-program="tka"] .subtest-mini-card[data-subject-color="peach"] { background: var(--tka-peach-bg); --landing-card-text: var(--tka-peach-text); }
.landing-page .subject-marquee [data-program="tka"] .subtest-mini-card[data-subject-color="yellow"] { background: var(--tka-yellow-bg); --landing-card-text: var(--tka-yellow-text); }
.landing-page .subject-marquee [data-program="tka"] .subtest-mini-card[data-subject-color="sand"] { background: var(--tka-sand-bg); --landing-card-text: var(--tka-sand-text); }
.landing-page .subject-marquee [data-program="tka"] .subtest-mini-card[data-subject-color="teal"] { background: var(--tka-teal-bg); --landing-card-text: var(--tka-teal-text); }
.landing-page :is(.tka-subject-icon, .utbk-subject-icon) { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid color-mix(in srgb, var(--landing-card-text) 25%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--landing-card-text) 6%, transparent); color: var(--landing-card-text); }
.landing-page :is(.tka-subject-icon, .utbk-subject-icon) svg { display: block; width: 28px; height: 28px; }
.landing-page :is(.tka-subject-labels, .utbk-subject-labels) { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.landing-page :is(.tka-subject-labels, .utbk-subject-labels) .subtest-code-badge { padding: 5px 8px; font-size: .65rem; }
.landing-page :is(.tka-subject-labels, .utbk-subject-labels) .subtest-meta { font-size: .65rem; }
.landing-page .subject-marquee[data-marquee-reduced="true"] { overflow-x: auto; touch-action: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
.landing-page .subject-marquee[data-marquee-reduced="true"] .program-subject-grid { transform: none !important; will-change: auto; }
.landing-page .subject-marquee[data-marquee-reduced="true"] .subtest-mini-card { scroll-snap-align: start; }
.landing-page .program-note { margin-top: 13px; }

@media (max-width: 1160px) and (min-width: 861px) {
    .landing-page .landing-hero { gap: 34px; }
}
@media (max-width: 860px) {
    .landing-page .landing-hero { grid-template-columns: minmax(0, 1fr); gap: 25px; padding-top: 54px; padding-bottom: 30px; }
    .landing-page .hero-device-preview { max-width: 560px; }
    .landing-page #fitur { padding-top: 38px; }
    .landing-page .program-section-heading { align-items: center; gap: 0; }
    .landing-page .program-section-heading .program-tabs { align-self: center; }
}
@media (max-width: 600px) {
    .landing-page .landing-hero { padding-top: 40px; gap: 23px; }
    .landing-page .hero-device-preview { max-width: 450px; margin-top: 13px; }
    .landing-page .program-section-heading { margin-bottom: 27px; }
    .landing-page .program-heading-copy .section-title { font-size: 1.65rem; }
    .landing-page .program-heading-copy .section-desc { margin-bottom: 0; font-size: .8rem; }
    .landing-page .landing-countdown { padding-top: 25px; }
    .landing-page .landing-countdown-sentence { font-size: 1rem; gap: 0 9px; }
    .landing-page .landing-countdown .countdown-number { font-size: clamp(3.4rem, 16vw, 5rem); }
    .landing-page .landing-countdown-caption { font-size: .64rem; gap: 4px 7px; margin-top: 10px; }
    .landing-page .program-section-heading .program-tabs { width: auto; min-width: 236px; margin-top: 22px; }
    .landing-page .program-intro h3 { font-size: 1.25rem; }
    .landing-page .program-intro p { font-size: .79rem; }
    .landing-page .subject-marquee .program-subject-grid { gap: 13px; }
    .landing-page .subject-marquee .program-subject-grid .subtest-mini-card { flex-basis: clamp(230px, calc(100vw - 84px), 270px); width: clamp(230px, calc(100vw - 84px), 270px); min-height: 228px; padding: 22px 21px 25px; }
}
@media (max-width: 360px) {
    .landing-page .landing-countdown-sentence { gap: 0 7px; font-size: .9rem; }
    .landing-page .landing-countdown .countdown-number { font-size: 3.3rem; }
    .landing-page .landing-countdown-caption > span:last-child { flex-basis: 100%; }
    .landing-page .landing-countdown-caption > span[aria-hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .landing-page .subject-marquee { overflow-x: auto; touch-action: auto; }
    .landing-page .subject-marquee .program-subject-grid { transform: none !important; will-change: auto; }
    .landing-page .subject-marquee [data-marquee-clone] { display: none; }
    .landing-page .subject-marquee .subtest-mini-card:hover { transform: none; }
}