/* ===== Theme ===== */
:root {
    --bg: #11151a;
    --bg2: #1f252b;
    --surface: rgba(34,39,44,0.96);
    --surface2: rgba(52,61,70,0.8);
    --border: rgba(226,232,235,0.3);
    --border2: rgba(var(--yakoru-brand-gold-rgb),0.48);
    --text: rgba(249,251,252,0.96);
    --muted: rgba(238,243,246,0.88);
    --subtle: rgba(214,224,230,0.72);
    --gold: var(--yakoru-brand-gold);
    --goldSoft: rgba(var(--yakoru-brand-gold-rgb),0.24);
    --goldBorder: rgba(var(--yakoru-brand-gold-rgb),0.52);
    --aqua: var(--yakoru-brand-gold);
    --shoreBlue: var(--yakoru-brand-gold);
    --aquaSoft: rgba(var(--yakoru-brand-gold-rgb),0.18);
    --shoreBlueSoft: rgba(var(--yakoru-brand-gold-rgb), 0.22);
    --shadow: 0 20px 64px rgba(0,0,0,0.46);
}

/* ===== Page shell ===== */
html:has(.lp) {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html:has(.lp) {
        scroll-behavior: auto;
    }
}

.lp {
    min-height: 100vh;
    font-family: var(--font);
    font-synthesis: none;
    font-synthesis-weight: none;
    background: var(--bg);
    color: var(--text);
}

.lp [data-preview-panel][hidden] {
    display: none !important;
}

.home-motion-ready .lp .lpHero:not(.is-in-view):not(.is-exiting-view):not(.is-prearmed) .lpHero__bg::before,
.home-motion-ready .lp .lpHero:not(.is-in-view):not(.is-exiting-view):not(.is-prearmed) :where(.lpHeroSentence, .lpHeroOutcome__line),
.home-motion-ready .lp .lpWorkflowVisual:not(.is-in-view):not(.is-exiting-view):not(.is-prearmed) :where(.lpWorkflowSceneTrack, .lpPaperPile, .lpWorkflowSystem--icons, .lpSystemTile),
.home-motion-ready .lp .lpPremiumRibbon:not(.is-in-view):not(.is-exiting-view):not(.is-prearmed) .lpPremiumRibbon__track,
.home-motion-ready .lp .lpStoryStep--phone:not(.is-in-view):not(.is-exiting-view):not(.is-prearmed) :where(.lpPhonePreview__view, .lpYakoPhoneCard, .lpPhoneProofNote),
.home-motion-ready .lp .lpStoryStep--phone:not(.is-in-view):not(.is-exiting-view):not(.is-prearmed) .lpPhonePreview__screen::after,
.home-motion-ready .lp .lpStoryStep--site:not(.is-in-view):not(.is-exiting-view):not(.is-prearmed) :where(.lpYakogakuMini, .lpYakogakuMini__card, .lpProblemStack, .lpAnimeSurpriseBurst),
.home-motion-ready .lp .lpStoryStep--site:not(.is-in-view):not(.is-exiting-view):not(.is-prearmed) .lpYakogakuWindow__stage::before,
.home-motion-ready .lp .lpStoryStep--data:not(.is-in-view):not(.is-exiting-view):not(.is-prearmed) :where(.lpAnalyticsBoard__metric, .lpAnalyticsBoard__bottom, .lpAnalyticsBoard__chart, .lpDataProofCard) {
    animation-play-state: paused !important;
    will-change: auto !important;
}

.lp :where(.lpWorkflowVisual, .lpProductScene, .lpPremiumVisual--analyticsResolve, .lpPremiumRibbon__track, .lpPremiumProof__grid) {
    contain: layout paint;
}

.lp :where(.lpWorkflowFeature, .lpStoryStep) {
    content-visibility: auto;
}

.lp .lpWorkflowFeature,
.lp .lpStoryStep--site {
    contain-intrinsic-size: 1px 560px;
}

.lp .lpStoryStep--phone {
    contain-intrinsic-size: 1px 576px;
}

.lp .lpStoryStep--data {
    contain-intrinsic-size: 1px 796px;
}

.lp .lpPremiumRibbon {
    content-visibility: auto;
    contain-intrinsic-size: 1px 112px;
}

.lp :where(.lpWorkflowFeature, .lpStoryStep).is-render-prearmed,
.lp .lpPremiumRibbon.is-render-prearmed {
    content-visibility: visible;
}

/* ===== Buttons ===== */

/* ===== Hero ===== */
.lpAnalyticsBoard {
    position: relative;
    width: min(100%, 500px);
    min-height: 334px;
    padding: 16px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 12px;
    overflow: hidden;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.26);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(22, 25, 25, 0.92), rgba(7, 9, 11, 0.96)),
        radial-gradient(360px 220px at 18% 18%, rgba(var(--yakoru-brand-gold-rgb), 0.12), transparent 70%),
        radial-gradient(340px 220px at 80% 12%, rgba(var(--yakoru-brand-gold-rgb), 0.12), transparent 72%);
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.lpAnalyticsBoard::before {
    content: "";
    position: absolute;
    inset: 44px 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--yakoru-brand-gold-rgb), 0.36), rgba(var(--yakoru-brand-gold-rgb), 0.28), transparent);
    opacity: 0.8;
}

.lpAnalyticsBoard__top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.lpAnalyticsBoard__heading {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.lpAnalyticsBoard__heading span,
.lpAnalyticsBoard__metric span,
.lpAnalyticsBoard__callout span {
    color: rgba(224, 229, 229, 0.62);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .09em;
    line-height: 1;
    text-transform: uppercase;
}

.lpAnalyticsBoard__heading strong {
    color: rgba(247, 250, 255, 0.94);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.1;
}

.lpAnalyticsBoard__status {
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.2);
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(var(--yakoru-brand-gold-rgb), 0.07);
    color: rgba(var(--yakoru-brand-gold-rgb), 0.9);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
}

.lpAnalyticsBoard__metrics {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.lpAnalyticsBoard__metric {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.18);
    border-radius: 14px;
    display: grid;
    gap: 6px;
    background: rgba(8, 13, 17, 0.62);
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.lpAnalyticsBoard__metric--gold {
    border-color: rgba(var(--yakoru-brand-gold-rgb), 0.28);
    background: linear-gradient(135deg, rgba(var(--yakoru-brand-gold-rgb), 0.13), rgba(8, 13, 17, 0.7));
}

.lpAnalyticsBoard__metric strong {
    color: rgba(var(--yakoru-brand-gold-rgb), 0.95);
    font-size: 22px;
    font-weight: 900;
    line-height: .95;
}

.lpAnalyticsBoard__metric--gold strong {
    color: rgba(var(--yakoru-brand-gold-rgb), 0.96);
}

.lpAnalyticsBoard__chart {
    position: relative;
    z-index: 1;
    min-height: 136px;
    overflow: visible;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.16);
    border-radius: 16px;
    background:
        linear-gradient(90deg, rgba(var(--yakoru-brand-gold-rgb), 0.07) 1px, transparent 1px),
        linear-gradient(180deg, rgba(var(--yakoru-brand-gold-rgb), 0.055) 1px, transparent 1px),
        linear-gradient(135deg, rgba(var(--yakoru-brand-gold-rgb), 0.055), rgba(var(--yakoru-brand-gold-rgb), 0.035)),
        rgba(4, 7, 9, 0.46);
    background-size: 72px 100%, 100% 42px, auto, auto;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.lpAnalyticsBoard__chart svg {
    position: absolute;
    inset: 12px 12px 8px;
    width: calc(100% - 24px);
    height: calc(100% - 20px);
}

.lpAnalyticsBoard__area {
    opacity: 0.75;
}

.lpAnalyticsBoard__line {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0.96;
}

.lpAnalyticsBoard__callout {
    position: absolute;
    right: 14px;
    top: 18px;
    width: 132px;
    padding: 9px 10px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.24);
    border-radius: 12px;
    background: rgba(6, 8, 10, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.lpAnalyticsBoard__callout strong {
    display: block;
    margin-top: 4px;
    color: rgba(247, 250, 255, 0.92);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.1;
}

.lpAnalyticsBoard__bottom {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 9px;
    min-height: 62px;
}

.lpAnalyticsBoard__bars,
.lpAnalyticsBoard__list {
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.15);
    border-radius: 14px;
    background: rgba(8, 13, 17, 0.54);
}

.lpAnalyticsBoard__bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    padding: 10px 12px;
}

.lpAnalyticsBoard__bars span {
    position: relative;
    flex: 1;
    min-height: 12px;
    border-radius: 5px 5px 2px 2px;
    background:
        linear-gradient(180deg, rgba(255, 244, 202, 0.92), rgba(var(--yakoru-brand-gold-rgb), 0.88) 34%, rgba(var(--yakoru-brand-gold-rgb), 0.62)),
        rgba(var(--yakoru-brand-gold-rgb), 0.32);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 14px rgba(var(--yakoru-brand-gold-rgb), 0.11);
    opacity: 0.94;
    transform-origin: center bottom;
    transition: box-shadow 0.18s ease, opacity 0.18s ease;
}

.lpAnalyticsBoard__list {
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 10px 12px;
}

.lpAnalyticsBoard__list span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(224, 229, 229, 0.72);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.lpAnalyticsBoard__list strong {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(var(--yakoru-brand-gold-rgb), 0.82);
    box-shadow: 0 0 12px rgba(var(--yakoru-brand-gold-rgb), 0.22);
}

.lpAnalyticsBoard__list span:first-child strong {
    background: rgba(var(--yakoru-brand-gold-rgb), 0.86);
    box-shadow: 0 0 12px rgba(var(--yakoru-brand-gold-rgb), 0.2);
}

.lpAnalyticsBoard [data-lp-tooltip] {
    position: relative;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    .lpAnalyticsBoard [data-lp-tooltip]::after {
        content: attr(data-lp-tooltip);
        position: absolute;
        left: 50%;
        top: calc(100% + 8px);
        z-index: 8;
        width: max-content;
        max-width: min(220px, 62vw);
        padding: 8px 10px;
        border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.24);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(6, 9, 12, 0.98), rgba(13, 17, 20, 0.96)),
            radial-gradient(circle at 12% 0%, rgba(var(--yakoru-brand-gold-rgb), 0.14), transparent 44%);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        color: rgba(232, 244, 250, 0.92);
        font-size: 10px;
        font-weight: 900;
        line-height: 1.25;
        letter-spacing: 0.02em;
        text-align: center;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, -4px) scale(0.97);
        transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.18s ease;
    }

    .lpAnalyticsBoard__metrics:has([data-lp-tooltip]:hover),
    .lpAnalyticsBoard__bottom:has([data-lp-tooltip]:hover) {
        z-index: 6;
    }

    .lpAnalyticsBoard [data-lp-tooltip]:hover {
        z-index: 7;
    }

    .lpAnalyticsBoard__chart[data-lp-tooltip]::after {
        top: 12px;
        max-width: min(240px, 68vw);
    }

    .lpAnalyticsBoard__bars span[data-lp-tooltip]::after {
        top: auto;
        bottom: calc(100% + 8px);
        padding: 7px 9px;
        transform: translate(-50%, 5px) scale(0.97);
    }

    .lpAnalyticsBoard [data-lp-tooltip]:hover::after {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0) scale(1);
    }

    .lpAnalyticsBoard__metric[data-lp-tooltip]:hover {
        transform: translateY(-1px);
        border-color: rgba(var(--yakoru-brand-gold-rgb), 0.32);
        background: rgba(10, 16, 20, 0.72);
    }

    .lpAnalyticsBoard__metric--gold[data-lp-tooltip]:hover {
        border-color: rgba(var(--yakoru-brand-gold-rgb), 0.42);
        background: linear-gradient(135deg, rgba(var(--yakoru-brand-gold-rgb), 0.16), rgba(8, 13, 17, 0.72));
    }

    .lpAnalyticsBoard__chart[data-lp-tooltip]:hover {
        border-color: rgba(var(--yakoru-brand-gold-rgb), 0.3);
    }

    .lpAnalyticsBoard__bars span[data-lp-tooltip]:hover {
        opacity: 1;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.12),
            0 0 18px rgba(var(--yakoru-brand-gold-rgb), 0.16);
    }
}

/* ===== Sections ===== */
/* ===== “Discord” stacked panels ===== */
.lpYakogakuWindow {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: 100%;
    height: min(100%, 286px);
    aspect-ratio: 3 / 2;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.42);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(20, 22, 23, 0.94);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(168, 229, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lpYakogakuWindow__top {
    height: 34px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(205, 208, 198, 0.13);
    background: linear-gradient(90deg, rgba(17, 15, 21, 0.94), rgba(11, 16, 20, 0.94));
}

.lpYakogakuWindow__dots {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 5px;
}

.lpYakogakuWindow__dots span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(var(--yakoru-brand-gold-rgb), 0.8);
}

.lpYakogakuWindow__dots span:nth-child(2) {
    background: rgba(var(--yakoru-brand-gold-rgb), 0.72);
}

.lpYakogakuWindow__dots span:nth-child(3) {
    background: rgba(205, 208, 198, 0.32);
}

.lpYakogakuWindow__brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(247, 250, 255, 0.94);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, transform .18s ease;
}

.lpYakogakuWindow__brand:hover,
.lpYakogakuWindow__brand:focus-visible {
    color: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
    outline: none;
}

.lpYakogakuWindow__mark {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #8f4cff, #6b35d8);
    box-shadow: 0 0 18px rgba(143, 76, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
}

.lpYakogakuWindow__nav {
    justify-self: end;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.lpYakogakuWindow__navButton {
    min-height: 24px;
    min-width: 0;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: rgba(224, 229, 229, 0.58);
    font: inherit;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.lpYakogakuWindow__navButton:hover,
.lpYakogakuWindow__navButton:focus-visible {
    color: rgba(247, 250, 255, 0.94);
    border-color: rgba(var(--yakoru-brand-gold-rgb), 0.18);
    background: rgba(var(--yakoru-brand-gold-rgb), 0.07);
    outline: none;
}

.lpYakogakuWindow__navButton.is-active {
    color: rgba(255, 245, 255, 0.96);
    border-color: rgba(161, 100, 255, 0.42);
    background: rgba(143, 76, 255, 0.26);
}

.lpYakogakuWindow__stage {
    position: relative;
    height: calc(100% - 34px);
    overflow: hidden;
    background:
        radial-gradient(220px 130px at 50% 72%, rgba(143, 76, 255, 0.18), transparent 68%),
        rgba(7, 7, 10, 0.96);
}

.lpYakogakuWindow__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5, 7, 10, 0.12), rgba(5, 7, 10, 0.34)),
        radial-gradient(240px 140px at 50% 58%, transparent 0%, rgba(5, 7, 10, 0.42) 78%);
}

.lpYakogakuWindow__stage:focus-visible {
    outline: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.34);
    outline-offset: -4px;
}

.lpYakogakuWindow__stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 46%;
    display: block;
    opacity: 0.88;
    transform: scale(1.58);
}

.lpYakogakuWindow__stage--hub img,
.lpYakogakuWindow__stage--mining img {
    object-position: 50% 44%;
    transform: scale(1.46);
}

.lpYakogakuWindow__stage--hub img {
    opacity: 0.2;
}

.lpYakogakuWindow__stage--mining img {
    opacity: 0.38;
}

.lpYakogakuWindow__stage--japanese img {
    object-position: 50% 52%;
    opacity: 0.38;
    transform: scale(1.28);
}

.lpYakogakuWindow__stage--visual img {
    object-position: 62% 46%;
    opacity: 0.34;
    transform: scale(1.04);
}

.lpYakogakuMini {
    position: absolute;
    z-index: 2;
    inset: 0;
    padding: 18px 22px 44px;
    display: grid;
    align-items: center;
    color: rgba(247, 250, 255, 0.94);
    animation: lpYakogakuMiniEnter .28s cubic-bezier(.22, 1, .36, 1) both;
}

.lpYakogakuMini__hub,
.lpYakogakuMini__page {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.lpYakogakuMini__hub {
    width: min(250px, 74%);
    margin: 0 auto;
}

.lpYakogakuMini__page {
    width: min(286px, 82%);
    margin: 0 auto;
}

.lpYakogakuMini__hero {
    display: grid;
    gap: 4px;
    text-align: left;
}

.lpYakogakuMini__eyebrow {
    color: rgba(190, 144, 255, 0.92);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
}

.lpYakogakuMini h4 {
    margin: 0;
    color: rgba(247, 250, 255, 0.96);
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: .98;
    text-shadow: 0 12px 28px rgba(0, 0, 0, 0.48);
}

.lpYakogakuMini__cards {
    display: grid;
    gap: 7px;
}

.lpYakogakuMini__card {
    display: grid;
    gap: 4px;
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid rgba(190, 144, 255, 0.24);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.02)),
        linear-gradient(180deg, rgba(24, 18, 36, 0.94), rgba(12, 10, 18, 0.9));
    color: rgba(247, 250, 255, 0.86);
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(4, 5, 12, 0.18);
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.lpYakogakuMini__card:hover,
.lpYakogakuMini__card:focus-visible {
    border-color: rgba(190, 144, 255, 0.48);
    background:
        linear-gradient(135deg, rgba(190, 144, 255, 0.16), rgba(255, 255, 255, 0.02)),
        rgba(17, 14, 25, 0.9);
    transform: translateY(-1px);
    outline: none;
}

.lpYakogakuMini__card.is-primary {
    border-color: rgba(190, 144, 255, 0.62);
    background: linear-gradient(135deg, rgba(143, 76, 255, 0.94), rgba(118, 69, 224, 0.9));
    color: #fff;
}

.lpYakogakuMini__card span {
    color: currentColor;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

.lpYakogakuMini__card strong {
    color: rgba(247, 250, 255, 0.72);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.12;
}

.lpYakogakuMini__card.is-primary strong {
    color: rgba(255, 255, 255, 0.86);
}

.lpYakogakuMini__course,
.lpYakogakuMini__deck {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid rgba(190, 144, 255, 0.38);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(143, 76, 255, 0.88), rgba(111, 63, 218, 0.76));
    box-shadow: 0 12px 34px rgba(92, 47, 172, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.lpYakogakuMini__deck {
    grid-template-columns: 1fr auto;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(190, 144, 255, 0.03)),
        rgba(14, 12, 21, 0.94);
}

.lpYakogakuMini__course span,
.lpYakogakuMini__deck span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lpYakogakuMini__course strong,
.lpYakogakuMini__deck strong {
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.1;
}

.lpYakogakuMini__progress {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.lpYakogakuMini__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.78);
}

.lpYakogakuMini__list,
.lpYakogakuMini__menu {
    display: grid;
    gap: 6px;
}

.lpYakogakuMini__list span,
.lpYakogakuMini__menu span {
    padding: 8px 10px;
    border: 1px solid rgba(190, 144, 255, 0.2);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(190, 144, 255, 0.02)),
        rgba(8, 7, 12, 0.92);
    color: rgba(247, 250, 255, 0.78);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.lpYakogakuMini__page--visual {
    width: min(260px, 78%);
    margin-left: 24px;
    margin-right: auto;
}

.lpYakogakuMini__menu {
    width: 130px;
}

.lpYakogakuWindow--pc {
    border-color: rgba(143, 76, 255, 0.44);
    border-radius: 16px;
    background: #090810;
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.38),
        0 0 38px rgba(143, 76, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lpYakogakuWindow--pc .lpYakogakuWindow__top {
    height: 40px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    padding: 0 12px;
    border-bottom-color: rgba(190, 144, 255, 0.15);
    background: linear-gradient(90deg, rgba(14, 12, 20, 0.98), rgba(10, 9, 15, 0.98));
}

.lpYakogakuWindow__brandCluster {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.lpYakogakuWindow__menu {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    display: grid;
    align-content: center;
    gap: 4px;
    cursor: pointer;
}

.lpYakogakuWindow__menu span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: rgba(247, 250, 255, 0.46);
}

.lpYakogakuWindow--pc .lpYakogakuWindow__brand {
    gap: 6px;
    font-size: 12px;
}

.lpYakogakuWindow--pc .lpYakogakuWindow__mark {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, #9a55ff, #7134df);
    font-size: 8px;
}

.lpYakogakuWindow--pc .lpYakogakuWindow__nav {
    justify-self: start;
    gap: clamp(8px, 1.4vw, 14px);
}

.lpYakogakuWindow--pc .lpYakogakuWindow__navButton,
.lpYakogakuWindow__navText {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(224, 229, 229, 0.56);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

.lpYakogakuWindow--pc .lpYakogakuWindow__navButton:hover,
.lpYakogakuWindow--pc .lpYakogakuWindow__navButton:focus-visible {
    color: rgba(247, 250, 255, 0.96);
    border: 0;
    background: transparent;
}

.lpYakogakuWindow--pc .lpYakogakuWindow__navButton.is-active {
    color: rgba(190, 144, 255, 0.96);
    border: 0;
    background: transparent;
}

.lpYakogakuWindow__right {
    justify-self: end;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lpYakogakuWindow__auth {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(190, 144, 255, 0.18);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(247, 250, 255, 0.92);
    font: inherit;
    font-size: 9.5px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.lpYakogakuWindow--pc .lpYakogakuWindow__stage {
    height: calc(100% - 40px);
    background:
        radial-gradient(260px 170px at 50% 58%, rgba(143, 76, 255, 0.18), transparent 68%),
        linear-gradient(180deg, #090810 0%, #07070b 72%, #0c0715 100%);
}

.lpYakogakuWindow--pc .lpYakogakuWindow__stage::before {
    content: "";
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: -78px;
    z-index: 1;
    height: 128px;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(180deg, rgba(143, 76, 255, 0.96), rgba(122, 55, 231, 0.9));
    box-shadow: 0 -18px 44px rgba(143, 76, 255, 0.22);
    pointer-events: none;
}

.lpYakogakuWindow--pc .lpYakogakuWindow__stage::after {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(5, 7, 10, 0.08), rgba(5, 7, 10, 0.24)),
        radial-gradient(260px 160px at 50% 58%, transparent 0%, rgba(5, 7, 10, 0.28) 80%);
}

.lpYakogakuWindow--pc .lpYakogakuWindow__stage picture {
    position: absolute;
    inset: 0;
}

.lpYakogakuWindow--pc .lpYakogakuWindow__stage img {
    opacity: 0.08;
    transform: scale(1.02);
}

.lpYakogakuWindow--pc .lpYakogakuMini {
    z-index: 2;
    padding: 22px 28px 56px;
    align-items: center;
}

.lpYakogakuWindow--pc .lpYakogakuMini__hub {
    width: min(360px, 70%);
    gap: 9px;
    margin: 0 auto;
}

.lpYakogakuWindow--pc .lpYakogakuMini__hero {
    justify-items: center;
    text-align: center;
}

.lpYakogakuWindow--pc .lpYakogakuMini h4 {
    max-width: 11ch;
    font-size: 30px;
    line-height: .88;
    text-align: center;
}

.lpYakogakuWindow--pc .lpYakogakuMini__cards {
    width: min(100%, 315px);
    gap: 6px;
    margin: 0 auto;
}

.lpYakogakuWindow--pc .lpYakogakuMini__card {
    min-height: 38px;
    padding: 8px 11px;
    border-color: rgba(190, 144, 255, 0.24);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
        rgba(18, 15, 27, 0.84);
}

.lpYakogakuWindow--pc .lpYakogakuMini__card.is-primary {
    border-color: rgba(190, 144, 255, 0.66);
    background: linear-gradient(135deg, #9852ff, #7d3ef0);
    box-shadow:
        0 13px 28px rgba(93, 48, 174, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.home-motion-ready .lpStoryStep--phone:not(.is-in-view):not(.is-exiting-view) .lpPhonePreview--yakogaku .lpYakoPhoneCard,
.home-motion-ready .lpStoryStep--site:not(.is-in-view):not(.is-exiting-view) .lpYakogakuWindow--pc .lpYakogakuMini__card {
    opacity: 0;
    transform: translate3d(-64px, 24px, 0) rotate(-6deg) scale(.9);
}

.home-motion-ready .lpStoryStep--phone:not(.is-in-view):not(.is-exiting-view) .lpPhonePreview--yakogaku .lpPhonePreview__screen::after,
.home-motion-ready .lpStoryStep--site:not(.is-in-view):not(.is-exiting-view) .lpYakogakuWindow--pc .lpYakogakuWindow__stage::before {
    opacity: 0;
    transform: translate3d(0, 76px, 0) scaleY(.82);
}

.lpStoryStep--phone.is-exiting-view .lpPhonePreview--yakogaku .lpYakoPhoneCard,
.lpStoryStep--site.is-exiting-view .lpYakogakuWindow--pc .lpYakogakuMini__card {
    animation: lpYakogakuCardHurryOut 700ms linear forwards;
}

.lpStoryStep--phone.is-exiting-view .lpPhonePreview--yakogaku .lpYakoPhoneHubCards .lpYakoPhoneCard:nth-child(1),
.lpStoryStep--site.is-exiting-view .lpYakogakuWindow--pc .lpYakogakuMini__cards .lpYakogakuMini__card:nth-child(1) {
    animation-delay: 290ms;
}

.lpStoryStep--phone.is-exiting-view .lpPhonePreview--yakogaku .lpYakoPhoneHubCards .lpYakoPhoneCard:nth-child(2),
.lpStoryStep--site.is-exiting-view .lpYakogakuWindow--pc .lpYakogakuMini__cards .lpYakogakuMini__card:nth-child(2) {
    animation-delay: 220ms;
}

.lpStoryStep--phone.is-exiting-view .lpPhonePreview--yakogaku .lpYakoPhoneHubCards .lpYakoPhoneCard:nth-child(3),
.lpStoryStep--site.is-exiting-view .lpYakogakuWindow--pc .lpYakogakuMini__cards .lpYakogakuMini__card:nth-child(3) {
    animation-delay: 150ms;
}

.lpStoryStep--phone.is-exiting-view .lpPhonePreview--yakogaku .lpYakoPhoneHubCards .lpYakoPhoneCard:nth-child(4),
.lpStoryStep--site.is-exiting-view .lpYakogakuWindow--pc .lpYakogakuMini__cards .lpYakogakuMini__card:nth-child(4) {
    animation-delay: 80ms;
}

.lpStoryStep--phone.is-exiting-view .lpPhonePreview--yakogaku .lpPhonePreview__screen::after,
.lpStoryStep--site.is-exiting-view .lpYakogakuWindow--pc .lpYakogakuWindow__stage::before {
    animation: lpYakogakuStageFallOut 420ms cubic-bezier(.2, 1, .24, 1) forwards;
}

.lpStoryStep--phone.is-in-view .lpPhonePreview--yakogaku .lpYakoPhoneCard,
.lpStoryStep--site.is-in-view .lpYakogakuWindow--pc .lpYakogakuMini__card {
    animation: lpYakogakuCardHurryIn 700ms linear backwards;
}

.lpStoryStep--phone.is-in-view .lpPhonePreview--yakogaku .lpYakoPhoneHubCards .lpYakoPhoneCard:nth-child(1),
.lpStoryStep--site.is-in-view .lpYakogakuWindow--pc .lpYakogakuMini__cards .lpYakogakuMini__card:nth-child(1) {
    animation-delay: 80ms;
}

.lpStoryStep--phone.is-in-view .lpPhonePreview--yakogaku .lpYakoPhoneHubCards .lpYakoPhoneCard:nth-child(2),
.lpStoryStep--site.is-in-view .lpYakogakuWindow--pc .lpYakogakuMini__cards .lpYakogakuMini__card:nth-child(2) {
    animation-delay: 150ms;
}

.lpStoryStep--phone.is-in-view .lpPhonePreview--yakogaku .lpYakoPhoneHubCards .lpYakoPhoneCard:nth-child(3),
.lpStoryStep--site.is-in-view .lpYakogakuWindow--pc .lpYakogakuMini__cards .lpYakogakuMini__card:nth-child(3) {
    animation-delay: 220ms;
}

.lpStoryStep--phone.is-in-view .lpPhonePreview--yakogaku .lpYakoPhoneHubCards .lpYakoPhoneCard:nth-child(4),
.lpStoryStep--site.is-in-view .lpYakogakuWindow--pc .lpYakogakuMini__cards .lpYakogakuMini__card:nth-child(4) {
    animation-delay: 290ms;
}

.lpStoryStep--phone.is-in-view .lpPhonePreview--yakogaku .lpPhonePreview__screen::after,
.lpStoryStep--site.is-in-view .lpYakogakuWindow--pc .lpYakogakuWindow__stage::before {
    animation: lpYakogakuStageRise 560ms cubic-bezier(.2, 1, .24, 1) 1020ms backwards;
}

.home-motion-ready .lpStoryStep--data:not(.is-in-view):not(.is-exiting-view) .lpAnalyticsBoard--story :where(.lpAnalyticsBoard__metric, .lpAnalyticsBoard__bottom) {
    opacity: 0;
    transform: translate3d(-64px, 24px, 0) rotate(-6deg) scale(.9);
}

.home-motion-ready .lpStoryStep--data:not(.is-in-view):not(.is-exiting-view) .lpAnalyticsBoard--story .lpAnalyticsBoard__chart {
    opacity: 0;
    transform: translate3d(0, 76px, 0) scaleY(.82);
}

.lpStoryStep--data.is-exiting-view .lpAnalyticsBoard--story :where(.lpAnalyticsBoard__metric, .lpAnalyticsBoard__bottom) {
    animation: lpYakogakuCardHurryOut 700ms linear forwards;
}

.lpStoryStep--data.is-exiting-view .lpAnalyticsBoard--story .lpAnalyticsBoard__metrics .lpAnalyticsBoard__metric:nth-child(1) {
    animation-delay: 220ms;
}

.lpStoryStep--data.is-exiting-view .lpAnalyticsBoard--story .lpAnalyticsBoard__metrics .lpAnalyticsBoard__metric:nth-child(2) {
    animation-delay: 150ms;
}

.lpStoryStep--data.is-exiting-view .lpAnalyticsBoard--story .lpAnalyticsBoard__bottom {
    animation-delay: 80ms;
}

.lpStoryStep--data.is-exiting-view .lpAnalyticsBoard--story .lpAnalyticsBoard__chart {
    animation: lpYakogakuStageFallOut 420ms cubic-bezier(.2, 1, .24, 1) forwards;
}

.lpStoryStep--data.is-in-view .lpAnalyticsBoard--story :where(.lpAnalyticsBoard__metric, .lpAnalyticsBoard__bottom) {
    animation: lpYakogakuCardHurryIn 700ms linear backwards;
}

.lpStoryStep--data.is-in-view .lpAnalyticsBoard--story .lpAnalyticsBoard__metrics .lpAnalyticsBoard__metric:nth-child(1) {
    animation-delay: 80ms;
}

.lpStoryStep--data.is-in-view .lpAnalyticsBoard--story .lpAnalyticsBoard__metrics .lpAnalyticsBoard__metric:nth-child(2) {
    animation-delay: 150ms;
}

.lpStoryStep--data.is-in-view .lpAnalyticsBoard--story .lpAnalyticsBoard__bottom {
    animation-delay: 220ms;
}

.lpStoryStep--data.is-in-view .lpAnalyticsBoard--story .lpAnalyticsBoard__chart {
    animation: lpYakogakuStageRise 560ms cubic-bezier(.2, 1, .24, 1) 880ms backwards;
}

@keyframes lpYakogakuCardHurryIn {
    0% {
        opacity: 0;
        transform: translate3d(-64px, 24px, 0) rotate(-6deg) scale(.9);
        animation-timing-function: cubic-bezier(.14, .88, .2, 1);
    }

    12% {
        opacity: .82;
        transform: translate3d(-38px, 0, 0) rotate(-3.2deg) scale(.956);
    }

    24% {
        opacity: 1;
        transform: translate3d(-6px, -26px, 0) rotate(-.9deg) scale(1.026);
        animation-timing-function: cubic-bezier(.22, .58, .38, 1);
    }

    39% {
        opacity: 1;
        transform: translate3d(5px, -29px, 0) rotate(.45deg) scale(1.04);
    }

    52% {
        opacity: 1;
        transform: translate3d(7px, -27px, 0) rotate(.62deg) scale(1.036);
        animation-timing-function: cubic-bezier(.28, .02, .22, 1);
    }

    74% {
        opacity: 1;
        transform: translate3d(3px, -7px, 0) rotate(.52deg) scale(1.01);
        animation-timing-function: cubic-bezier(.16, .86, .24, 1);
    }

    90% {
        opacity: 1;
        transform: translate3d(.6px, -1px, 0) rotate(.32deg) scale(1.002);
        animation-timing-function: cubic-bezier(.22, .72, .26, 1);
    }

    96% {
        opacity: 1;
        transform: translate3d(.12px, -.18px, 0) rotate(.08deg) scale(1.0004);
        animation-timing-function: cubic-bezier(.2, .9, .24, 1);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0) scale(1);
    }
}

@keyframes lpYakogakuStageRise {
    0% {
        opacity: 0;
        transform: translate3d(0, 76px, 0) scaleY(.82);
    }

    68% {
        opacity: 1;
        transform: translate3d(0, -5px, 0) scaleY(1.035);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scaleY(1);
    }
}

@keyframes lpYakogakuCardHurryOut {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0) scale(1);
        animation-timing-function: cubic-bezier(.2, .9, .24, 1);
    }

    4% {
        opacity: 1;
        transform: translate3d(.12px, -.18px, 0) rotate(.08deg) scale(1.0004);
    }

    10% {
        opacity: 1;
        transform: translate3d(.6px, -1px, 0) rotate(.32deg) scale(1.002);
        animation-timing-function: cubic-bezier(.22, .72, .26, 1);
    }

    26% {
        opacity: 1;
        transform: translate3d(3px, -7px, 0) rotate(.52deg) scale(1.01);
        animation-timing-function: cubic-bezier(.16, .86, .24, 1);
    }

    48% {
        opacity: 1;
        transform: translate3d(7px, -27px, 0) rotate(.62deg) scale(1.036);
        animation-timing-function: cubic-bezier(.28, .02, .22, 1);
    }

    61% {
        opacity: 1;
        transform: translate3d(5px, -29px, 0) rotate(.45deg) scale(1.04);
    }

    76% {
        opacity: 1;
        transform: translate3d(-6px, -26px, 0) rotate(-.9deg) scale(1.026);
        animation-timing-function: cubic-bezier(.22, .58, .38, 1);
    }

    88% {
        opacity: .82;
        transform: translate3d(-38px, 0, 0) rotate(-3.2deg) scale(.956);
    }

    100% {
        opacity: 0;
        transform: translate3d(-64px, 24px, 0) rotate(-6deg) scale(.9);
    }
}

@keyframes lpYakogakuStageFallOut {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scaleY(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, 76px, 0) scaleY(.82);
    }
}

.lpYakogakuMini__card--battle {
    border-color: rgba(143, 76, 255, 0.58) !important;
    background:
        linear-gradient(135deg, rgba(143, 76, 255, 0.22), rgba(143, 76, 255, 0.05)),
        rgba(17, 13, 27, 0.84) !important;
}

.lpYakogakuMini__card--battle span {
    color: rgba(171, 103, 255, 0.98) !important;
}

.lpYakogakuMini__card--visual {
    background:
        repeating-linear-gradient(135deg, rgba(var(--yakoru-brand-gold-rgb), 0.06) 0 8px, transparent 8px 16px),
        rgba(24, 31, 46, 0.74) !important;
}

.lpYakogakuMini__card--visual span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.lpYakogakuMini__card--visual em {
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(247, 250, 255, 0.72);
    font-size: 6.5px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lpYakogakuWindow--pc .lpYakogakuMini__page {
    width: min(340px, 72%);
    gap: 9px;
}

.lpYakogakuWindow--pc .lpYakogakuMini__page h4 {
    max-width: none;
    text-align: left;
}

.lpYakogakuWindow--pc .lpYakogakuMini__course,
.lpYakogakuWindow--pc .lpYakogakuMini__deck {
    border-color: rgba(190, 144, 255, 0.56);
    background: linear-gradient(135deg, rgba(143, 76, 255, 0.9), rgba(110, 62, 218, 0.78));
}

@keyframes lpYakogakuMiniEnter {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(.99);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Usable Yakoru phone preview */
.lpPhonePreview {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: rgba(246, 250, 255, 0.92);
    letter-spacing: 0;
}

.lpPhonePreview__device {
    position: relative;
    width: min(172px, 78%);
    aspect-ratio: 9 / 16;
    padding: 7px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.72);
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(var(--yakoru-brand-gold-rgb), 0.22), rgba(var(--yakoru-brand-gold-rgb), 0.2)),
        rgba(5, 7, 9, 0.92);
    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.36),
        0 0 0 1px rgba(var(--yakoru-brand-gold-rgb), 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.lpPhonePreview__notch {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 3;
    width: 44px;
    height: 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    transform: translateX(-50%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.lpPhonePreview__screen {
    height: 100%;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.2);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(15, 22, 27, 0.94), rgba(5, 7, 9, 0.98)),
        radial-gradient(160px 120px at 24% 20%, rgba(var(--yakoru-brand-gold-rgb), 0.12), transparent 68%),
        radial-gradient(150px 120px at 78% 16%, rgba(var(--yakoru-brand-gold-rgb), 0.11), transparent 72%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 10px 10px;
    overflow: hidden;
}

.lpPhonePreview__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
}

.lpPhonePreview__brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease;
}

.lpPhonePreview__brand:hover,
.lpPhonePreview__brand:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.lpPhonePreview__mark {
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: rgba(15, 19, 22, 0.96);
    background: linear-gradient(135deg, #f5d78d, #d79b45);
    box-shadow: 0 8px 18px rgba(199, 143, 55, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.36);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.lpPhonePreview__brandName {
    display: block;
    line-height: 1.08;
    white-space: nowrap;
}

.lpPhonePreview__brandName {
    color: rgba(247, 250, 255, 0.94);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lpPhonePreview__content {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
    scrollbar-color: rgba(var(--yakoru-brand-gold-rgb), 0.62) rgba(var(--yakoru-brand-gold-rgb), 0.08);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.lpPhonePreview__content:focus-visible {
    outline: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.34);
    outline-offset: 2px;
}

.lpPhonePreview__content::-webkit-scrollbar {
    width: 5px;
}

.lpPhonePreview__content::-webkit-scrollbar-track {
    background: rgba(var(--yakoru-brand-gold-rgb), 0.08);
    border-radius: 999px;
}

.lpPhonePreview__content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(var(--yakoru-brand-gold-rgb), 0.78), rgba(var(--yakoru-brand-gold-rgb), 0.62));
}

.lpPhonePreview__view {
    min-width: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px 7px 9px 9px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.15);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
        rgba(0, 0, 0, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    animation: lpPhonePreviewSwap .34s cubic-bezier(.22, 1, .36, 1) both;
}

.lpPhonePreview__view--home {
    border-color: rgba(var(--yakoru-brand-gold-rgb), 0.18);
    background:
        radial-gradient(100px 80px at 18% 6%, rgba(var(--yakoru-brand-gold-rgb), 0.11), transparent 68%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012)),
        rgba(0, 0, 0, 0.18);
}

.lpPhonePreview__view--work {
    border-color: rgba(var(--yakoru-brand-gold-rgb), 0.18);
}

.lpPhonePreview__view--contact {
    border-color: rgba(var(--yakoru-brand-gold-rgb), 0.2);
}

.lpPhonePreview__heroBlock,
.lpPhonePreview__sectionHead {
    display: grid;
    gap: 5px;
}

.lpPhonePreview__eyebrow {
    color: rgba(var(--yakoru-brand-gold-rgb), 0.9);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
}

.lpPhonePreview__title {
    margin: 0;
    color: rgba(247, 250, 255, 0.96);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.08;
}

.lpPhonePreview__homeCards,
.lpPhonePreview__projectGrid,
.lpPhonePreview__briefList {
    display: grid;
    gap: 6px;
}

.lpPhonePreview__homeCard {
    display: grid;
    gap: 4px;
    min-height: 44px;
    padding: 9px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.18);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        rgba(8, 13, 17, 0.72);
    color: rgba(247, 250, 255, 0.88);
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    -webkit-tap-highlight-color: transparent;
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.lpPhonePreview__homeCard:hover,
.lpPhonePreview__homeCard:focus-visible {
    border-color: rgba(var(--yakoru-brand-gold-rgb), 0.32);
    background:
        linear-gradient(135deg, rgba(var(--yakoru-brand-gold-rgb), 0.1), rgba(255, 255, 255, 0.012)),
        rgba(10, 16, 20, 0.82);
    transform: translateY(-1px);
    outline: none;
}

.lpPhonePreview__homeCard.is-primary {
    border-color: rgba(var(--yakoru-brand-gold-rgb), 0.52);
    background: linear-gradient(135deg, #f2ce7f, #d99d48);
    color: rgba(17, 22, 24, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.lpPhonePreview__homeCard span {
    color: currentColor;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.lpPhonePreview__homeCard strong {
    color: rgba(224, 229, 229, 0.7);
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.15;
}

.lpPhonePreview__homeCard.is-primary strong {
    color: rgba(17, 22, 24, 0.72);
}

.lpPhonePreview__project span,
.lpPhonePreview__brief span {
    color: rgba(224, 229, 229, 0.62);
    font-size: 8.5px;
    font-weight: 900;
    line-height: 1;
}

.lpPhonePreview__project strong,
.lpPhonePreview__brief strong {
    color: rgba(var(--yakoru-brand-gold-rgb), 0.94);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
}

.lpPhonePreview__project,
.lpPhonePreview__brief {
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.17);
    border-radius: 12px;
    background: rgba(8, 13, 17, 0.64);
}

.lpPhonePreview__project--featured {
    border-color: rgba(var(--yakoru-brand-gold-rgb), 0.34);
    background:
        linear-gradient(135deg, rgba(var(--yakoru-brand-gold-rgb), 0.16), rgba(var(--yakoru-brand-gold-rgb), 0.07)),
        rgba(8, 13, 17, 0.7);
}

.lpPhonePreview__project--featured strong {
    color: rgba(var(--yakoru-brand-gold-rgb), 0.94);
}

.lpPhonePreview__brief {
    grid-template-columns: 1fr auto;
    align-items: center;
}

.lpPhonePreview__note {
    padding: 8px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.18);
    border-radius: 12px;
    background: rgba(var(--yakoru-brand-gold-rgb), 0.07);
    color: rgba(224, 229, 229, 0.72);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.34;
}

.lpPhonePreview__nav {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.16);
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.28);
}

.lpPhonePreview__navButton {
    min-width: 0;
    min-height: 29px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: rgba(224, 229, 229, 0.68);
    font: inherit;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.lpPhonePreview__navButton:hover,
.lpPhonePreview__navButton:focus-visible {
    color: rgba(247, 250, 255, 0.95);
    border-color: rgba(var(--yakoru-brand-gold-rgb), 0.24);
    background: rgba(var(--yakoru-brand-gold-rgb), 0.08);
    outline: none;
}

.lpPhonePreview__navButton:focus-visible {
    box-shadow: 0 0 0 2px rgba(var(--yakoru-brand-gold-rgb), 0.18);
}

.lpPhonePreview__navButton.is-active {
    color: rgba(17, 22, 24, 0.96);
    border-color: rgba(var(--yakoru-brand-gold-rgb), 0.56);
    background: linear-gradient(135deg, #f3d28a, #d69b46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.lpPhonePreview--yakogaku .lpPhonePreview__device {
    border-color: rgba(143, 76, 255, 0.68);
    background:
        linear-gradient(145deg, rgba(143, 76, 255, 0.28), rgba(13, 11, 20, 0.96) 42%, rgba(52, 38, 86, 0.88)),
        rgba(5, 5, 9, 0.96);
    box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.42),
        0 0 34px rgba(143, 76, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.lpPhonePreview--yakogaku .lpPhonePreview__notch {
    top: 10px;
    width: 48px;
    background: rgba(3, 3, 6, 0.82);
}

.lpPhonePreview--yakogaku .lpPhonePreview__screen {
    position: relative;
    gap: 7px;
    padding: 22px 10px 9px;
    border-color: rgba(190, 144, 255, 0.22);
    background:
        radial-gradient(190px 150px at 50% 47%, rgba(143, 76, 255, 0.18), transparent 68%),
        radial-gradient(110px 90px at 12% 16%, rgba(143, 76, 255, 0.18), transparent 74%),
        linear-gradient(180deg, #0d0b13 0%, #07070b 56%, #08060e 100%);
}

.lpPhonePreview--yakogaku .lpPhonePreview__screen::after {
    content: "";
    position: absolute;
    left: -28%;
    right: -28%;
    bottom: -70px;
    height: 118px;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(180deg, rgba(143, 76, 255, 0.96), rgba(122, 55, 231, 0.92));
    box-shadow: 0 -18px 44px rgba(143, 76, 255, 0.22);
    pointer-events: none;
}

.lpPhonePreview--yakogaku .lpPhonePreview__top,
.lpPhonePreview--yakogaku .lpPhonePreview__content,
.lpPhonePreview--yakogaku .lpPhonePreview__nav {
    position: relative;
    z-index: 1;
}

.lpPhonePreview--yakogaku .lpPhonePreview__top {
    min-height: 26px;
}

.lpYakoPhoneTop {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
}

.lpYakoPhoneMenu {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    display: grid;
    align-content: center;
    gap: 4px;
    cursor: pointer;
}

.lpYakoPhoneMenu span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: rgba(247, 250, 255, 0.48);
}

.lpPhonePreview--yakogaku .lpPhonePreview__brand {
    gap: 5px;
}

.lpPhonePreview--yakogaku .lpPhonePreview__mark {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.96);
    background: linear-gradient(135deg, #9a55ff, #7134df);
    font-size: 7px;
    box-shadow: 0 0 18px rgba(143, 76, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.lpPhonePreview--yakogaku .lpPhonePreview__brandName {
    color: rgba(247, 250, 255, 0.95);
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
}

.lpYakoPhoneTopLinks {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(224, 229, 229, 0.46);
    font-size: 7.5px;
    font-weight: 900;
    line-height: 1;
}

.lpPhonePreview--yakogaku .lpPhonePreview__content {
    overflow: hidden;
    padding: 0;
    scrollbar-color: rgba(143, 76, 255, 0.68) rgba(255, 255, 255, 0.06);
}

.lpPhonePreview--yakogaku .lpPhonePreview__view {
    min-height: 100%;
    gap: 9px;
    padding: 3px 2px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.lpPhonePreview--yakogaku .lpPhonePreview__view--home {
    background: transparent;
}

.lpYakoPhoneHubShell {
    min-height: 100%;
    display: grid;
    align-content: center;
    gap: 9px;
    padding: 4px 4px 18px;
}

.lpYakoPhoneHero {
    width: min(100%, 168px);
    margin: 0 auto;
    text-align: left;
}

.lpPhonePreview--yakogaku .lpPhonePreview__title {
    color: rgba(247, 250, 255, 0.96);
    font-size: 21px;
    line-height: .93;
    text-shadow: 0 12px 26px rgba(0, 0, 0, 0.58);
}

.lpYakoPhoneHubCards {
    width: min(100%, 172px);
    margin: 0 auto;
    gap: 6px;
}

.lpPhonePreview--yakogaku .lpPhonePreview__homeCard {
    min-height: 40px;
    gap: 4px;
    padding: 8px 10px;
    border-color: rgba(190, 144, 255, 0.24);
    border-radius: 11px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
        rgba(18, 15, 27, 0.84);
    color: rgba(247, 250, 255, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.lpPhonePreview--yakogaku .lpPhonePreview__homeCard:hover,
.lpPhonePreview--yakogaku .lpPhonePreview__homeCard:focus-visible {
    border-color: rgba(190, 144, 255, 0.46);
    background:
        linear-gradient(135deg, rgba(190, 144, 255, 0.14), rgba(255, 255, 255, 0.018)),
        rgba(20, 16, 31, 0.94);
}

.lpPhonePreview--yakogaku .lpPhonePreview__homeCard.is-primary {
    border-color: rgba(190, 144, 255, 0.66);
    background: linear-gradient(135deg, #9852ff, #7d3ef0);
    color: rgba(255, 255, 255, 0.98);
    box-shadow:
        0 13px 28px rgba(93, 48, 174, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.lpPhonePreview--yakogaku .lpPhonePreview__homeCard span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    font-size: 9.2px;
}

.lpPhonePreview--yakogaku .lpPhonePreview__homeCard strong {
    color: rgba(247, 250, 255, 0.66);
    font-size: 7.5px;
    line-height: 1.15;
}

.lpPhonePreview--yakogaku .lpPhonePreview__homeCard.is-primary strong {
    color: rgba(255, 255, 255, 0.84);
}

.lpYakoPhoneCard--battle {
    border-color: rgba(143, 76, 255, 0.58) !important;
    background:
        linear-gradient(135deg, rgba(143, 76, 255, 0.22), rgba(143, 76, 255, 0.05)),
        rgba(17, 13, 27, 0.84) !important;
}

.lpYakoPhoneCard--battle span {
    color: rgba(171, 103, 255, 0.98) !important;
}

.lpYakoPhoneCard--visual {
    background:
        repeating-linear-gradient(135deg, rgba(var(--yakoru-brand-gold-rgb), 0.06) 0 7px, transparent 7px 14px),
        rgba(24, 31, 46, 0.72) !important;
}

.lpYakoPhoneCard--visual em {
    padding: 3px 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(247, 250, 255, 0.72);
    font-size: 5.4px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lpPhonePreview--yakogaku .lpPhonePreview__eyebrow,
.lpPhonePreview--yakogaku .lpPhonePreview__project--featured strong {
    color: rgba(202, 176, 255, 0.96);
}

.lpYakoPhonePageHead {
    padding: 7px 6px 0;
}

.lpPhonePreview--yakogaku .lpPhonePreview__sectionHead .lpPhonePreview__title {
    font-size: 18px;
    line-height: .96;
}

.lpYakoPhoneRows {
    gap: 7px;
    padding: 0 4px 2px;
}

.lpPhonePreview--yakogaku .lpPhonePreview__project,
.lpPhonePreview--yakogaku .lpPhonePreview__brief {
    border-color: rgba(190, 144, 255, 0.2);
    border-radius: 11px;
    background: rgba(14, 12, 21, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.lpPhonePreview--yakogaku .lpPhonePreview__project--featured,
.lpYakoPhoneDeckCard {
    border-color: rgba(190, 144, 255, 0.56) !important;
    background: linear-gradient(135deg, rgba(143, 76, 255, 0.9), rgba(110, 62, 218, 0.78)) !important;
    box-shadow: 0 12px 34px rgba(92, 47, 172, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.lpPhonePreview--yakogaku .lpPhonePreview__note {
    border-color: rgba(142, 91, 246, 0.2);
    background: rgba(142, 91, 246, 0.075);
}

.lpPhonePreview--yakogaku .lpPhonePreview__project span,
.lpPhonePreview--yakogaku .lpPhonePreview__brief span {
    color: rgba(247, 250, 255, 0.68);
}

.lpPhonePreview--yakogaku .lpPhonePreview__project strong,
.lpPhonePreview--yakogaku .lpPhonePreview__brief strong {
    color: rgba(247, 250, 255, 0.92);
}

.lpPhonePreview--yakogaku .lpPhonePreview__project--featured span,
.lpPhonePreview--yakogaku .lpPhonePreview__project--featured strong,
.lpPhonePreview--yakogaku .lpYakoPhoneDeckCard span,
.lpPhonePreview--yakogaku .lpYakoPhoneDeckCard strong {
    color: rgba(255, 255, 255, 0.96);
}

.lpPhonePreview--yakogaku .lpPhonePreview__nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 4px;
    border-color: rgba(190, 144, 255, 0.14);
    background: rgba(8, 7, 12, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.lpPhonePreview--yakogaku .lpPhonePreview__navButton {
    min-height: 26px;
    padding-inline: 2px;
    color: rgba(224, 229, 229, 0.58);
    font-size: 7.2px;
}

.lpPhonePreview--yakogaku .lpPhonePreview__navButton:hover,
.lpPhonePreview--yakogaku .lpPhonePreview__navButton:focus-visible {
    border-color: rgba(190, 144, 255, 0.28);
    background: rgba(143, 76, 255, 0.12);
}

.lpPhonePreview--yakogaku .lpPhonePreview__navButton.is-active {
    border-color: rgba(142, 91, 246, 0.58);
    background: linear-gradient(135deg, #8d55f5, #6533d3);
    color: rgba(255, 255, 255, 0.96);
}

.lpYakoPhoneProgress {
    height: 9px;
    padding: 2px;
    border: 1px solid rgba(142, 91, 246, 0.2);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
}

.lpYakoPhoneProgress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8d55f5, var(--yakoru-brand-gold));
}

.lpYakoPhoneStoryMenu {
    display: grid;
    gap: 7px;
}

.lpYakoPhoneStoryMenu button {
    min-height: 31px;
    border: 1px solid rgba(142, 91, 246, 0.24);
    border-radius: 11px;
    background: rgba(142, 91, 246, 0.09);
    color: rgba(247, 250, 255, 0.92);
    font: inherit;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
}

@keyframes lpPhonePreviewSwap {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.lpFinal__cta {
    margin-top: 12px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 980px) {
    .lp {
        overflow-x: hidden;
    }

    .lpFinal__cta {
        gap: 10px;
    }

    .lpAnalyticsBoard {
        min-height: 286px;
    }

}

@media (max-width: 560px) {
    .lpFinal__cta .lpBtn {
        width: 100%;
        min-height: 46px;
    }

    .lpYakogakuWindow__top {
        gap: 6px;
        padding: 0 8px;
    }

    .lpYakogakuWindow__brand {
        gap: 5px;
    }

    .lpYakogakuWindow__brand > span:last-child {
        display: none;
    }

    .lpYakogakuWindow__nav {
        gap: 2px;
    }

    .lpYakogakuWindow__navButton {
        min-height: 22px;
        padding: 0 5px;
        font-size: 8.5px;
    }

    .lpYakogakuWindow__dots {
        gap: 4px;
    }

    .lpYakogakuWindow__dots span {
        width: 5px;
        height: 5px;
    }

    .lpYakogakuMini {
        padding: 13px 18px 24px;
    }

    .lpYakogakuMini__hub,
    .lpYakogakuMini__page {
        gap: 7px;
    }

    .lpYakogakuMini__cards {
        gap: 5px;
    }

    .lpYakogakuMini h4 {
        font-size: 16px;
    }

    .lpYakogakuMini__eyebrow {
        font-size: 9px;
    }

    .lpYakogakuMini__card {
        min-height: 31px;
        padding: 5px 9px;
    }

    .lpYakogakuMini__card span {
        font-size: 9.5px;
    }

    .lpYakogakuMini__card strong {
        font-size: 8px;
    }

    .lpPhonePreview__device {
        width: min(182px, 74vw);
    }

    .lpAnalyticsBoard {
        min-height: 228px;
        padding: 11px;
        gap: 8px;
        border-radius: 18px;
    }

    .lpAnalyticsBoard::before {
        inset: 37px 0 auto 0;
    }

    .lpAnalyticsBoard__top {
        gap: 7px;
    }

    .lpAnalyticsBoard__mark {
        width: 31px;
        height: 23px;
        font-size: 10px;
    }

    .lpAnalyticsBoard__heading span,
    .lpAnalyticsBoard__metric span,
    .lpAnalyticsBoard__callout span {
        font-size: 7px;
    }

    .lpAnalyticsBoard__heading strong {
        font-size: 11px;
    }

    .lpAnalyticsBoard__status {
        min-height: 20px;
        padding: 0 7px;
        font-size: 7px;
    }

    .lpAnalyticsBoard__metrics {
        gap: 6px;
    }

    .lpAnalyticsBoard__metric {
        padding: 8px;
        border-radius: 12px;
        gap: 4px;
    }

    .lpAnalyticsBoard__metric strong {
        font-size: 16px;
    }

    .lpAnalyticsBoard__chart {
        min-height: 86px;
        border-radius: 13px;
        background-size: 54px 100%, 100% 30px, auto, auto;
    }

    .lpAnalyticsBoard__line {
        stroke-width: 8px;
    }

    .lpAnalyticsBoard__callout {
        right: 9px;
        top: 9px;
        width: 106px;
        padding: 7px;
        border-radius: 10px;
    }

    .lpAnalyticsBoard__callout strong {
        font-size: 8.5px;
    }

    .lpAnalyticsBoard__bottom {
        min-height: 46px;
        gap: 6px;
    }

    .lpAnalyticsBoard__bars {
        gap: 5px;
        padding: 8px;
    }

    .lpAnalyticsBoard__list {
        gap: 5px;
        padding: 8px;
    }

    .lpAnalyticsBoard__list span {
        gap: 5px;
        font-size: 7.5px;
    }

    .lpAnalyticsBoard__list strong {
        width: 6px;
        height: 6px;
    }

}

/* ===== Separated Rover/Shorekeeper premium refresh ===== */
.lp {
    --lp-bg: #11151a;
    --lp-bg-2: #1f252b;
    --lp-surface: rgba(34, 39, 44, 0.96);
    --lp-surface-strong: rgba(52, 61, 70, 0.86);
    --lp-surface-soft: rgba(var(--yakoru-brand-gold-rgb), 0.07);
    --lp-border: rgba(226, 232, 235, 0.3);
    --lp-border-strong: rgba(var(--yakoru-brand-gold-rgb), 0.32);
    --lp-border-gold: rgba(var(--yakoru-brand-gold-rgb), 0.52);
    --lp-border-blue: rgba(var(--yakoru-brand-gold-rgb), 0.48);
    --lp-gold: var(--yakoru-brand-gold);
    --lp-gold-soft: var(--yakoru-brand-gold-deep);
    --lp-blue: var(--yakoru-brand-gold);
    --lp-shore-blue: var(--yakoru-brand-gold);
    --lp-blue-soft: var(--yakoru-brand-gold);
    --lp-ink: rgba(249, 251, 252, 0.96);
    --lp-muted: rgba(238, 243, 246, 0.88);
    --lp-subtle: rgba(214, 224, 230, 0.72);
    --lp-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
    --lp-shadow-soft: 0 14px 42px rgba(0, 0, 0, 0.24);
    --gold: var(--lp-gold);
    --goldSoft: rgba(var(--yakoru-brand-gold-rgb), 0.24);
    --goldBorder: var(--lp-border-gold);
    --aqua: var(--lp-gold);
    --aquaSoft: rgba(var(--yakoru-brand-gold-rgb), 0.18);
    --shoreBlue: var(--lp-gold);
    --shadow: var(--lp-shadow);
    --lp-feature-curve-rise: clamp(84px, calc(23.7vw - 96px), 124px);
    --lp-hero-curve-gap: 20px;
    --lp-hero-copy-action-gap: clamp(14px, 1.5vw, 18px);
    background:
        linear-gradient(135deg, rgba(20, 18, 15, 0.42) 0%, rgba(14, 17, 20, 0.92) 44%, rgba(12, 14, 17, 1) 100%),
        var(--lp-bg);
    color: var(--lp-ink);
}

.lp .lpBtn {
    min-height: 48px;
    border-radius: 12px;
    border-color: var(--lp-border);
    background: rgba(34, 39, 44, 0.88);
    color: var(--lp-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.lp .lpBtn:hover {
    border-color: var(--lp-border-strong);
    background: rgba(52, 61, 70, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

.lp .lpBtn--primary,
.lp .lpBtn--soft {
    border-color: transparent;
    background: var(--yakoru-brand-gold-gradient);
    background-size: 100% 140%;
    background-position: 50% 0;
    color: #000;
    font-weight: 900;
    -webkit-text-stroke: 0 transparent;
    text-shadow: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.lp .lpBtn--primary:hover,
.lp .lpBtn--soft:hover {
    border-color: transparent;
    background: var(--yakoru-brand-gold-gradient);
    background-size: 100% 140%;
    background-position: 50% 0;
    color: #000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.lp .lpBtn--ghost {
    border-color: transparent;
    background: var(--yakoru-brand-gold-gradient);
    background-size: 100% 140%;
    background-position: 50% 0;
    color: #000;
    font-weight: 900;
    -webkit-text-stroke: 0 transparent;
    text-shadow: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.lp .lpBtn--ghost:hover {
    border-color: transparent;
    background: var(--yakoru-brand-gold-gradient);
    background-size: 100% 140%;
    background-position: 50% 0;
    color: #000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.lp .lpHero {
    position: relative;
    display: grid;
    align-items: center;
    padding-top: 86px;
    min-height: var(--yakoru-hero-height);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0));
}

.lp .lpHero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(900px 520px at 18% 2%, rgba(var(--yakoru-brand-gold-rgb), 0.11), transparent 64%),
        radial-gradient(780px 500px at 82% 12%, rgba(var(--yakoru-brand-gold-rgb), 0.12), transparent 66%),
        var(--yakoru-hero-gradient-base);
    opacity: 1;
    pointer-events: none;
}

.lp .lpHero__bg::before,
.lp .lpHero__bg::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.lp .lpHero__bg::before {
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 76% 56% at 46% 42%, rgba(var(--yakoru-brand-gold-rgb), 0.13), transparent 72%),
        radial-gradient(ellipse 66% 48% at 58% 48%, rgba(var(--yakoru-brand-gold-rgb), 0.12), transparent 70%);
    opacity: 0.78;
}

.lp .lpHero__bg::after {
    inset: -18% -34%;
    z-index: 1;
    background:
        linear-gradient(100deg,
            transparent 0%,
            rgba(var(--yakoru-brand-gold-rgb), 0.08) 20%,
            rgba(var(--yakoru-brand-gold-rgb), 0.16) 38%,
            rgba(var(--yakoru-brand-gold-rgb), 0.08) 50%,
            rgba(var(--yakoru-brand-gold-rgb), 0.12) 66%,
            transparent 100%);
    opacity: 0.46;
    transform: translate3d(-18%, -1%, 0) scale(1.02);
    pointer-events: none;
    will-change: transform, opacity;
    animation: lpHeroGradientDrift 28s ease-in-out infinite alternate;
}

@keyframes lpHeroGradientDrift {
    0% {
        opacity: 0.34;
        transform: translate3d(-18%, -1%, 0) scale(1.02);
    }

    50% {
        opacity: 0.52;
    }

    100% {
        opacity: 0.4;
        transform: translate3d(18%, 1%, 0) scale(1.02);
    }
}

.lp .lpHero__inner {
    position: relative;
    display: grid;
    width: min(1120px, calc(100% - 28px));
    max-width: 1120px;
    margin: 0 auto;
    z-index: 7;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    text-align: center;
    gap: 22px;
    padding-top: 62px;
    padding-bottom: 78px;
}

.lp .lpHero__copy {
    display: grid;
    justify-items: center;
    gap: 8px;
    width: 100%;
}

.lp .lpHero__title {
    width: 100%;
    max-width: min(980px, 100%);
    margin: 0;
    margin-bottom: 0;
    font-size: var(--fs-title);
    font-weight: var(--fw-title);
    letter-spacing: var(--ls-title);
    line-height: var(--lh-title);
    color: var(--lp-ink);
    text-shadow: 0 12px 36px rgba(0, 0, 0, 0.48);
}

.lp .lpHero__title--builder {
    display: grid;
    justify-items: center;
    width: 100%;
    max-width: min(980px, 100%);
    min-height: 1.08em;
    line-height: 0.96;
}

.lp .lpHeroSentenceSwap {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: max-content;
    max-width: 100%;
    min-height: 1.08em;
    overflow: hidden;
}

.lp .lpHeroSentence {
    grid-area: 1 / 1;
    display: block;
    max-width: 100%;
    opacity: 0;
    color: rgba(247, 250, 255, 0.97);
    text-wrap: balance;
    will-change: opacity;
    animation: lpHeroSentenceFade 17.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.lp .lpHeroSentence:nth-child(2) {
    animation-delay: 3.5s;
}

.lp .lpHeroSentence:nth-child(3) {
    animation-delay: 7s;
}

.lp .lpHeroSentence:nth-child(4) {
    animation-delay: 10.5s;
}

.lp .lpHeroSentence:nth-child(5) {
    animation-delay: 14s;
}

.lp .lpHeroSentence strong {
    font: inherit;
}

.lp .lpHeroSentence--blue strong {
    color: var(--yakoru-brand-gold);
    text-shadow: 0 0 28px rgba(var(--yakoru-brand-gold-rgb), 0.18), 0 12px 34px rgba(0, 0, 0, 0.5);
}

.lp .lpHeroSentence--gold strong {
    color: var(--yakoru-brand-gold);
    text-shadow: 0 0 28px rgba(var(--yakoru-brand-gold-rgb), 0.18), 0 12px 34px rgba(0, 0, 0, 0.5);
}

.lp .lpHeroSentenceSwap.is-morphing {
    position: relative;
    overflow: visible;
    min-height: var(--hero-morph-height, 1.08em);
}

.lp .lpHeroHeadlineMorph {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    width: auto;
    max-width: 100%;
    text-align: center;
    white-space: nowrap;
}

.lp .lpHeroHeadlineMorph__prefix,
.lp .lpHeroHeadlineMorph__suffix {
    color: rgba(247, 250, 255, 0.97);
}

.lp .lpHeroHeadlineMorph__prefix {
    margin-right: 0.14em;
}

.lp .lpHeroObjectMorph {
    position: relative;
    display: inline-grid;
    align-items: baseline;
    justify-items: start;
    vertical-align: baseline;
    margin-inline: 0;
    height: 1.12em;
    overflow: visible;
    line-height: inherit;
    text-align: left;
}

.lp .lpHeroObjectMorph::after {
    content: "x";
    display: inline-block;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    font: inherit;
    line-height: inherit;
    grid-area: 1 / 1;
}

.lp .lpHeroObjectSvg {
    position: absolute;
    inset: 0 auto auto 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}

.lp .lpHeroObjectCanvas {
    position: absolute;
    inset: 0 auto auto 0;
    display: block;
    opacity: 0;
    pointer-events: none;
}

.lp .lpHeroObjectMorph.is-transitioning .lpHeroObjectCanvas {
    animation: none;
}

.lp .lpHeroObjectStatic {
    position: relative;
    display: inline-block;
    grid-area: 1 / 1;
    justify-self: start;
    align-self: baseline;
    font: inherit;
    line-height: inherit;
    white-space: nowrap;
    color: rgba(247, 250, 255, 0.97);
    opacity: 1;
    transform: translateY(0);
}

.lp .lpHeroObjectStatic--next {
    opacity: 0;
}

.lp .lpHeroObjectMorph.is-transitioning .lpHeroObjectStatic--current {
    will-change: opacity;
    animation: lpHeroRealWordOut 1120ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp .lpHeroObjectMorph.is-transitioning .lpHeroObjectStatic--next {
    will-change: opacity;
    animation: lpHeroRealWordIn 1120ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp .lpHeroObjectStatic--blue {
    color: var(--yakoru-brand-gold);
    text-shadow: 0 0 28px rgba(var(--yakoru-brand-gold-rgb), 0.18), 0 12px 34px rgba(0, 0, 0, 0.5);
}

.lp .lpHeroObjectStatic--gold {
    color: var(--yakoru-brand-gold);
    text-shadow: 0 0 28px rgba(var(--yakoru-brand-gold-rgb), 0.18), 0 12px 34px rgba(0, 0, 0, 0.5);
}

.lp .lpHeroObjectStaticMeasure {
    position: absolute;
    inset: 0 auto auto 0;
    visibility: hidden;
    pointer-events: none;
    font: inherit;
    line-height: inherit;
    white-space: nowrap;
    z-index: -1;
}

.lp .lpHeroObjectSvg__glyph {
    transform-box: fill-box;
    transform-origin: center;
}

.lp .lpHeroObjectSvg__path {
    fill: none;
    stroke: currentColor;
    stroke-width: 17;
    stroke-linecap: butt;
    stroke-linejoin: bevel;
    paint-order: stroke;
}

@keyframes lpHeroRealWordOut {
    0%,
    24% {
        opacity: 1;
    }

    52% {
        opacity: 0.08;
    }

    76%,
    100% {
        opacity: 0;
    }
}

@keyframes lpHeroRealWordIn {
    0%,
    24% {
        opacity: 0;
    }

    52% {
        opacity: 0.1;
    }

    76%,
    100% {
        opacity: 1;
    }
}

@keyframes lpHeroSentenceFade {
    0%,
    7%,
    22% {
        opacity: 1;
    }

    29%,
    100% {
        opacity: 0;
    }
}

.lp .lpHero__lead {
    margin: 0;
    max-width: 68ch;
    margin-inline: auto;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--lp-muted);
}

.lp .lpHeroOutcome {
    display: grid;
    place-items: center;
    width: min(980px, 100%);
    min-height: 1.08em;
    max-width: min(980px, 100%);
    margin-top: -2px;
    color: var(--lp-ink);
    font-size: var(--fs-title);
    font-weight: var(--fw-title);
    letter-spacing: var(--ls-title);
    line-height: 0.96;
    text-shadow: 0 12px 36px rgba(0, 0, 0, 0.48);
}

.lp .lpHeroOutcome.is-morphing {
    position: relative;
    min-height: var(--hero-morph-height, 1.08em);
}

.lp .lpHeroOutcome.is-soft-switching {
    display: block;
    min-height: 1.08em;
}

.lp .lpHeroOutcome.is-canvas-morphing {
    display: block;
}

.lp .lpHeroOutcomeMorph {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 1.08em;
    margin-inline: auto;
    overflow: visible;
    text-align: center;
    line-height: inherit;
}

.lp .lpHeroOutcomeStatic {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(247, 250, 255, 0.94);
    font: inherit;
    line-height: inherit;
    text-align: center;
    white-space: normal;
}

.lp .lpHeroOutcomeStatic--next {
    opacity: 0;
}

.lp .lpHeroOutcomeMorph.is-transitioning .lpHeroOutcomeStatic--current {
    will-change: opacity;
    animation: lpHeroRealWordOut 1120ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp .lpHeroOutcomeMorph.is-transitioning .lpHeroOutcomeStatic--next {
    will-change: opacity;
    animation: lpHeroRealWordIn 1120ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp .lpHeroOutcomeStatic--blue {
    color: var(--yakoru-brand-gold);
    text-shadow: 0 0 28px rgba(var(--yakoru-brand-gold-rgb), 0.18), 0 12px 34px rgba(0, 0, 0, 0.5);
}

.lp .lpHeroOutcomeStatic--gold {
    color: var(--yakoru-brand-gold);
    text-shadow: 0 0 28px rgba(var(--yakoru-brand-gold-rgb), 0.18), 0 12px 34px rgba(0, 0, 0, 0.5);
}

.lp .lpHeroOutcomeCanvas {
    position: absolute;
    inset: 0 auto auto 0;
    display: block;
    opacity: 0;
    pointer-events: none;
}

.lp .lpHeroOutcomeMorph.is-transitioning .lpHeroOutcomeCanvas {
    animation: none;
}

.lp .lpHeroOutcomeMeasure {
    position: absolute;
    inset: 0 auto auto 0;
    display: block;
    visibility: hidden;
    width: 100%;
    color: transparent;
    font: inherit;
    line-height: inherit;
    text-align: center;
    white-space: normal;
    pointer-events: none;
    z-index: -1;
}

.lp .lpHeroOutcome__line {
    grid-area: 1 / 1;
    display: block;
    max-width: 100%;
    opacity: 0;
    color: rgba(226, 232, 234, 0.76);
    text-wrap: balance;
    will-change: opacity;
    animation: lpHeroOutcomeFade 17.5s ease-in-out infinite;
}

.lp .lpHeroOutcome__line:nth-child(2) {
    animation-delay: 3.5s;
}

.lp .lpHeroOutcome__line:nth-child(3) {
    animation-delay: 7s;
}

.lp .lpHeroOutcome__line:nth-child(4) {
    animation-delay: 10.5s;
}

.lp .lpHeroOutcome__line:nth-child(5) {
    animation-delay: 14s;
}

.lp .lpHeroOutcome__line--blue {
    color: var(--yakoru-brand-gold);
}

.lp .lpHeroOutcome__line--gold {
    color: var(--yakoru-brand-gold);
}

@keyframes lpHeroOutcomeFade {
    0%,
    7%,
    22% {
        opacity: 1;
    }

    29%,
    100% {
        opacity: 0;
    }
}

.lp .lpHero__cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--lp-hero-copy-action-gap);
}

.lp .lpHero__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 56px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(14,16,20,1));
}

.lp .lpHero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(90deg, rgba(232, 178, 89, 0.14) 0%, rgba(232, 178, 89, 0.24) 18%, rgba(232, 178, 89, 0.05) 36%, rgba(155, 220, 255, 0.06) 48%, rgba(155, 220, 255, 0.3) 66%, rgba(155, 220, 255, 0.06) 84%, rgba(232, 178, 89, 0.14) 100%);
    filter: none;
    opacity: 0.36;
}


@media (prefers-reduced-motion: reduce) {
    .lp .lpHero__bg::before,
    .lp .lpHero__bg::after,
    .lp .lpHero::after {
        animation: none !important;
    }

    .lp .lpHeroSentence,
    .lp .lpHeroOutcome__line {
        animation: none !important;
        transform: none;
        filter: none;
        opacity: 0;
    }

    .lp .lpHeroSentence:first-child,
    .lp .lpHeroOutcome__line:first-child {
        opacity: 1;
    }

    .lp :where(.lpPremiumFeatures) {
        --lp-feature-curve-radius-x: 0%;
        --lp-feature-curve-radius-y: 0%;
    }

    .lp :where(.lpPremiumProof) {
        --lp-proof-curve-radius-x: 50%;
        --lp-proof-curve-radius-y: 100%;
    }

    .lp :where(.lpPremiumFeatures)::before {
        transition: none !important;
    }

    .lp :where(.lpPremiumProof)::after {
        transition: none !important;
    }

    .lp .lpBtn,
    .lp .lpYakogakuWindow__navButton,
    .lp .lpYakogakuWindow__brand,
    .lp .lpYakogakuMini__card,
    .lp .lpPhonePreview__brand,
    .lp .lpPhonePreview__homeCard,
    .lp .lpPhonePreview__navButton {
        transition: none !important;
    }

    .lp .lpYakogakuMini {
        animation: none !important;
    }

    .lp .lpStoryStep--phone.is-in-view .lpPhonePreview--yakogaku .lpYakoPhoneCard,
    .lp .lpStoryStep--phone.is-in-view .lpPhonePreview--yakogaku .lpPhonePreview__screen::after,
    .lp .lpStoryStep--phone.is-exiting-view .lpPhonePreview--yakogaku .lpYakoPhoneCard,
    .lp .lpStoryStep--phone.is-exiting-view .lpPhonePreview--yakogaku .lpPhonePreview__screen::after,
    .lp .lpStoryStep--data.is-in-view .lpAnalyticsBoard--story :where(.lpAnalyticsBoard__metric, .lpAnalyticsBoard__bottom),
    .lp .lpStoryStep--data.is-in-view .lpAnalyticsBoard--story .lpAnalyticsBoard__chart,
    .lp .lpStoryStep--data.is-exiting-view .lpAnalyticsBoard--story :where(.lpAnalyticsBoard__metric, .lpAnalyticsBoard__bottom),
    .lp .lpStoryStep--data.is-exiting-view .lpAnalyticsBoard--story .lpAnalyticsBoard__chart,
    .lp .lpStoryStep--site.is-in-view .lpYakogakuWindow--pc .lpYakogakuMini__card,
    .lp .lpStoryStep--site.is-in-view .lpYakogakuWindow--pc .lpYakogakuWindow__stage::before,
    .lp .lpStoryStep--site.is-exiting-view .lpYakogakuWindow--pc .lpYakogakuMini__card,
    .lp .lpStoryStep--site.is-exiting-view .lpYakogakuWindow--pc .lpYakogakuWindow__stage::before {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .lp .lpPhonePreview__device,
    .lp .lpPhonePreview__view,
    .lp .lpAnalyticsBoard__line,
    .lp .lpAnalyticsBoard__bars span {
        animation: none !important;
    }
}

@media (max-width: 980px) {
    .lp .lpHero {
        min-height: auto;
        padding-top: 74px;
        overflow: visible;
    }

    .lp .lpHero__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 30px 18px calc(var(--lp-feature-curve-rise) + var(--lp-hero-curve-gap));
        align-items: start;
    }

    .lp .lpHero__copy {
        display: contents;
    }

    .lp .lpHero__title {
        order: 1;
        max-width: 12ch;
        letter-spacing: 0;
    }

    .lp .lpHero__lead {
        order: 3;
        max-width: 100%;
    }

    .lp .lpHero__cta {
        order: 4;
        gap: 10px;
    }

    .lp .lpHero__title--builder,
    .lp .lpHeroSentenceSwap {
        min-height: 1.08em;
    }

    .lp .lpHeroSentenceSwap {
        width: max-content;
        max-width: 100%;
    }

    .lp .lpHeroOutcome {
        width: min(100%, 16ch);
        min-height: 2.08em;
    }
}

@media (max-width: 560px) {
    .lp .lpHero {
        padding-top: 68px;
    }

    .lp .lpHero__inner {
        width: calc(100% - 20px);
        padding: 26px 10px calc(var(--lp-feature-curve-rise) + var(--lp-hero-curve-gap));
    }

    .lp .lpHero__title {
        max-width: none;
        text-align: center;
    }

    .lp .lpHero__title--builder,
    .lp .lpHeroSentenceSwap {
        min-height: 1.08em;
    }

    .lp .lpHeroSentenceSwap {
        width: 100%;
        max-width: 100%;
    }

    .lp .lpHeroHeadlineMorph {
        display: grid;
        justify-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }

    .lp .lpHeroHeadlineMorph__prefix {
        margin-right: 0;
    }

    .lp .lpHeroObjectMorph {
        justify-items: center;
        text-align: center;
    }

    .lp .lpHeroOutcome {
        width: min(100%, 13ch);
        min-height: 2.08em;
    }

    .lp .lpHero__cta .lpBtn {
        width: 100%;
        min-height: 46px;
    }

    .lp .lpBtn {
        min-height: 46px;
    }
}

@media (max-width: 760px) {
    .lp .lpHero__bg {
        background:
            radial-gradient(640px 420px at 16% 4%, rgba(var(--yakoru-brand-gold-rgb), 0.1), transparent 66%),
            radial-gradient(560px 380px at 84% 10%, rgba(var(--yakoru-brand-gold-rgb), 0.11), transparent 68%),
            var(--yakoru-hero-gradient-base-mobile);
    }

    .lp .lpHero__bg::before {
        opacity: 0.68;
    }

    .lp .lpHero__bg::after {
        inset: -16% -58%;
        opacity: 0.36;
        animation-duration: 34s;
    }

    .lp .lpPhonePreview__device,
    .lp .lpPhonePreview__view,
    .lp .lpYakogakuMini,
    .lp .lpAnalyticsBoard__line,
    .lp .lpAnalyticsBoard__bars span {
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .lp .lpAnalyticsBoard__line {
        stroke-dashoffset: 0;
    }

    .lp .lpAnalyticsBoard__bars span {
        opacity: 1;
        transform: none;
    }
    .lp .lpAnalyticsBoard {
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
        filter: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ===== Premium homepage refresh ===== */
.lpPremiumFeatures {
    --lp-feature-font: "M PLUS Rounded 1c", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", var(--font);
    --lp-feature-display-font: "M PLUS Rounded 1c", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", "Yu Gothic", var(--font);
    --lp-feature-background: var(--yakoru-brand-gold);
    --lp-feature-text: var(--yakoru-brand-ink);
    --lp-feature-muted-text: rgba(5, 5, 6, 0.82);
    --lp-feature-curve-radius-x: 50%;
    --lp-feature-curve-radius-y: 100%;
    position: relative;
    z-index: 1;
    isolation: isolate;
    padding: 92px 20px 34px;
    overflow: visible;
    background: var(--lp-feature-background);
    font-family: var(--lp-feature-font);
    font-synthesis: none;
    font-synthesis-weight: none;
    font-feature-settings: "palt";
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.lpPremiumFeatures::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--lp-feature-curve-rise));
    z-index: 0;
    height: calc(var(--lp-feature-curve-rise) * 2);
    border-radius: var(--lp-feature-curve-radius-x) var(--lp-feature-curve-radius-x) 0 0 / var(--lp-feature-curve-radius-y) var(--lp-feature-curve-radius-y) 0 0;
    background: var(--lp-feature-background);
    transform: scaleX(1.55);
    transform-origin: 50% 100%;
    pointer-events: none;
}

.lpPremiumFeatures > * {
    position: relative;
    z-index: 1;
}

.lpPremiumIntro,
.lpPremiumBottom__content {
    width: min(1180px, calc(100% - 1px));
    margin-inline: auto;
}

.lpPremiumIntro {
    display: grid;
    gap: 16px;
    text-align: center;
    margin-bottom: 42px;
}

.lpPremiumTitle {
    max-width: 980px;
    margin: 0 auto;
    color: var(--lp-feature-text);
    font-family: var(--lp-feature-display-font);
    font-size: 4.55rem;
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: 0;
}

.lpPremiumLead {
    max-width: 820px;
    margin: 0 auto;
    color: var(--lp-feature-muted-text);
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.7;
}

.lpPremiumSteps {
    position: relative;
    isolation: isolate;
    width: min(1180px, 100%);
    margin-inline: auto;
    display: grid;
    gap: 30px;
}

.lpPremiumSteps > * {
    position: relative;
    z-index: 1;
}

.lpPremiumVisual,
.lpPremiumPreview,
.lpPremiumPhoneStage {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 330px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.24);
    border-radius: 18px;
    background:
        radial-gradient(460px 280px at 50% 18%, rgba(121, 230, 255, 0.18), transparent 70%),
        linear-gradient(145deg, rgba(8, 35, 54, 0.82), rgba(2, 7, 15, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075);
    overflow: hidden;
}

.lpPremiumPreview {
    display: grid;
    place-items: center;
    padding: 20px;
}

.lpPremiumPreview .lpYakogakuWindow {
    width: min(100%, 560px);
    height: 330px;
}

.lpPremiumPhoneStage {
    display: grid;
    place-items: center;
    min-height: 440px;
    overflow: visible;
}

.lpPremiumPhoneStage .lpPhonePreview {
    width: 252px;
    transform: translateY(2px);
}

.lpWorkflowBoard {
    position: absolute;
    inset: 26px;
    display: grid;
    place-items: center;
}

.lpPremiumRibbon {
    --lp-premium-ribbon-word-color: #d3d5d2;
    position: relative;
    overflow: hidden;
    border-block: 1px solid rgba(205, 208, 198, 0.12);
    background:
        linear-gradient(90deg, rgba(var(--yakoru-brand-gold-rgb), 0.15), rgba(var(--yakoru-brand-gold-rgb), 0.08), rgba(var(--yakoru-brand-gold-rgb), 0.15)),
        rgba(15, 18, 23, 0.96);
}

.lpPremiumRibbon__track {
    display: flex;
    width: max-content;
    padding: 30px 0;
    white-space: nowrap;
    animation: lpPremiumMarquee 28s linear infinite;
}

.lpPremiumRibbon__group {
    display: flex;
    flex: 0 0 auto;
    gap: 28px;
    padding-right: 28px;
}

.lpPremiumRibbon__track span {
    color: var(--lp-premium-ribbon-word-color);
    font-size: 3.15rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
}

.lpPremiumRibbon__group span:nth-child(4n+1),
.lpPremiumRibbon__group span:nth-child(4n+3) {
    color: var(--lp-premium-ribbon-word-color);
}

.lpPremiumRibbon__group span:nth-child(4n+2),
.lpPremiumRibbon__group span:nth-child(4n+4) {
    color: var(--lp-premium-ribbon-word-color);
}

.lpPremiumProof {
    --lp-proof-curve-radius-x: 0%;
    --lp-proof-curve-radius-y: 0%;
    position: relative;
    isolation: isolate;
    z-index: 1;
    display: grid;
    gap: 30px;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 86px 20px 78px;
    overflow: visible;
    background: var(--yakoru-brand-gold);
}

.lpPremiumProof::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -124px;
    z-index: 0;
    height: 248px;
    border-radius: 0 0 var(--lp-proof-curve-radius-x) var(--lp-proof-curve-radius-x) / 0 0 var(--lp-proof-curve-radius-y) var(--lp-proof-curve-radius-y);
    background: var(--yakoru-brand-gold);
    transform: scaleX(1.55);
    transform-origin: 50% 0;
    pointer-events: none;
}

.lpPremiumProof__copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 16px;
    width: min(1180px, calc(100% - 1px));
    margin-inline: auto;
    text-align: center;
}

.lpPremiumProof__copy h2 {
    max-width: 880px;
    margin: 0 auto;
    color: var(--yakoru-brand-ink);
    font-size: 3.4rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0;
    text-wrap: balance;
}

.lpPremiumProof__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: min(1180px, calc(100% - 1px));
    margin-inline: auto;
}

.lpPremiumProof__grid article {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 172px;
    padding: 22px;
    border: 1px solid rgba(205, 208, 198, 0.14);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(18, 20, 21, 0.86), rgba(8, 9, 10, 0.9)),
        rgba(8, 9, 10, 0.94);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.3);
}

.lpPremiumProof__grid strong {
    color: rgba(var(--yakoru-brand-gold-rgb), 0.96);
    font-size: 1.16rem;
}

.lpPremiumProof__grid span {
    color: rgba(224, 229, 229, 0.68);
    line-height: 1.55;
}

.lpPremiumBottom {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    justify-items: center;
    margin-top: 0;
    min-height: clamp(980px, 108vh, 1120px);
    padding: clamp(214px, 18vw, 270px) 20px 0;
    overflow: hidden;
    --bottom-content-width: clamp(620px, 61vw, 900px);
    --arcade-cycle: 14.4s;
    --arcade-label-cycle: 43.2s;
    --arcade-shooter-bottom: clamp(220px, 19vw, 290px);
    --arcade-shooter-top: calc(100% - var(--arcade-shooter-bottom));
    --arcade-grid-n4: calc(-1 * clamp(380px, 35vw, 472px));
    --arcade-grid-n3: calc(-1 * clamp(285px, 26.25vw, 354px));
    --arcade-grid-n2: calc(-1 * clamp(190px, 17.5vw, 236px));
    --arcade-grid-n1: calc(-1 * clamp(95px, 8.75vw, 118px));
    --arcade-grid-zero: 0px;
    --arcade-grid-p1: clamp(95px, 8.75vw, 118px);
    --arcade-grid-p2: clamp(190px, 17.5vw, 236px);
    --arcade-grid-p3: clamp(285px, 26.25vw, 354px);
    --arcade-grid-p4: clamp(380px, 35vw, 472px);
    --arcade-column-one: var(--arcade-grid-n4);
    --arcade-column-three: var(--arcade-grid-n3);
    --arcade-column-five: var(--arcade-grid-n2);
    --arcade-column-six: var(--arcade-grid-p2);
    --arcade-column-four: var(--arcade-grid-p3);
    --arcade-column-two: var(--arcade-grid-p4);
    background:
        linear-gradient(90deg, rgba(var(--yakoru-brand-gold-rgb), 0.04), transparent 24%, transparent 76%, rgba(var(--yakoru-brand-gold-rgb), 0.04)),
        linear-gradient(180deg, rgba(15, 18, 23, 0.98), rgba(9, 11, 14, 1));
}

.lpPremiumBottom::after {
    content: "";
    position: absolute;
    inset: -86px;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 86px 86px;
    opacity: 0.32;
    transform: translate3d(-43px, -43px, 0);
    pointer-events: none;
}

.lpPremiumBottom__scene {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(660px, 68vw, 790px);
    z-index: -1;
    pointer-events: none;
    isolation: isolate;
    background:
        radial-gradient(circle at 7% 18%, rgba(255, 255, 255, 0.66) 0 1px, transparent 1.7px),
        radial-gradient(circle at 12% 79%, rgba(var(--yakoru-brand-gold-rgb), 0.42) 0 1px, transparent 1.8px),
        radial-gradient(circle at 18% 43%, rgba(var(--yakoru-brand-gold-rgb), 0.38) 0 1px, transparent 1.7px),
        radial-gradient(circle at 92% 12%, rgba(var(--yakoru-brand-gold-rgb), 0.46) 0 1px, transparent 1.8px),
        linear-gradient(180deg, rgba(3, 4, 8, 0.08), rgba(3, 4, 8, 0.42));
    contain: layout paint;
    overflow: hidden;
}

.lpPremiumBottom__scene::after {
    content: "";
    position: absolute;
    inset: -4% -6%;
    z-index: 0;
    background:
        radial-gradient(circle at 16% 26%, rgba(var(--yakoru-brand-gold-rgb), 0.34) 0 1px, transparent 1.8px),
        radial-gradient(circle at 29% 88%, rgba(var(--yakoru-brand-gold-rgb), 0.34) 0 1px, transparent 1.7px),
        radial-gradient(circle at 64% 21%, rgba(255, 255, 255, 0.36) 0 1px, transparent 1.8px),
        radial-gradient(circle at 94% 83%, rgba(var(--yakoru-brand-gold-rgb), 0.38) 0 1px, transparent 1.8px),
        linear-gradient(90deg, transparent 0%, rgba(var(--yakoru-brand-gold-rgb), 0.16) 46%, transparent 100%) 8% 31% / 210px 1px no-repeat,
        linear-gradient(90deg, transparent 0%, rgba(var(--yakoru-brand-gold-rgb), 0.13) 48%, transparent 100%) 76% 68% / 180px 1px no-repeat;
    opacity: 0.6;
    transform: translate3d(-18px, 12px, 0);
    pointer-events: none;
}

.lpArcadeLane {
    position: absolute;
    left: var(--lane-left);
    top: var(--lane-top);
    z-index: 3;
    display: block;
    width: var(--lane-width, clamp(116px, 10vw, 144px));
    height: var(--lane-height, clamp(256px, 24vw, 326px));
    transform: translate3d(-50%, 0, 0);
    --lane-delay: 0s;
    --beam-height: clamp(112px, 11vw, 158px);
    --invader-scale: 1;
    --invader-step-one: 28px;
    --invader-step-two: 64px;
    --invader-step-three: 90px;
    --arcade-hit-offset: 17px;
    --accent-rgb: var(--yakoru-brand-gold-rgb);
}

.lpArcadeLane--one {
    --lane-left: calc(50% + var(--arcade-column-one));
    --lane-top: 7%;
    --lane-delay: -10.37s;
    --accent-rgb: var(--yakoru-brand-gold-rgb);
}

.lpArcadeLane--two {
    --lane-left: calc(50% + var(--arcade-column-two));
    --lane-top: 7%;
    --lane-delay: -6.05s;
    --invader-step-one: 32px;
    --invader-step-two: 70px;
    --invader-step-three: 96px;
}

.lpArcadeLane--three {
    --lane-left: calc(50% + var(--arcade-column-three));
    --lane-top: 7%;
    --lane-delay: 0s;
    --invader-step-one: 24px;
    --invader-step-two: 58px;
    --invader-step-three: 84px;
    --lane-height: clamp(230px, 21vw, 292px);
}

.lpArcadeLane--four {
    --lane-left: calc(50% + var(--arcade-column-four));
    --lane-top: 7%;
    --lane-delay: -8.35s;
    --invader-step-one: 34px;
    --invader-step-two: 76px;
    --invader-step-three: 102px;
    --lane-height: clamp(230px, 21vw, 292px);
    --accent-rgb: var(--yakoru-brand-gold-rgb);
}

.lpArcadeLane--five {
    --lane-left: calc(50% + var(--arcade-column-five));
    --lane-top: 7%;
    --lane-delay: -3.74s;
    --invader-step-one: 22px;
    --invader-step-two: 54px;
    --invader-step-three: 78px;
    --lane-height: clamp(210px, 20vw, 268px);
}

.lpArcadeLane--six {
    --lane-left: calc(50% + var(--arcade-column-six));
    --lane-top: 7%;
    --lane-delay: -12.38s;
    --invader-step-one: 30px;
    --invader-step-two: 68px;
    --invader-step-three: 96px;
    --lane-height: clamp(210px, 20vw, 268px);
    --accent-rgb: var(--yakoru-brand-gold-rgb);
}

.lpProblemInvader,
.lpArcadeBurst {
    position: absolute;
    left: 50%;
}

.lpProblemInvader {
    top: 0;
    display: grid;
    justify-items: center;
    gap: 5px;
    color: rgba(236, 245, 248, 0.88);
    transform: translate3d(-50%, -10px, 0) scale(var(--invader-scale));
    opacity: 0;
    animation: lpArcadeInvaderAdvance var(--arcade-cycle) steps(4, end) infinite,
        lpArcadeInvaderFade var(--arcade-cycle) linear infinite;
    animation-delay: var(--lane-delay), var(--lane-delay);
    will-change: transform, opacity;
}

.lpProblemInvader__sprite {
    position: relative;
    display: block;
    width: 52px;
    height: 34px;
    --invader-pixel: rgba(248, 252, 255, 0.96);
    --invader-pixel-dim: rgba(248, 252, 255, 0.72);
    --invader-eye: rgba(5, 8, 12, 0.9);
    --invader-pixel-size: 5px;
    background: transparent;
    box-shadow: none;
    image-rendering: pixelated;
}

.lpProblemInvader__sprite::before,
.lpProblemInvader__sprite::after {
    content: "";
    position: absolute;
}

.lpProblemInvader__sprite::before {
    left: 10px;
    top: 1px;
    width: var(--invader-pixel-size);
    height: var(--invader-pixel-size);
    border-radius: 1px;
    background: var(--invader-pixel);
    box-shadow:
        30px 0 var(--invader-pixel),
        6px 6px var(--invader-pixel),
        24px 6px var(--invader-pixel),
        0 12px var(--invader-pixel),
        6px 12px var(--invader-pixel),
        12px 12px var(--invader-pixel),
        18px 12px var(--invader-pixel),
        24px 12px var(--invader-pixel),
        30px 12px var(--invader-pixel),
        -6px 18px var(--invader-pixel),
        0 18px var(--invader-pixel),
        12px 18px var(--invader-pixel),
        18px 18px var(--invader-pixel),
        30px 18px var(--invader-pixel),
        36px 18px var(--invader-pixel),
        -6px 24px var(--invader-pixel),
        0 24px var(--invader-pixel),
        6px 24px var(--invader-pixel),
        12px 24px var(--invader-pixel),
        18px 24px var(--invader-pixel),
        24px 24px var(--invader-pixel),
        30px 24px var(--invader-pixel),
        36px 24px var(--invader-pixel),
        -6px 30px var(--invader-pixel-dim),
        6px 30px var(--invader-pixel-dim),
        24px 30px var(--invader-pixel-dim),
        36px 30px var(--invader-pixel-dim);
}

.lpProblemInvader__sprite::after {
    left: 22px;
    top: 19px;
    width: var(--invader-pixel-size);
    height: var(--invader-pixel-size);
    border-radius: 1px;
    background: var(--invader-eye);
    box-shadow: 12px 0 var(--invader-eye);
}

.lpProblemInvader__label {
    display: inline-grid;
    place-items: center;
    min-width: clamp(62px, 7vw, 118px);
    min-height: 18px;
    padding: 4px 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(5, 8, 12, 0.62);
    font-size: clamp(0.58rem, 0.68vw, 0.74rem);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.lpProblemInvader__word {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    animation: lpArcadeLabelCycle var(--arcade-label-cycle) steps(1, end) infinite;
    animation-delay: calc(var(--lane-delay) + var(--word-delay, 0s));
    will-change: opacity;
}

.lpProblemInvader__word:nth-child(1) {
    --word-delay: 0s;
}

.lpProblemInvader__word:nth-child(2) {
    --word-delay: -28.8s;
}

.lpProblemInvader__word:nth-child(3) {
    --word-delay: -14.4s;
}

.lpArcadeBeam {
    position: absolute;
    left: calc(50% + var(--beam-column));
    bottom: calc(var(--arcade-shooter-bottom) + 1px);
    z-index: 1;
    --beam-height: clamp(170px, 18vw, 235px);
    --beam-column: var(--arcade-grid-zero);
    --lane-delay: 0s;
    --shot-start-y: 18px;
    --shot-mid-y: -130px;
    --shot-y: -210px;
    --accent-rgb: var(--yakoru-brand-gold-rgb);
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(var(--accent-rgb), 0.9));
    transform: translate3d(-50%, var(--shot-start-y), 0) scaleY(0.6);
    transform-origin: 50% 100%;
    opacity: 0;
    animation: lpArcadeBeamFire var(--arcade-cycle) linear infinite;
    animation-delay: var(--lane-delay);
    will-change: transform, opacity;
}

.lpArcadeBeam--one {
    --beam-column: var(--arcade-column-one);
    --beam-height: clamp(190px, 20vw, 270px);
    --shot-mid-y: clamp(-188px, -16vw, -140px);
    --shot-y: clamp(-320px, -28vw, -250px);
    --lane-delay: -10.37s;
    --accent-rgb: var(--yakoru-brand-gold-rgb);
}

.lpArcadeBeam--two {
    --beam-column: var(--arcade-column-two);
    --beam-height: clamp(190px, 20vw, 270px);
    --shot-mid-y: clamp(-188px, -16vw, -140px);
    --shot-y: clamp(-320px, -28vw, -250px);
    --lane-delay: -6.05s;
}

.lpArcadeBeam--three {
    --beam-column: var(--arcade-column-three);
    --beam-height: clamp(150px, 15vw, 210px);
    --shot-mid-y: clamp(-160px, -13vw, -112px);
    --shot-y: clamp(-280px, -22vw, -220px);
    --lane-delay: 0s;
}

.lpArcadeBeam--four {
    --beam-column: var(--arcade-column-four);
    --beam-height: clamp(150px, 15vw, 210px);
    --shot-mid-y: clamp(-160px, -13vw, -112px);
    --shot-y: clamp(-280px, -22vw, -220px);
    --lane-delay: -8.35s;
    --accent-rgb: var(--yakoru-brand-gold-rgb);
}

.lpArcadeBeam--five {
    --beam-column: var(--arcade-column-five);
    --beam-height: clamp(220px, 22vw, 305px);
    --shot-mid-y: clamp(-136px, -11vw, -94px);
    --shot-y: clamp(-245px, -18vw, -185px);
    --lane-delay: -3.74s;
}

.lpArcadeBeam--six {
    --beam-column: var(--arcade-column-six);
    --beam-height: clamp(220px, 22vw, 305px);
    --shot-mid-y: clamp(-136px, -11vw, -94px);
    --shot-y: clamp(-245px, -18vw, -185px);
    --lane-delay: -12.38s;
    --accent-rgb: var(--yakoru-brand-gold-rgb);
}

.lpArcadeBurst {
    top: calc(var(--invader-step-three) + var(--arcade-hit-offset));
    bottom: auto;
    display: block;
    width: 8px;
    height: 8px;
    transform: translate3d(-50%, 0, 0);
}

.lpArcadeBurst i {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 2px;
    background: rgba(var(--accent-rgb), 0.92);
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    animation: lpArcadeBurstPixel var(--arcade-cycle) linear infinite;
    animation-delay: var(--lane-delay);
    will-change: transform, opacity;
}

.lpArcadeBurst i:nth-child(1) {
    --burst-x: -22px;
    --burst-y: -18px;
}

.lpArcadeBurst i:nth-child(2) {
    --burst-x: 20px;
    --burst-y: -16px;
}

.lpArcadeBurst i:nth-child(3) {
    --burst-x: -15px;
    --burst-y: 18px;
}

.lpArcadeBurst i:nth-child(4) {
    --burst-x: 18px;
    --burst-y: 17px;
}

.lpYakoruShooter {
    position: absolute;
    left: 50%;
    top: var(--arcade-shooter-top);
    z-index: 2;
    display: grid;
    justify-items: center;
    align-content: end;
    gap: 5px;
    width: 128px;
    height: 98px;
    color: rgba(248, 252, 255, 0.94);
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    transform: translate3d(-50%, -50%, 0);
    opacity: 0.92;
    animation: lpYakoruShooterPatrol var(--arcade-cycle) steps(1, end) infinite;
    will-change: transform, opacity;
}

.lpYakoruShooter__ship {
    position: relative;
    display: block;
    width: 58px;
    height: 28px;
    --cannon-pixel: rgba(248, 252, 255, 0.96);
    --cannon-pixel-dim: rgba(248, 252, 255, 0.68);
    --cannon-pixel-size: 6px;
    --ship-scale: 1;
    background: transparent;
    image-rendering: pixelated;
    z-index: 1;
    transform: scale(var(--ship-scale));
    animation: lpYakoruShipFireKick var(--arcade-cycle) steps(8, end) infinite;
    will-change: transform, opacity;
}

.lpYakoruShooter__ship::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 0;
    width: var(--cannon-pixel-size);
    height: var(--cannon-pixel-size);
    border-radius: 1px;
    background: var(--cannon-pixel);
    box-shadow:
        0 6px var(--cannon-pixel),
        -12px 12px var(--cannon-pixel),
        -6px 12px var(--cannon-pixel),
        0 12px var(--cannon-pixel),
        6px 12px var(--cannon-pixel),
        12px 12px var(--cannon-pixel),
        -24px 18px var(--cannon-pixel),
        -18px 18px var(--cannon-pixel),
        -12px 18px var(--cannon-pixel),
        -6px 18px var(--cannon-pixel),
        0 18px var(--cannon-pixel),
        6px 18px var(--cannon-pixel),
        12px 18px var(--cannon-pixel),
        18px 18px var(--cannon-pixel),
        24px 18px var(--cannon-pixel),
        -24px 24px var(--cannon-pixel-dim),
        -12px 24px var(--cannon-pixel),
        0 24px var(--cannon-pixel),
        12px 24px var(--cannon-pixel),
        24px 24px var(--cannon-pixel-dim);
}

.lpYakoruShooter__label {
    position: relative;
    z-index: 1;
    display: block;
    color: rgba(248, 252, 255, 0.92);
    letter-spacing: 0;
    text-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
}

.lpPremiumBottom__content {
    position: relative;
    z-index: 3;
    display: grid;
    align-self: center;
    align-content: start;
    justify-items: center;
    gap: clamp(18px, 2vw, 24px);
    width: min(var(--bottom-content-width), 100%);
    max-width: var(--bottom-content-width);
    margin-bottom: clamp(260px, 24vw, 330px);
    padding: 0 clamp(10px, 3vw, 40px);
    text-align: center;
}

.lpPremiumBottom__content h2 {
    max-width: min(760px, 15ch);
    margin: 0;
    color: rgba(247, 250, 255, 0.96);
    font-size: clamp(2.65rem, 4vw, 4.1rem);
    line-height: 0.98;
    font-weight: 900;
    letter-spacing: 0;
    text-wrap: balance;
}

.lpPremiumBottom__content p {
    max-width: 680px;
    margin: 0;
    color: rgba(224, 229, 229, 0.72);
    font-size: clamp(0.98rem, 1vw, 1.08rem);
    line-height: 1.65;
}

@keyframes lpPremiumMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes lpArcadeInvaderAdvance {
    0%, 4% {
        transform: translate3d(-50%, -14px, 0) scale(var(--invader-scale));
    }

    7%, 10% {
        transform: translate3d(-50%, var(--invader-step-one), 0) scale(var(--invader-scale));
    }

    13%, 16% {
        transform: translate3d(-50%, var(--invader-step-two), 0) scale(var(--invader-scale));
    }

    18%, 23% {
        transform: translate3d(-50%, var(--invader-step-three), 0) scale(var(--invader-scale));
    }

    24%, 100% {
        transform: translate3d(-50%, var(--invader-step-three), 0) scale(var(--invader-scale));
    }
}

@keyframes lpArcadeInvaderFade {
    0%, 21.2% {
        opacity: 1;
    }

    25%, 100% {
        opacity: 0;
    }
}

@keyframes lpArcadeLabelCycle {
    0%, 33.2% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    33.3%, 100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes lpArcadeBeamFire {
    0%, 5.9% {
        opacity: 0;
        transform: translate3d(-50%, var(--shot-start-y), 0) scaleY(0.6);
    }

    6% {
        opacity: 1;
        transform: translate3d(-50%, 4px, 0) scaleY(1);
    }

    13.5% {
        opacity: 1;
        transform: translate3d(-50%, var(--shot-mid-y), 0) scaleY(1);
    }

    20.8% {
        opacity: 1;
        transform: translate3d(-50%, var(--shot-y), 0) scaleY(1);
    }

    21.4%, 100% {
        opacity: 0;
        transform: translate3d(-50%, var(--shot-y), 0) scaleY(0.6);
    }
}

@keyframes lpArcadeBurstPixel {
    0%, 20.9% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(0.4);
    }

    21.2% {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) scale(1);
    }

    30% {
        opacity: 0;
        transform: translate3d(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y)), 0) scale(0.72);
    }

    34%, 100% {
        opacity: 0;
        transform: translate3d(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y)), 0) scale(0.72);
    }
}

@keyframes lpYakoruShipFireKick {
    0%, 5.7%, 7.4%, 19.7%, 21.4%, 33.7%, 35.4%, 47.7%, 49.4%, 63.7%, 65.4%, 79.7%, 81.4%, 100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(var(--ship-scale));
    }

    6%, 20%, 34%, 48%, 64%, 80% {
        opacity: 1;
        transform: translate3d(0, 3px, 0) scale(var(--ship-scale));
    }

    7%, 21%, 35%, 49%, 65%, 81% {
        opacity: 0.96;
        transform: translate3d(0, -1px, 0) scale(var(--ship-scale));
    }
}

@keyframes lpYakoruShooterPatrol {
    0%, 7.99% {
        opacity: 0.96;
        transform: translate3d(calc(-50% + var(--arcade-grid-n3)), -50%, 0) scale(1);
    }

    8%, 12.49% {
        opacity: 1;
        transform: translate3d(calc(-50% + var(--arcade-grid-n2)), -50%, 0) scale(1);
    }

    12.5%, 16.49% {
        opacity: 0.96;
        transform: translate3d(calc(-50% + var(--arcade-grid-n1)), -50%, 0) scale(1);
    }

    16.5%, 18.29% {
        opacity: 1;
        transform: translate3d(calc(-50% + var(--arcade-grid-zero)), calc(-50% + 2px), 0) scale(0.99);
    }

    18.3%, 19.69% {
        opacity: 1;
        transform: translate3d(calc(-50% + var(--arcade-grid-p1)), -50%, 0) scale(1);
    }

    19.7%, 21.49% {
        opacity: 0.96;
        transform: translate3d(calc(-50% + var(--arcade-grid-p2)), -50%, 0) scale(1);
    }

    21.5%, 24.49% {
        opacity: 1;
        transform: translate3d(calc(-50% + var(--arcade-grid-p1)), -50%, 0) scale(1);
    }

    24.5%, 27.49% {
        opacity: 0.96;
        transform: translate3d(calc(-50% + var(--arcade-grid-zero)), calc(-50% + 2px), 0) scale(0.99);
    }

    27.5%, 30.49% {
        opacity: 0.92;
        transform: translate3d(calc(-50% + var(--arcade-grid-n1)), -50%, 0) scale(1);
    }

    30.5%, 32.49% {
        opacity: 0.96;
        transform: translate3d(calc(-50% + var(--arcade-grid-n2)), -50%, 0) scale(1);
    }

    32.5%, 33.69% {
        opacity: 1;
        transform: translate3d(calc(-50% + var(--arcade-grid-n3)), -50%, 0) scale(1);
    }

    33.7%, 35.99% {
        opacity: 0.96;
        transform: translate3d(calc(-50% + var(--arcade-grid-n4)), -50%, 0) scale(1);
    }

    36%, 39.49% {
        opacity: 1;
        transform: translate3d(calc(-50% + var(--arcade-grid-n3)), -50%, 0) scale(1);
    }

    39.5%, 42.49% {
        opacity: 0.96;
        transform: translate3d(calc(-50% + var(--arcade-grid-n2)), -50%, 0) scale(1);
    }

    42.5%, 44.49% {
        opacity: 1;
        transform: translate3d(calc(-50% + var(--arcade-grid-n1)), -50%, 0) scale(1);
    }

    44.5%, 45.49% {
        opacity: 0.96;
        transform: translate3d(calc(-50% + var(--arcade-grid-zero)), calc(-50% + 2px), 0) scale(0.99);
    }

    45.5%, 46.49% {
        opacity: 1;
        transform: translate3d(calc(-50% + var(--arcade-grid-p1)), -50%, 0) scale(1);
    }

    46.5%, 47.39% {
        opacity: 0.96;
        transform: translate3d(calc(-50% + var(--arcade-grid-p2)), -50%, 0) scale(1);
    }

    47.7%, 49.99% {
        opacity: 1;
        transform: translate3d(calc(-50% + var(--arcade-grid-p3)), -50%, 0) scale(1);
    }

    50%, 62.99% {
        opacity: 0.96;
        transform: translate3d(calc(-50% + var(--arcade-grid-p3)), -50%, 0) scale(1);
    }

    63.7%, 65.49% {
        opacity: 1;
        transform: translate3d(calc(-50% + var(--arcade-grid-p4)), -50%, 0) scale(1);
    }

    65.5%, 67.49% {
        opacity: 0.96;
        transform: translate3d(calc(-50% + var(--arcade-grid-p3)), -50%, 0) scale(1);
    }

    67.5%, 69.49% {
        opacity: 0.96;
        transform: translate3d(calc(-50% + var(--arcade-grid-p2)), -50%, 0) scale(1);
    }

    69.5%, 71.49% {
        opacity: 0.96;
        transform: translate3d(calc(-50% + var(--arcade-grid-p1)), -50%, 0) scale(1);
    }

    71.5%, 73.49% {
        opacity: 0.92;
        transform: translate3d(calc(-50% + var(--arcade-grid-zero)), calc(-50% + 2px), 0) scale(0.99);
    }

    73.5%, 75.49% {
        opacity: 0.96;
        transform: translate3d(calc(-50% + var(--arcade-grid-n1)), -50%, 0) scale(1);
    }

    75.5%, 81.49% {
        opacity: 1;
        transform: translate3d(calc(-50% + var(--arcade-grid-n2)), -50%, 0) scale(1);
    }

    81.5%, 100% {
        opacity: 1;
        transform: translate3d(calc(-50% + var(--arcade-grid-n3)), -50%, 0) scale(1);
    }
}

.lpPremiumBottom:not(.is-in-view) :where(.lpProblemInvader, .lpProblemInvader__word, .lpArcadeBeam, .lpArcadeBurst i, .lpYakoruShooter, .lpYakoruShooter__ship) {
    animation: none;
    will-change: auto;
}

@media (max-width: 980px) {
    .lpPremiumFeatures {
        padding-top: 70px;
    }

    .lpPremiumTitle {
        font-size: 3.3rem;
    }
    .lpPremiumBottom__content h2,
    .lpPremiumProof__copy h2 {
        max-width: none;
        font-size: 2.55rem;
    }

    .lpPremiumProof__grid {
        grid-template-columns: 1fr;
    }

    .lpPremiumRibbon__track span {
        font-size: 2.35rem;
    }

    .lpPremiumBottom {
        margin-top: 0;
        min-height: 860px;
        padding-top: 168px;
        --bottom-content-width: clamp(560px, 84vw, 720px);
        --arcade-shooter-bottom: clamp(210px, 24vw, 270px);
    }

    .lpPremiumBottom__content {
        width: min(var(--bottom-content-width), 100%);
        margin-bottom: clamp(250px, 32vw, 320px);
        padding-inline: clamp(24px, 5vw, 46px);
    }

    .lpPremiumBottom__content h2 {
        max-width: 15ch;
        font-size: clamp(2.35rem, 5.4vw, 3.05rem);
    }

    .lpPremiumBottom__scene {
        height: 680px;
    }

    .lpArcadeLane {
        --lane-width: 108px;
        --lane-height: 248px;
        --beam-height: 108px;
    }

    .lpArcadeLane--one {
        --lane-left: calc(50% + var(--arcade-column-one));
        --lane-top: 8%;
    }

    .lpArcadeLane--two {
        --lane-left: calc(50% + var(--arcade-column-two));
        --lane-top: 8%;
    }

    .lpArcadeLane--three {
        --lane-left: calc(50% + var(--arcade-column-three));
        --lane-top: 12%;
    }

    .lpArcadeLane--four {
        --lane-left: calc(50% + var(--arcade-column-four));
        --lane-top: 12%;
    }

    .lpArcadeLane--five {
        --lane-left: calc(50% + var(--arcade-column-five));
        --lane-top: 18%;
    }

    .lpArcadeLane--six {
        --lane-left: calc(50% + var(--arcade-column-six));
        --lane-top: 18%;
    }

}

@media (max-width: 760px) {
    .lpPremiumFeatures {
        padding: 56px 16px 24px;
    }

    .lpPremiumTitle {
        font-size: 2.35rem;
        line-height: 1.03;
    }

    .lpPremiumLead {
        font-size: 1rem;
    }

    .lpPremiumSteps {
        gap: 18px;
    }

    .lpPremiumVisual,
    .lpPremiumPreview,
    .lpPremiumPhoneStage {
        min-height: 300px;
        border-radius: 16px;
    }

    .lpPremiumPreview {
        padding: 12px;
    }

    .lpPremiumPreview .lpYakogakuWindow {
        height: 260px;
    }

    .lpPremiumPhoneStage {
        min-height: 400px;
        overflow: hidden;
    }

    .lpPremiumPhoneStage .lpPhonePreview {
        width: 222px;
    }

    .lpWorkflowBoard {
        inset: 16px;
    }

    .lpPremiumRibbon__track {
        padding: 22px 0;
        animation: none;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
    }

    .lpPremiumRibbon__group {
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
        padding-right: 0;
    }

    .lpPremiumRibbon__group:nth-child(n+2),
    .lpPremiumRibbon__group span:nth-child(n+5) {
        display: none;
    }

    .lpPremiumRibbon__track span {
        font-size: 1.32rem;
    }

    .lp .lpPremiumRibbon {
        contain-intrinsic-size: 1px 88px;
    }

    .lpPremiumProof {
        padding: 56px 16px 36px;
    }

    .lpPremiumProof__copy h2,
    .lpPremiumBottom__content h2 {
        font-size: 2.1rem;
        line-height: 1.05;
    }

    .lpPremiumBottom {
        margin-top: 0;
        min-height: 840px;
        padding: 96px 16px 0;
        --arcade-shooter-bottom: clamp(210px, 56vw, 240px);
        --arcade-grid-n4: calc(-1 * clamp(126px, 36vw, 148px));
        --arcade-grid-n3: calc(-1 * clamp(94px, 27vw, 111px));
        --arcade-grid-n2: calc(-1 * clamp(62px, 18vw, 74px));
        --arcade-grid-n1: calc(-1 * clamp(31px, 9vw, 37px));
        --arcade-grid-p1: clamp(31px, 9vw, 37px);
        --arcade-grid-p2: clamp(62px, 18vw, 74px);
        --arcade-grid-p3: clamp(94px, 27vw, 111px);
        --arcade-grid-p4: clamp(126px, 36vw, 148px);
        --arcade-column-one: var(--arcade-grid-n4);
        --arcade-column-two: var(--arcade-grid-p4);
        --arcade-column-three: var(--arcade-grid-n2);
        --arcade-column-four: var(--arcade-grid-p2);
        --arcade-column-five: var(--arcade-grid-n2);
        --arcade-column-six: var(--arcade-grid-p2);
    }

    .lp .lpPremiumBottom {
        contain-intrinsic-size: 1px 840px;
    }

    .lpPremiumBottom__content {
        gap: clamp(15px, 4vw, 20px);
        margin-bottom: clamp(210px, 56vw, 240px);
        padding: 0 20px;
    }

    .lpPremiumBottom__content h2 {
        max-width: 14ch;
        font-size: clamp(2rem, 8.2vw, 2.52rem);
        line-height: 1.03;
    }

    .lpPremiumBottom__content p {
        font-size: 0.96rem;
        line-height: 1.55;
    }

    .lpPremiumBottom__scene {
        display: block;
        top: 0;
        bottom: 0;
        height: auto;
        opacity: 0.88;
    }

    .lpArcadeLane {
        --lane-width: 88px;
        --lane-height: clamp(154px, 41vw, 182px);
        --beam-height: clamp(58px, 17vw, 78px);
        --invader-scale: 0.82;
        --invader-step-one: 20px;
        --invader-step-two: 38px;
        --invader-step-three: 52px;
        --arcade-hit-offset: 14px;
    }

    .lpArcadeLane--five,
    .lpArcadeLane--six,
    .lpArcadeBeam--five,
    .lpArcadeBeam--six {
        display: none;
    }

    .lpArcadeBeam {
        --beam-height: clamp(118px, 32vw, 142px);
    }

    .lpArcadeBeam--one {
        --beam-height: clamp(130px, 34vw, 156px);
        --shot-mid-y: clamp(-116px, -28vw, -86px);
        --shot-y: clamp(-168px, -42vw, -132px);
    }

    .lpArcadeBeam--two {
        --beam-height: clamp(130px, 34vw, 156px);
        --shot-mid-y: clamp(-116px, -28vw, -86px);
        --shot-y: clamp(-168px, -42vw, -132px);
    }

    .lpArcadeBeam--three {
        --shot-mid-y: clamp(-136px, -31vw, -104px);
        --shot-y: clamp(-190px, -47vw, -146px);
    }

    .lpArcadeBeam--four {
        --shot-mid-y: clamp(-136px, -31vw, -104px);
        --shot-y: clamp(-190px, -47vw, -146px);
    }

    .lpArcadeLane--three,
    .lpArcadeBeam--three {
        --lane-delay: -3.74s;
    }

    .lpArcadeLane--four,
    .lpArcadeBeam--four {
        --lane-delay: -12.38s;
    }

    .lpArcadeLane--one {
        --lane-left: calc(50% + var(--arcade-column-one));
        --lane-top: clamp(70px, 18vw, 88px);
    }

    .lpArcadeLane--two {
        --lane-left: calc(50% + var(--arcade-column-two));
        --lane-top: clamp(70px, 18vw, 88px);
        --invader-step-one: 22px;
        --invader-step-two: 42px;
        --invader-step-three: 56px;
    }

    .lpArcadeLane--three {
        --lane-left: calc(50% + var(--arcade-column-three));
        --lane-top: clamp(70px, 18vw, 88px);
        --invader-step-one: 18px;
        --invader-step-two: 34px;
        --invader-step-three: 48px;
    }

    .lpArcadeLane--four {
        --lane-left: calc(50% + var(--arcade-column-four));
        --lane-top: clamp(70px, 18vw, 88px);
        --invader-step-one: 24px;
        --invader-step-two: 44px;
        --invader-step-three: 60px;
    }

    .lpProblemInvader__sprite {
        width: 52px;
        height: 34px;
        margin-bottom: -4px;
        transform: scale(0.78);
        transform-origin: 50% 50%;
    }

    .lpProblemInvader__label {
        min-width: 82px;
        min-height: 17px;
        padding: 4px 6px;
        font-size: 0.56rem;
    }

    .lpYakoruShooter {
        width: 94px;
        height: 78px;
        font-size: 0.62rem;
    }

    .lpYakoruShooter__ship {
        --ship-scale: 0.74;
        transform-origin: 50% 50%;
        margin-bottom: -4px;
    }


}

@media (prefers-reduced-motion: reduce) {
    .lpPremiumRibbon__track,
    .lpArcadeLane,
    .lpProblemInvader,
    .lpProblemInvader__word,
    .lpArcadeBeam,
    .lpArcadeBurst i,
    .lpYakoruShooter,
    .lpYakoruShooter__ship {
        animation: none !important;
        will-change: auto !important;
        transform: none !important;
    }

    .lpYakoruShooter {
        transform: translate3d(-50%, -50%, 0) !important;
    }
}

/* ===== Premium story upgrade ===== */
.lpPremiumFeatures--story {
    padding-bottom: clamp(132px, 11vw, 180px);
}

.lpPremiumFeatures--story .lpPremiumIntro {
    margin-bottom: 56px;
}

.lpPremiumSteps--story {
    gap: clamp(76px, 8vw, 104px);
}

.lpProductScene {
    position: relative;
    z-index: 2;
    min-height: 420px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.3);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        radial-gradient(520px 290px at 48% 18%, rgba(var(--yakoru-brand-gold-rgb), 0.17), transparent 72%),
        linear-gradient(145deg, rgba(24, 46, 62, 0.94), rgba(10, 16, 23, 0.98));
    background-size: 54px 54px, 54px 54px, auto, auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 22px 54px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

.lpWorkflowBoard--resolve {
    inset: 54px 28px 40px;
    place-items: stretch;
}

.lpProductScene {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 24px;
}

.lpProductScene .lpPremiumPreview {
    width: min(100%, 590px);
    min-height: 350px;
    padding: 18px;
    border-radius: 8px;
    background: rgba(18, 22, 27, 0.62);
}

.lpProductScene .lpYakogakuWindow {
    height: 330px;
}

.lpProblemStack {
    position: absolute;
    z-index: 4;
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.lpProblemStack {
    left: 24px;
    top: 72px;
    animation: lpProblemStackResolve 7.2s cubic-bezier(.65, 0, .22, 1) infinite;
}

.lpProblemStack span {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 34px;
    padding: 8px 11px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.34);
    border-radius: 8px;
    background: rgba(17, 14, 8, 0.82);
    color: rgba(var(--yakoru-brand-gold-rgb), 0.96);
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.lpProblemStack span:nth-child(2) {
    margin-left: 18px;
}

.lpProblemStack span:nth-child(3) {
    margin-left: 7px;
}

.lpProductScene--phone {
    grid-template-columns: 1fr;
    min-height: 520px;
}

.lpStoryStep.lpStoryStep--phone {
    overflow: visible;
}

.lpProductScene--phone .lpPremiumPhoneStage {
    width: min(100%, 520px);
    min-height: 500px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}

.lpProductScene--phone .lpPhonePreview {
    width: 320px;
}

.lpProductScene--phone .lpPremiumPhoneStage {
    transform: translateX(-70px);
}

.lpProductScene--phone .lpPhonePreview__device {
    width: 250px;
}

.lpProductScene--phone .lpPhoneAnimeExclaim {
    position: absolute;
    right: 134px;
    top: 34px;
    z-index: 6;
    width: 46px;
    height: 58px;
    overflow: visible;
    pointer-events: none;
    transform: rotate(1deg);
    transform-origin: 35px 52px;
    box-shadow:
        0 12px 22px -18px rgba(0, 0, 0, 0.32),
        0 0 18px rgba(var(--yakoru-brand-gold-rgb), 0.18);
}

.lpProductScene--phone .lpPhoneAnimeExclaim__art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.lpProductScene--phone .lpPhoneAnimeExclaim__mark {
    fill: var(--yakoru-brand-gold);
    stroke: #4c3007;
    stroke-width: 5.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    paint-order: stroke fill;
}

.lpProductScene--phone .lpPhoneProofNote {
    --lp-site-proof-tilt: 2.5deg;
    position: absolute;
    right: 8px;
    top: 124px;
    z-index: 5;
    width: 216px;
    max-width: min(216px, calc(100vw - 96px));
    pointer-events: none;
    transform: rotate(var(--lp-site-proof-tilt));
    animation: none;
}

.lpProductScene--phone .lpPhoneProofNote span {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.42);
    border-radius: 8px;
    background: rgba(8, 24, 35, 0.86);
    color: rgba(215, 242, 255, 0.98);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.24;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24), 0 0 24px rgba(var(--yakoru-brand-gold-rgb), 0.12);
}

.lpPremiumVisual--analyticsResolve {
    display: grid;
    place-items: center;
    overflow: visible;
}

.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story {
    width: min(100%, 530px);
    min-height: 360px;
    border-color: rgba(5, 5, 6, 0.24);
    background: #eaf9fd;
    box-shadow:
        0 20px 40px -18px rgba(4, 12, 28, 0.72),
        0 8px 22px -10px rgba(4, 12, 28, 0.52),
        0 0 0 1px rgba(47, 134, 197, 0.08);
    transform: translate(34px, 52px);
}

.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story::before {
    background: rgba(5, 5, 6, 0.16);
    opacity: 1;
}

.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__heading span,
.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__metric span,
.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__callout span {
    color: rgba(5, 5, 6, 0.62);
}

.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__heading strong,
.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__callout strong,
.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__list span {
    color: #050506;
}

.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__status {
    border-color: rgba(47, 134, 197, 0.34);
    background: rgba(47, 134, 197, 0.14);
    color: #064d78;
}

.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__metric,
.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__bars,
.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__list,
.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__callout {
    border-color: rgba(47, 134, 197, 0.28);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
}

.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__chart {
    border-color: rgba(47, 134, 197, 0.28);
    background: #f7fdff;
}

.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__metric--gold,
.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__callout {
    border-color: rgba(var(--yakoru-brand-gold-rgb), 0.45);
    background: #fff7de;
}

.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__metric strong {
    color: #0a5f98;
}

.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__metric--gold strong {
    color: #8a5b08;
}

.lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__list strong {
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    .lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__metric[data-lp-tooltip]:hover {
        border-color: rgba(47, 134, 197, 0.46);
        background: #ffffff;
    }

    .lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__metric--gold[data-lp-tooltip]:hover {
        border-color: rgba(var(--yakoru-brand-gold-rgb), 0.6);
        background: #fff3cf;
    }

    .lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story .lpAnalyticsBoard__chart[data-lp-tooltip]:hover {
        border-color: rgba(47, 134, 197, 0.46);
    }
}

.lpDataProofCard {
    --lp-site-proof-tilt: -2deg;
    position: absolute;
    left: 26px;
    top: 34px;
    z-index: 5;
    width: 258px;
    min-height: 72px;
    display: flex;
    align-items: center;
    padding: 13px 15px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.34);
    border-radius: 8px;
    background: rgba(17, 14, 8, 0.86);
    color: rgba(var(--yakoru-brand-gold-rgb), 0.98);
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.24;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
    transform: rotate(var(--lp-site-proof-tilt));
}

.lpPremiumRibbon {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), inset 0 -1px 0 rgba(255, 255, 255, 0.035);
}

.lpPremiumRibbon__track span {
    text-shadow: 0 8px 0 rgba(5, 6, 10, 0.25), 0 18px 34px rgba(0, 0, 0, 0.42);
}

@keyframes lpProblemStackResolve {
    0%, 26%, 100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(-2deg);
    }

    52%, 72% {
        opacity: 0.18;
        transform: translate3d(260px, 80px, 0) scale(0.86) rotate(0);
    }
}

@media (max-width: 980px) {
    .lpProductScene {
        min-height: 390px;
    }
}

@media (max-width: 760px) {
    .lpPremiumFeatures--story {
        padding-bottom: 96px;
    }

    .lpPremiumFeatures--story .lpPremiumIntro {
        margin-bottom: 32px;
    }

    .lpPremiumSteps--story {
        gap: 46px;
    }

    .lpProductScene {
        min-height: 330px;
        padding: 14px;
    }

    .lpWorkflowBoard--resolve {
        inset: 48px 14px 36px;
    }

    .lpProductScene .lpPremiumPreview {
        min-height: 270px;
        padding: 10px;
    }

    .lpProductScene .lpYakogakuWindow {
        height: 250px;
    }

    .lpProblemStack {
        animation: none;
    }

    .lpProblemStack {
        transform: none;
        opacity: 0.95;
    }

    .lpProblemStack {
        left: 14px;
        top: 54px;
    }

    .lpProblemStack span {
        min-height: 28px;
        padding: 6px 8px;
        font-size: 0.64rem;
    }

    .lpProductScene--phone {
        min-height: 450px;
    }

    .lpProductScene--phone .lpPremiumPhoneStage {
        min-height: 430px;
        transform: translateX(-60px);
    }

    .lpProductScene--phone .lpPhonePreview {
        width: 242px;
        transform: translateY(-24px);
    }

    .lpProductScene--phone .lpPhonePreview__device {
        width: min(216px, 62vw);
    }

    .lpProductScene--phone .lpPhoneAnimeExclaim {
        right: 72px;
        top: 10px;
        width: 31px;
        height: 42px;
        transform: rotate(1deg);
        transform-origin: 24px 38px;
    }

    .lpProductScene--phone .lpPhoneProofNote {
        --lp-site-proof-tilt: 2deg;
        right: 4px;
        top: 76px;
        width: 136px;
        max-width: min(136px, calc(100vw - 34px));
        transform: rotate(var(--lp-site-proof-tilt));
    }

    .lpProductScene--phone .lpPhoneProofNote span {
        min-height: 46px;
        padding: 8px 9px;
        font-size: 0.68rem;
        line-height: 1.22;
    }

}

@media (prefers-reduced-motion: reduce) {
    .lpWorkflowSceneTrack,
    .lpPaperPile,
    .lpWorkflowSystem--icons,
    .lpSystemTile,
    .lpProblemStack {
        animation: none !important;
    }
}

/* ===== Tangled workflow card ===== */
.lpWorkflowBoard--resolve {
    inset: 54px 28px 40px;
    display: block;
    overflow: hidden;
    border-color: rgba(var(--yakoru-brand-gold-rgb), 0.16);
    background: linear-gradient(135deg, rgba(14, 16, 20, 0.98), rgba(6, 9, 11, 0.98));
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.lpWorkflowSceneTrack {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    width: 200%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    animation: lpWorkflowCameraSlide 12s cubic-bezier(.66, 0, .22, 1) infinite;
}

.lpWorkflowScene {
    position: relative;
    min-width: 0;
    display: grid;
    place-items: center;
    padding: 34px;
}

.lpPaperPile {
    position: relative;
    z-index: 2;
    width: 390px;
    height: 300px;
    transform-origin: center;
    animation: lpWorkflowPaperFocus 12s ease-in-out infinite;
}

.lpMessyPaper {
    position: absolute;
    display: block;
    width: 136px;
    height: 178px;
    padding: 23px 17px;
    border: 1px solid rgba(15, 20, 28, 0.14);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255, 248, 233, 0.97), rgba(243, 236, 217, 0.96));
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.34);
}

.lpMessyPaper::before {
    content: "";
    position: absolute;
    right: -1px;
    top: -1px;
    width: 28px;
    height: 28px;
    border-left: 1px solid rgba(15, 20, 28, 0.12);
    border-bottom: 1px solid rgba(15, 20, 28, 0.12);
    border-radius: 0 10px 0 8px;
    background: rgba(var(--yakoru-brand-gold-rgb), 0.24);
}

.lpMessyPaper i,
.lpMessyPaper b,
.lpMessyPaper em {
    display: block;
    height: 9px;
    margin-bottom: 13px;
    border-radius: 99px;
    background: rgba(19, 29, 42, 0.18);
}

.lpMessyPaper i {
    width: 78%;
    background: rgba(var(--yakoru-brand-gold-rgb), 0.54);
}

.lpMessyPaper b {
    width: 92%;
}

.lpMessyPaper em {
    width: 56%;
}

.lpMessyPaper--one {
    left: 54px;
    top: 28px;
    transform: rotate(-16deg);
}

.lpMessyPaper--two {
    left: 154px;
    top: 0;
    transform: rotate(10deg);
}

.lpMessyPaper--three {
    left: 108px;
    top: 108px;
    transform: rotate(-6deg);
}

.lpMessyPaper--four {
    left: 226px;
    top: 88px;
    transform: rotate(15deg);
}

.lpWorkflowBoard--resolve .lpWorkflowSystem--icons {
    position: relative;
    inset: auto;
    z-index: 3;
    width: min(460px, 92%);
    min-height: 396px;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(118px, auto);
    gap: 12px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.26);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(14, 18, 22, 0.98), rgba(5, 8, 10, 0.98));
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform-origin: center;
    animation: lpWorkflowSystemSettle 12s cubic-bezier(.22, 1, .36, 1) infinite;
}

.lpSystemTile {
    min-height: 118px;
    display: grid;
    place-items: center;
    border: 3px solid rgba(var(--yakoru-brand-gold-rgb), 0.86);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(15, 21, 25, 0.94), rgba(8, 12, 15, 0.98));
    color: rgba(var(--yakoru-brand-gold-rgb), 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    opacity: 0.72;
    transform: translateY(12px);
    animation: lpWorkflowTileSettle 12s ease-in-out infinite;
}

.lpSystemTile:nth-child(2) {
    animation-delay: .12s;
}

.lpSystemTile:nth-child(3) {
    animation-delay: .22s;
}

.lpSystemTile:nth-child(4) {
    animation-delay: .32s;
}

.lpSystemTile--chart {
    grid-column: 1 / -1;
    min-height: 152px;
    padding: 18px 20px;
}

.lpWorkflowIcon {
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lpIconStroke {
    fill: none;
    stroke: currentColor;
}

.lpIconGoldStroke {
    fill: none;
    stroke: rgba(var(--yakoru-brand-gold-rgb), 0.94);
}

.lpIconBlueFill {
    fill: rgba(var(--yakoru-brand-gold-rgb), 0.95);
    stroke: none;
}

.lpIconGoldFill {
    fill: rgba(var(--yakoru-brand-gold-rgb), 0.94);
    stroke: none;
}

.lpWorkflowChart {
    width: 100%;
    height: 112px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lpChartAxis {
    stroke: rgba(var(--yakoru-brand-gold-rgb), 0.74);
    stroke-width: 5;
}

.lpChartBar {
    fill: rgba(var(--yakoru-brand-gold-rgb), 0.72);
    stroke: none;
}

.lpChartCap {
    fill: rgba(var(--yakoru-brand-gold-rgb), 0.92);
    stroke: none;
}

.lpChartTrend {
    stroke: rgba(var(--yakoru-brand-gold-rgb), 0.94);
    stroke-width: 5;
}

.lpChartMark {
    fill: rgba(var(--yakoru-brand-gold-rgb), 0.9);
    stroke: none;
}

@keyframes lpWorkflowCameraSlide {
    0%, 30% {
        transform: translateX(0);
    }

    44%, 88% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes lpWorkflowPaperFocus {
    0%, 30%, 100% {
        opacity: 1;
        transform: rotate(-2deg) scale(1);
    }

    44%, 88% {
        opacity: 0.18;
        transform: rotate(0deg) scale(0.86);
    }
}

@keyframes lpWorkflowSystemSettle {
    0%, 38%, 100% {
        opacity: 0.28;
        transform: translateX(26px) scale(.98);
    }

    50%, 88% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes lpWorkflowTileSettle {
    0%, 42%, 100% {
        opacity: 0.58;
        transform: translateY(12px);
    }

    54%, 88% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 760px) {
    .lpWorkflowBoard--resolve {
        inset: 48px 14px 34px;
    }

    .lpWorkflowScene {
        padding: 20px;
    }

    .lpPaperPile {
        width: 320px;
        height: 238px;
    }

    .lpMessyPaper {
        width: 92px;
        height: 120px;
        padding: 16px 12px;
    }

    .lpMessyPaper i,
    .lpMessyPaper b,
    .lpMessyPaper em {
        height: 7px;
        margin-bottom: 9px;
    }

    .lpMessyPaper--one {
        left: 40px;
        top: 28px;
    }

    .lpMessyPaper--two {
        left: 116px;
        top: 8px;
    }

    .lpMessyPaper--three {
        left: 92px;
        top: 90px;
    }

    .lpMessyPaper--four {
        left: 176px;
        top: 72px;
    }

    .lpWorkflowBoard--resolve .lpWorkflowSystem--icons {
        width: min(310px, 96%);
        min-height: 326px;
        padding: 16px;
        gap: 10px;
        grid-auto-rows: minmax(88px, auto);
    }

    .lpSystemTile {
        min-height: 88px;
        border-width: 2px;
        border-radius: 14px;
    }

    .lpSystemTile--chart {
        min-height: 116px;
        padding: 14px;
    }

    .lpWorkflowIcon {
        width: 42px;
        height: 42px;
    }

    .lpWorkflowChart {
        height: 88px;
    }

    .lpWorkflowSceneTrack,
    .lpPaperPile,
    .lpWorkflowBoard--resolve .lpWorkflowSystem--icons,
    .lpSystemTile {
        animation: none !important;
    }

    .lpWorkflowSceneTrack {
        transform: translateX(0);
    }

    .lpPaperPile,
    .lpWorkflowBoard--resolve .lpWorkflowSystem--icons,
    .lpSystemTile {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpWorkflowSceneTrack {
        width: 100%;
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
        gap: 14px;
        padding: 18px;
        animation: none !important;
    }

    .lpWorkflowScene {
        padding: 0;
    }

    .lpPaperPile,
    .lpWorkflowBoard--resolve .lpWorkflowSystem--icons,
    .lpSystemTile {
        animation: none !important;
        opacity: 1;
        transform: none;
        filter: none;
    }

    .lpPaperPile {
        width: min(210px, 100%);
        height: 210px;
    }

    .lpWorkflowBoard--resolve .lpWorkflowSystem--icons {
        width: min(320px, 100%);
        min-height: 300px;
    }
}

/* ===== Workflow motion field ===== */
.lpWorkflowFeature {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(420px, 1.22fr);
    grid-template-areas:
        "copy visual"
        "text visual";
    grid-template-rows: auto auto;
    align-content: center;
    align-items: start;
    column-gap: clamp(34px, 5vw, 74px);
    row-gap: 16px;
    min-height: 560px;
    padding: 12px 8px 24px;
    overflow: hidden;
}

.lpWorkflowFeature::before {
    content: "";
    position: absolute;
    left: min(33%, 360px);
    right: 8%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--yakoru-brand-gold-rgb), 0.44), rgba(var(--yakoru-brand-gold-rgb), 0.42), transparent);
    opacity: 0.7;
    transform: translateY(-50%);
    pointer-events: none;
}

.lpWorkflowFeature__copy {
    grid-area: copy;
    align-self: end;
    position: relative;
    z-index: 2;
    display: grid;
    align-content: end;
    gap: 0;
    max-width: 480px;
    min-height: 0;
    padding: clamp(8px, 2vw, 18px) 0 clamp(8px, 2vw, 18px) 28px;
}

.lpWorkflowFeature__copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 2px;
    border-radius: 99px;
    background: linear-gradient(180deg, rgba(var(--yakoru-brand-gold-rgb), 0.96), rgba(var(--yakoru-brand-gold-rgb), 0.48));
}

.lpWorkflowFeature__copy h3 {
    margin: 0;
    max-width: 11.5ch;
    color: var(--lp-feature-text);
    font-family: var(--lp-feature-display-font);
    font-size: clamp(2.35rem, 4.4vw, 4.5rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: 0;
    text-wrap: balance;
}

.lpWorkflowFeature__text {
    grid-area: text;
    align-self: start;
    position: relative;
    z-index: 2;
    max-width: 57ch;
    margin: 0;
    padding-left: 28px;
    color: var(--lp-feature-muted-text);
    font-size: 1.24rem;
    font-weight: 700;
    line-height: 1.62;
}

.lpWorkflowVisual {
    grid-area: visual;
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 520px;
    overflow: hidden;
}

.lpWorkflowVisual::before {
    content: "";
    position: absolute;
    inset: 8% 0 5%;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    opacity: 0.42;
    pointer-events: none;
}

.lpWorkflowVisual .lpWorkflowBoard--resolve {
    inset: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.lpWorkflowVisual .lpWorkflowScene {
    padding: clamp(18px, 4vw, 44px);
}

.lpWorkflowVisual .lpWorkflowSceneCard {
    position: absolute;
    z-index: 6;
    width: min(282px, calc(100% - 68px));
    min-height: 64px;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(var(--yakoru-brand-gold-rgb), 0.34);
    border-radius: 8px;
    background: rgba(39, 33, 23, 0.9);
    color: rgba(var(--yakoru-brand-gold-rgb), 0.98);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.24;
    box-shadow:
        0 18px 34px -14px rgba(4, 12, 28, 0.78),
        0 7px 18px -8px rgba(4, 12, 28, 0.52);
}

.lpWorkflowVisual .lpWorkflowSceneCard--messy {
    left: clamp(18px, 5vw, 42px);
    top: clamp(16px, 4vw, 34px);
    transform: rotate(-2deg);
}

.lpWorkflowVisual .lpWorkflowSceneCard--system {
    right: clamp(18px, 5vw, 42px);
    top: clamp(16px, 4vw, 34px);
    border-color: rgba(var(--yakoru-brand-gold-rgb), 0.44);
    color: rgba(215, 242, 255, 0.98);
    background: rgba(18, 31, 42, 0.9);
    transform: rotate(2deg);
}

.lpWorkflowVisual .lpWorkflowScene--messy::after,
.lpWorkflowVisual .lpWorkflowScene--system::after {
    content: "";
    position: absolute;
    left: 11%;
    right: 11%;
    bottom: 12%;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, rgba(var(--yakoru-brand-gold-rgb), 0.42), rgba(var(--yakoru-brand-gold-rgb), 0.38), transparent);
    opacity: 0.76;
}

.lpWorkflowVisual .lpPaperPile {
    width: min(470px, 96%);
    height: 330px;
}

.lpWorkflowVisual .lpMessyPaper {
    border-color: rgba(15, 20, 28, 0.1);
    box-shadow:
        0 18px 32px -14px rgba(4, 12, 28, 0.58),
        0 6px 16px -8px rgba(4, 12, 28, 0.38),
        0 0 0 1px rgba(var(--yakoru-brand-gold-rgb), 0.08);
}

.lpWorkflowVisual .lpMessyPaper--one {
    left: 12%;
    top: 11%;
}

.lpWorkflowVisual .lpMessyPaper--two {
    left: 38%;
    top: 2%;
}

.lpWorkflowVisual .lpMessyPaper--three {
    left: 28%;
    top: 39%;
}

.lpWorkflowVisual .lpMessyPaper--four {
    left: 58%;
    top: 31%;
}

.lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons {
    position: relative;
    width: min(560px, 96%);
    min-height: 300px;
    padding: 0 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow:
        0 18px 34px -18px rgba(4, 12, 28, 0.64),
        0 7px 18px -10px rgba(4, 12, 28, 0.42);
    transform-origin: center;
    animation: lpWorkflowSystemSettle 12s cubic-bezier(.22, 1, .36, 1) infinite;
}

.lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons::before {
    content: "";
    position: absolute;
    left: 11%;
    right: 11%;
    top: 50%;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(var(--yakoru-brand-gold-rgb), 0.8), rgba(var(--yakoru-brand-gold-rgb), 0.72), rgba(var(--yakoru-brand-gold-rgb), 0.54));
    opacity: 0.78;
}

.lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons::after {
    content: "";
    position: absolute;
    right: 9%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid rgba(var(--yakoru-brand-gold-rgb), 0.7);
    border-right: 2px solid rgba(var(--yakoru-brand-gold-rgb), 0.7);
    opacity: 0.86;
    transform: translateY(-50%) rotate(45deg);
}

.lpWorkflowVisual .lpSystemTile {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: auto;
    height: 132px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(var(--yakoru-brand-gold-rgb), 0.95);
    opacity: 0.72;
    transform: translateY(12px);
    animation: lpWorkflowTileSettle 12s ease-in-out infinite;
}

.lpWorkflowVisual .lpSystemTile:nth-child(1) {
    grid-column: 1;
}

.lpWorkflowVisual .lpSystemTile:nth-child(2) {
    grid-column: 2;
    animation-delay: .12s;
}

.lpWorkflowVisual .lpSystemTile:nth-child(3) {
    grid-column: 3;
    animation-delay: .22s;
}

.lpWorkflowVisual .lpSystemTile:nth-child(4) {
    grid-column: 4;
    animation-delay: .32s;
}

.lpWorkflowVisual .lpSystemTile:nth-child(4)::after {
    content: none;
}

.lpWorkflowVisual .lpSystemTile:not(.lpSystemTile--chart)::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 13px;
    height: 13px;
    border-radius: 999px;
    background: rgba(var(--yakoru-brand-gold-rgb), 0.92);
    box-shadow: 0 0 0 7px rgba(var(--yakoru-brand-gold-rgb), 0.09), 0 0 22px rgba(var(--yakoru-brand-gold-rgb), 0.24);
    transform: translateX(-50%);
}

.lpWorkflowVisual .lpWorkflowIcon {
    width: 78px;
    height: 78px;
    padding: 14px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.13), transparent 36%),
        radial-gradient(circle, rgba(var(--yakoru-brand-gold-rgb), 0.18), rgba(5, 8, 10, 0.78) 70%);
    box-shadow: 0 0 0 1px rgba(var(--yakoru-brand-gold-rgb), 0.28), 0 18px 34px rgba(0, 0, 0, 0.28);
}

.lpWorkflowVisual .lpWorkflowChart {
    width: min(100%, 300px);
    height: 128px;
    filter: none;
    box-shadow: 0 18px 28px -20px rgba(0, 0, 0, 0.46);
}

@media (max-width: 1020px) {
    .lpWorkflowFeature {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "text"
            "visual";
        gap: 22px;
        min-height: 0;
        padding-inline: 0;
    }

    .lpWorkflowFeature::before {
        left: 0;
        right: 0;
        top: 44%;
    }

    .lpWorkflowFeature__copy {
        max-width: 720px;
        min-height: 0;
    }

    .lpWorkflowFeature__copy h3 {
        max-width: 15ch;
    }

    .lpWorkflowVisual {
        min-height: 470px;
    }
}

@media (max-width: 760px) {
    .lpWorkflowFeature {
        grid-template-areas:
            "copy"
            "visual"
            "text";
        gap: 18px;
    }

    .lpWorkflowFeature::before {
        opacity: 0.32;
    }

    .lpWorkflowFeature__copy {
        padding-left: 22px;
    }

    .lpWorkflowFeature__copy h3 {
        font-size: 2.2rem;
        line-height: 1.04;
    }

    .lpWorkflowFeature__text {
        padding-left: 22px;
        border-left: 2px solid rgba(var(--yakoru-brand-gold-rgb), 0.28);
    }

    .lpWorkflowVisual {
        min-height: 360px;
    }

    .lpWorkflowVisual .lpWorkflowSceneCard {
        width: min(190px, calc(100% - 30px));
        min-height: 46px;
        padding: 8px 10px;
        font-size: 0.66rem;
        line-height: 1.2;
    }

    .lpWorkflowVisual .lpWorkflowSceneCard--messy {
        left: 16px;
        top: 16px;
    }

    .lpWorkflowVisual .lpWorkflowSceneCard--system {
        right: 16px;
        top: 16px;
    }

    .lpWorkflowVisual .lpWorkflowSceneTrack {
        animation: lpWorkflowCameraSlide 12s cubic-bezier(.66, 0, .22, 1) infinite !important;
    }

    .lpWorkflowVisual .lpPaperPile,
    .lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons,
    .lpWorkflowVisual .lpSystemTile {
        animation: none !important;
    }

    .lpWorkflowVisual .lpPaperPile,
    .lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons,
    .lpWorkflowVisual .lpSystemTile {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .lpWorkflowVisual .lpPaperPile {
        width: min(330px, 96%);
        height: 250px;
    }

    .lpWorkflowVisual .lpMessyPaper {
        width: 94px;
        height: 124px;
        padding: 16px 12px;
    }

    .lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons {
        width: min(330px, 98%);
        min-height: 190px;
        padding: 0 8px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lpWorkflowVisual .lpSystemTile {
        width: auto;
        height: 104px;
    }

    .lpWorkflowVisual .lpSystemTile:nth-child(1) {
        grid-column: 1;
    }

    .lpWorkflowVisual .lpSystemTile:nth-child(2) {
        grid-column: 2;
    }

    .lpWorkflowVisual .lpSystemTile:nth-child(3) {
        grid-column: 3;
    }

    .lpWorkflowVisual .lpSystemTile:nth-child(4) {
        grid-column: 4;
    }

    .lpWorkflowVisual .lpSystemTile:nth-child(4)::after {
        content: none;
    }

    .lpWorkflowVisual .lpSystemTile:not(.lpSystemTile--chart)::before {
        bottom: 10px;
        width: 10px;
        height: 10px;
    }

    .lpWorkflowVisual .lpWorkflowIcon {
        width: 54px;
        height: 54px;
        padding: 10px;
    }

    .lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons::after {
        right: 7%;
        width: 8px;
        height: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpWorkflowVisual .lpWorkflowSceneTrack {
        width: 100%;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
        transform: none;
        animation: none !important;
    }

    .lpWorkflowVisual .lpWorkflowScene {
        padding: 0;
    }

    .lpWorkflowVisual .lpPaperPile,
    .lpWorkflowVisual .lpWorkflowBoard--resolve .lpWorkflowSystem--icons,
    .lpWorkflowVisual .lpSystemTile {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none !important;
    }
}

/* ===== Open story steps ===== */
.lpStoryStep {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(420px, 1.22fr);
    grid-template-areas:
        "copy visual"
        "text visual";
    grid-template-rows: auto auto;
    align-content: center;
    align-items: start;
    column-gap: clamp(34px, 5vw, 74px);
    row-gap: 16px;
    min-height: 560px;
    padding: 12px 8px 24px;
    overflow: hidden;
}

.lpStoryStep::before {
    content: "";
    position: absolute;
    left: min(33%, 360px);
    right: 8%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--yakoru-brand-gold-rgb), 0.52), rgba(var(--yakoru-brand-gold-rgb), 0.36), transparent);
    opacity: 0.64;
    transform: translateY(-50%);
    pointer-events: none;
}

.lpStoryStep--reverse {
    grid-template-columns: minmax(420px, 1.22fr) minmax(280px, 0.78fr);
    grid-template-areas:
        "visual copy"
        "visual text";
}

.lpStoryStep--site {
    overflow: visible;
}

.lpStoryStep--reverse::before {
    left: 8%;
    right: min(33%, 360px);
    background: linear-gradient(90deg, transparent, rgba(var(--yakoru-brand-gold-rgb), 0.36), rgba(var(--yakoru-brand-gold-rgb), 0.52));
}

.lpStoryStep--reverse .lpStoryStep__copy {
    order: 2;
    justify-self: end;
    justify-items: end;
    padding: clamp(8px, 2vw, 18px) 28px clamp(8px, 2vw, 18px) 0;
    text-align: right;
}

.lpStoryStep--reverse .lpProductScene,
.lpStoryStep--reverse .lpPremiumVisual {
    order: 1;
}

.lpStoryStep__copy {
    grid-area: copy;
    align-self: end;
    position: relative;
    z-index: 2;
    display: grid;
    align-content: end;
    gap: 0;
    max-width: 500px;
    min-height: 0;
    padding: clamp(8px, 2vw, 18px) 0 clamp(8px, 2vw, 18px) 28px;
}

.lpStoryStep__copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 2px;
    border-radius: 99px;
    background: linear-gradient(180deg, rgba(var(--yakoru-brand-gold-rgb), 0.96), rgba(var(--yakoru-brand-gold-rgb), 0.48));
}

.lpStoryStep--reverse .lpStoryStep__copy::before {
    right: 0;
    left: auto;
}

.lpStoryStep__copy h3 {
    margin: 0;
    max-width: 11.5ch;
    color: var(--lp-feature-text);
    font-family: var(--lp-feature-display-font);
    font-size: clamp(2.35rem, 4.1vw, 4.05rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: 0;
    text-wrap: balance;
}

.lpStoryStep--data .lpStoryStep__copy h3 {
    max-width: 12.5ch;
}

.lpStoryStep--site .lpStoryStep__copy h3,
.lpStoryStep--site .lpStoryStep__text {
    color: var(--lp-feature-muted-text);
}

.lpStoryStep__text {
    grid-area: text;
    align-self: start;
    position: relative;
    z-index: 2;
    max-width: 58ch;
    margin: 0;
    padding-left: 28px;
    color: var(--lp-feature-muted-text);
    font-size: 1.24rem;
    font-weight: 700;
    line-height: 1.62;
}

.lpStoryStep--reverse .lpStoryStep__text {
    justify-self: end;
    padding-right: 28px;
    padding-left: 0;
    text-align: right;
}

.lpStoryStep .lpProductScene,
.lpStoryStep .lpPremiumVisual--analyticsResolve {
    grid-area: visual;
    position: relative;
    z-index: 2;
    min-height: 520px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-size: auto;
    box-shadow: none;
    overflow: visible;
}

.lpStoryStep .lpProductScene::before,
.lpStoryStep .lpPremiumVisual--analyticsResolve::before {
    content: "";
    position: absolute;
    inset: 8% 0 5%;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    opacity: 0.5;
    pointer-events: none;
}

.lpStoryStep .lpProductScene .lpPremiumPreview {
    width: min(100%, 600px);
    min-height: 350px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.lpStoryStep .lpProductScene .lpYakogakuWindow {
    height: 330px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.lpStoryStep--site .lpProductScene .lpPremiumPreview {
    width: min(100%, 660px);
    min-height: 390px;
}

.lpStoryStep--site .lpProductScene .lpYakogakuWindow {
    height: 368px;
    box-shadow:
        0 24px 42px -18px rgba(4, 12, 28, 0.82),
        0 8px 22px -10px rgba(4, 12, 28, 0.6),
        0 0 30px rgba(143, 76, 255, 0.2);
}

.lpStoryStep .lpPremiumPhoneStage {
    min-height: 450px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.lpStoryStep--phone .lpPremiumPhoneStage {
    overflow: visible;
}

.lpStoryStep--phone .lpPremiumPhoneStage .lpPhonePreview {
    filter: none;
    z-index: 1;
}

.lpStoryStep--phone .lpPhonePreview--yakogaku .lpPhonePreview__device {
    box-shadow:
        0 18px 34px -18px rgba(4, 12, 28, 0.82),
        0 7px 18px -9px rgba(4, 12, 28, 0.64),
        0 0 28px rgba(143, 76, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.lpStoryStep .lpProductScene--phone {
    min-height: 540px;
}

.lpStoryStep .lpProductScene--phone .lpPremiumPhoneStage {
    min-height: 500px;
}

@media (max-width: 1020px) {
    .lpStoryStep,
    .lpStoryStep--reverse {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "text"
            "visual";
        gap: 22px;
        min-height: 0;
        padding-inline: 0;
    }

    .lpStoryStep::before,
    .lpStoryStep--reverse::before {
        left: 0;
        right: 0;
        top: 44%;
    }

    .lpStoryStep--reverse .lpStoryStep__copy,
    .lpStoryStep--reverse .lpStoryStep__text,
    .lpStoryStep--reverse .lpProductScene,
    .lpStoryStep--reverse .lpPremiumVisual {
        order: initial;
    }

    .lpStoryStep__copy {
        max-width: 720px;
        min-height: 0;
    }

    .lpStoryStep--reverse .lpStoryStep__copy {
        justify-self: start;
        justify-items: start;
        padding: clamp(8px, 2vw, 18px) 0 clamp(8px, 2vw, 18px) 28px;
        text-align: left;
    }

    .lpStoryStep--reverse .lpStoryStep__text {
        justify-self: start;
        padding-right: 0;
        padding-left: 28px;
        text-align: left;
    }

    .lpStoryStep--reverse .lpStoryStep__copy::before {
        right: auto;
        left: 0;
    }

    .lpStoryStep__copy h3 {
        max-width: 15ch;
    }
}

@media (max-width: 760px) {
    .lpPremiumVisual--analyticsResolve .lpAnalyticsBoard--story {
        width: min(100%, 330px);
        min-height: 250px;
        transform: translateY(50px);
    }

    .lpDataProofCard {
        --lp-site-proof-tilt: -1.5deg;
        left: 10px;
        top: 18px;
        width: min(230px, calc(100% - 20px));
        min-height: 58px;
        padding: 10px 12px;
        font-size: 0.72rem;
        line-height: 1.22;
        transform: rotate(var(--lp-site-proof-tilt));
    }

    .lpStoryStep {
        grid-template-areas:
            "copy"
            "visual"
            "text";
        gap: 18px;
    }

    .lpStoryStep::before {
        opacity: 0.32;
    }

    .lpStoryStep__copy {
        padding-left: 22px;
    }

    .lpStoryStep__copy h3 {
        font-size: 2.2rem;
        line-height: 1.04;
    }

    .lpStoryStep__text,
    .lpStoryStep--reverse .lpStoryStep__text {
        padding-left: 22px;
        padding-right: 0;
        border-left: 2px solid rgba(var(--yakoru-brand-gold-rgb), 0.28);
        text-align: left;
    }

    .lpStoryStep .lpProductScene,
    .lpStoryStep .lpPremiumVisual--analyticsResolve {
        min-height: 360px;
    }

    .lpStoryStep .lpPremiumVisual--analyticsResolve {
        min-height: 430px;
    }

    .lpStoryStep .lpProductScene .lpPremiumPreview {
        min-height: 250px;
    }

    .lpStoryStep .lpProductScene .lpYakogakuWindow {
        height: 250px;
    }

    .lpStoryStep--site .lpProductScene .lpYakogakuWindow {
        height: 320px;
    }

    .lpYakogakuWindow--pc .lpYakogakuWindow__top {
        grid-template-columns: auto minmax(0, 1fr);
        height: 36px;
    }

    .lpYakogakuWindow--pc .lpYakogakuWindow__right,
    .lpYakogakuWindow--pc .lpYakogakuWindow__navText {
        display: none;
    }

    .lpYakogakuWindow--pc .lpYakogakuWindow__nav {
        justify-self: end;
        gap: 12px;
    }

    .lpYakogakuWindow--pc .lpYakogakuWindow__navButton {
        min-height: 24px;
        font-size: 7.5px;
    }

    .lpYakogakuWindow--pc .lpYakogakuMini {
        padding: 18px 18px 48px;
    }

    .lpYakogakuWindow--pc .lpYakogakuMini__hub {
        width: min(290px, 86%);
    }

    .lpYakogakuWindow--pc .lpYakogakuMini h4 {
        font-size: 25px;
    }

    .lpStoryStep .lpPremiumPhoneStage {
        min-height: 410px;
    }

    .lpStoryStep .lpProductScene--phone {
        min-height: 450px;
    }

    .lpStoryStep .lpProductScene--phone .lpPremiumPhoneStage {
        min-height: 430px;
    }

}

/* ===== Site proof accent ===== */
.lpProductScene--site {
    overflow: visible;
}

.lpProductScene--site .lpProblemStack {
    --lp-site-proof-tilt: -1.6deg;
    left: clamp(24px, 4.2vw, 46px);
    top: clamp(22px, 3.4vw, 30px);
    z-index: 7;
    gap: 0;
    width: fit-content;
    max-width: min(260px, calc(100% - 48px));
    opacity: 1;
    overflow: visible;
    transform: rotate(var(--lp-site-proof-tilt));
    animation: none;
}

.lpProductScene--site .lpProblemStack span {
    width: auto;
    max-width: min(260px, calc(100vw - 96px));
    min-height: 44px;
    padding: 10px 12px;
    border-color: rgba(var(--yakoru-brand-gold-rgb), 0.38);
    border-radius: 8px;
    background:
        radial-gradient(circle at 0% 0%, rgba(var(--yakoru-brand-gold-rgb), 0.24), transparent 46%),
        linear-gradient(135deg, rgba(13, 11, 18, 0.94), rgba(7, 8, 13, 0.9));
    color: rgba(var(--yakoru-brand-gold-rgb), 0.96);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.18;
    white-space: normal;
    text-wrap: balance;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3), 0 0 26px rgba(var(--yakoru-brand-gold-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lpProductScene--site .lpProblemStack span:nth-child(n) {
    margin-left: 0;
}

.lpProductScene--site .lpAnimeSurpriseBurst {
    --lp-site-proof-tilt: -12deg;
    position: absolute;
    left: clamp(-18px, -1.2vw, -8px);
    top: -28px;
    z-index: 30;
    width: 116px;
    height: 104px;
    overflow: visible;
    pointer-events: none;
    opacity: 1;
    transform: rotate(var(--lp-site-proof-tilt));
    transform-origin: 28px 28px;
    box-shadow:
        0 13px 22px -18px rgba(0, 0, 0, 0.34),
        0 0 20px rgba(var(--yakoru-brand-gold-rgb), 0.18);
}

.lpProductScene--site .lpAnimeSurpriseBurst__art {
    position: absolute;
    left: 28px;
    top: 20px;
    display: block;
    width: 72px;
    height: 62px;
    overflow: visible;
}

.lpProductScene--site .lpAnimeSurpriseBurst__mark {
    fill: var(--yakoru-brand-gold);
    stroke: #4c3007;
    stroke-width: 5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    paint-order: stroke fill;
}

@media (max-width: 760px) {
    .lpStoryStep--site .lpProductScene--site {
        min-height: 440px;
    }

    .lpProductScene--site .lpProblemStack {
        --lp-site-proof-tilt: -1.25deg;
        left: 14px;
        top: 12px;
        max-width: min(230px, calc(100% - 28px));
        transform: rotate(var(--lp-site-proof-tilt));
    }

    .lpProductScene--site .lpProblemStack span {
        max-width: min(230px, calc(100vw - 44px));
        min-height: 44px;
        padding: 10px 12px;
        font-size: 0.68rem;
        line-height: 1.16;
    }

    .lpProductScene--site .lpAnimeSurpriseBurst {
        left: -14px;
        top: -42px;
        width: 108px;
        height: 96px;
        opacity: 1;
    }

    .lpProductScene--site .lpAnimeSurpriseBurst__art {
        left: 16px;
        top: 18px;
        width: 72px;
        height: 62px;
    }
}

.lpProductScene--phone .lpPhoneProofNote,
.lpPremiumVisual--analyticsResolve .lpDataProofCard,
.lpProductScene--site :where(.lpProblemStack, .lpAnimeSurpriseBurst) {
    transform-origin: 50% 50%;
    transform-box: border-box;
}

.home-motion-ready .lpStoryStep--phone:not(.is-in-view):not(.is-exiting-view) .lpProductScene--phone .lpPhoneProofNote,
.home-motion-ready .lpStoryStep--data:not(.is-in-view):not(.is-exiting-view) .lpPremiumVisual--analyticsResolve .lpDataProofCard,
.home-motion-ready .lpStoryStep--site:not(.is-in-view):not(.is-exiting-view) .lpProductScene--site :where(.lpProblemStack, .lpAnimeSurpriseBurst) {
    opacity: 0;
    transform: perspective(920px) rotate(var(--lp-site-proof-tilt)) rotateY(-90deg);
}

.lpStoryStep--phone.is-exiting-view .lpProductScene--phone .lpPhoneProofNote,
.lpStoryStep--data.is-exiting-view .lpPremiumVisual--analyticsResolve .lpDataProofCard,
.lpStoryStep--site.is-exiting-view .lpProductScene--site :where(.lpProblemStack, .lpAnimeSurpriseBurst) {
    animation: lpYakogakuProofSideFlipOut 640ms cubic-bezier(.2, .82, .22, 1) forwards;
}

.lpStoryStep--phone.is-in-view .lpProductScene--phone .lpPhoneProofNote,
.lpStoryStep--data.is-in-view .lpPremiumVisual--analyticsResolve .lpDataProofCard,
.lpStoryStep--site.is-in-view .lpProductScene--site :where(.lpProblemStack, .lpAnimeSurpriseBurst) {
    animation: lpYakogakuProofSideFlipIn 640ms cubic-bezier(.2, .82, .22, 1) 40ms backwards;
}

@keyframes lpYakogakuProofSideFlipIn {
    0% {
        opacity: 0;
        transform: perspective(920px) rotate(var(--lp-site-proof-tilt)) rotateY(-90deg);
    }

    100% {
        opacity: 1;
        transform: perspective(920px) rotate(var(--lp-site-proof-tilt)) rotateY(0deg);
    }
}

@keyframes lpYakogakuProofSideFlipOut {
    0% {
        opacity: 1;
        transform: perspective(920px) rotate(var(--lp-site-proof-tilt)) rotateY(0deg);
    }

    100% {
        opacity: 0;
        transform: perspective(920px) rotate(var(--lp-site-proof-tilt)) rotateY(-90deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp .lpStoryStep--site.is-in-view .lpProductScene--site :where(.lpProblemStack, .lpAnimeSurpriseBurst),
    .lp .lpStoryStep--phone.is-in-view .lpProductScene--phone .lpPhoneProofNote,
    .lp .lpStoryStep--data.is-in-view .lpPremiumVisual--analyticsResolve .lpDataProofCard,
    .lp .lpStoryStep--site.is-exiting-view .lpProductScene--site :where(.lpProblemStack, .lpAnimeSurpriseBurst),
    .lp .lpStoryStep--phone.is-exiting-view .lpProductScene--phone .lpPhoneProofNote,
    .lp .lpStoryStep--data.is-exiting-view .lpPremiumVisual--analyticsResolve .lpDataProofCard {
        animation: none !important;
        opacity: 1;
        transform: rotate(var(--lp-site-proof-tilt));
    }
}