.palyak-page { overflow: hidden; }
.palyak-page .container { max-inline-size: var(--content-max-width); }
.palyak-hero { padding-block-end: calc(var(--section-space) + var(--space-8)); }
.palyak-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-12); align-items: start; }
.palyak-hero__copy { grid-column: 1; min-inline-size: 0; }
.palyak-hero__copy h1 { max-inline-size: 14ch; }
.palyak-hero__lead { max-inline-size: 38rem; }
.palyak-hero__note { max-inline-size: 32rem; border-block-start: var(--border); padding-block-start: var(--space-4); color: var(--color-slate); font-size: var(--font-size-14); line-height: 1.55; }
.palyak-hero__visual { position: relative; grid-column: 2; min-inline-size: 0; max-inline-size: 32.5rem; justify-self: end; margin-block-start: var(--space-8); }
.palyak-hero__figure { margin: 0; }
.palyak-hero__figure img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--border); border-radius: var(--radius-md); }
.palyak-hero__floating { position: absolute; z-index: 1; inset-inline-start: -3rem; inset-block-end: 2.5rem; inline-size: min(17.5rem, 78%); padding: var(--space-6); }
.palyak-hero__floating > :last-child { margin-block-end: 0; }
.palyak-process { background: var(--color-pale-stone); }
.palyak-process__intro { max-inline-size: 45rem; }
.palyak-process__rail { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); margin-block-start: var(--space-12); }
.palyak-process__rail::before { position: absolute; inset-block: 1.5rem 1.5rem; inset-inline-start: 1rem; inline-size: 1px; background: var(--color-line-stone); content: ""; }
.palyak-process__step { display: grid; grid-template-columns: 2rem minmax(8.75rem, 2fr) minmax(0, 5fr); grid-column: 1 / span 8; align-items: center; gap: var(--space-4); min-inline-size: 0; cursor: pointer; outline: none; }
.palyak-process__step:nth-child(even) { grid-column: 5 / span 8; }
.palyak-process__marker { z-index: 1; grid-column: 1; min-inline-size: 0; }
.palyak-process__diagram { grid-column: 2; min-inline-size: 0; inline-size: 100%; }
.palyak-process__diagram svg { inline-size: 100%; max-inline-size: 10.5rem; margin-inline: auto; overflow: visible; }
.palyak-process__diagram path:not(.palyak-arrow):not(.palyak-empty) { fill: var(--color-lavender-mist); stroke: var(--color-charcoal); stroke-width: 1; }
.palyak-process__diagram path:nth-child(2) { fill: var(--color-pale-stone); }
.palyak-process__diagram path:nth-child(3) { fill: var(--color-soft-mint); }
.palyak-arrow { fill: none; stroke: var(--color-lavender-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition-fast); transform-origin: center; }
.palyak-arrow--mint { stroke: var(--color-mint-deep); }
.palyak-empty { fill: transparent; stroke: var(--color-line-stone); stroke-dasharray: 4 4; }
.palyak-process__content { grid-column: 3; min-inline-size: 0; }
.palyak-process__content > :last-child { margin-block-end: 0; }
.palyak-process__content p:not(.eyebrow):not(.caption) { max-inline-size: 32rem; }
.palyak-process__step.is-active .card { border-color: var(--color-lavender-deep); }
.palyak-process__step.is-active .palyak-arrow { transform: translateX(4px); }
.palyak-process__step:focus-visible { outline: 2px solid var(--color-lavender-deep); outline-offset: 3px; border-radius: var(--radius-md); }
.palyak-bento__intro { max-inline-size: 45rem; }
.palyak-bento__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; gap: var(--space-6); margin-block-start: var(--space-12); }
.palyak-bento__dominant { display: flex; grid-column: 1 / span 6; grid-row: 1 / span 2; flex-direction: column; gap: var(--space-6); min-inline-size: 0; border: var(--border); border-radius: var(--radius-md); background: var(--color-pale-stone); padding: var(--space-6); transition: border-color var(--transition-fast), transform var(--transition-fast); }
.palyak-bento__dominant-copy { max-inline-size: 31.875rem; }
.palyak-bento__dominant figure { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-3); min-inline-size: 0; margin: 0; }
.palyak-bento__dominant img { inline-size: 100%; margin-block-start: auto; aspect-ratio: 3 / 2; object-fit: cover; border: var(--border); border-radius: var(--radius-sm); }
.palyak-bento__tile { display: flex; min-inline-size: 0; flex-direction: column; gap: var(--space-3); border: var(--border); border-radius: var(--radius-md); padding: var(--space-6); transition: border-color var(--transition-fast), transform var(--transition-fast); }
.palyak-bento__tile > * { margin: 0; }
.palyak-bento__tile--lavender { grid-column: 8 / span 4; grid-row: 1; background: var(--color-lavender-mist); }
.palyak-bento__tile--mint { grid-column: 7 / span 3; grid-row: 2; background: var(--color-soft-mint); }
.palyak-bento__tile--quote { grid-column: 10 / span 3; grid-row: 2; background: var(--color-surface); }
.palyak-bento__dominant:hover, .palyak-bento__tile:hover { border-color: var(--color-lavender-deep); transform: translateY(-2px); }
.palyak-layer-diagram, .palyak-clear-diagram { position: relative; display: flex; align-items: end; gap: var(--space-2); min-block-size: 4rem; margin-block-start: auto; }
.palyak-layer-diagram span { display: block; inline-size: 2.5rem; background: var(--color-charcoal); border: 1px solid var(--color-charcoal); transform: skewY(-28deg); }
.palyak-layer-diagram span:nth-child(1) { block-size: 2rem; background: var(--color-pale-stone); }
.palyak-layer-diagram span:nth-child(2) { block-size: 3rem; background: var(--color-soft-mint); }
.palyak-layer-diagram span:nth-child(3) { block-size: 2.5rem; background: var(--color-warm-white); }
.palyak-clear-diagram span { display: block; inline-size: 3rem; block-size: 3rem; border: 1px solid var(--color-charcoal); background: var(--color-warm-white); transform: skewY(-28deg); }
.palyak-clear-diagram i { display: block; inline-size: 4rem; block-size: 2px; margin-block-end: 1rem; background: var(--color-mint-deep); }
.palyak-routine__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(13.75rem, 3fr) minmax(0, 4fr); gap: var(--space-6); align-items: start; }
.palyak-routine__intro { grid-column: 1; max-inline-size: 37.5rem; min-inline-size: 0; }
.palyak-routine__image { grid-column: 2; min-inline-size: 0; margin: 0; }
.palyak-routine__image img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; border: var(--border); border-radius: var(--radius-md); }
.palyak-routine__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-block-start: var(--space-12); }
.palyak-routine__card { display: flex; min-inline-size: 0; flex-direction: column; gap: var(--space-3); }
.palyak-routine__card > * { margin: 0; }
.palyak-routine__card .caption { margin-block-start: auto; }
.palyak-mini-diagram { display: flex; align-items: center; min-block-size: 7.5rem; gap: var(--space-4); }
.palyak-mini-diagram__block, .palyak-mini-diagram--pair span, .palyak-mini-diagram--space span { display: block; inline-size: 4.5rem; block-size: 3.75rem; border: 1px solid var(--color-charcoal); background: var(--color-lavender-mist); box-shadow: 8px 7px 0 var(--color-pale-stone); }
.palyak-mini-diagram b { color: var(--color-lavender-deep); font-size: var(--font-size-30); }
.palyak-mini-diagram--pair { gap: var(--space-2); }
.palyak-mini-diagram--pair span:nth-child(2) { background: var(--color-soft-mint); transform: translateY(1rem); }
.palyak-mini-diagram--space i { display: block; inline-size: 4rem; block-size: 3.75rem; border: 1px dashed var(--color-line-stone); }
.palyak-mobile__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-12); align-items: start; }
.palyak-mobile__intro { grid-column: 1; max-inline-size: 32.5rem; min-inline-size: 0; }
.palyak-mobile__comparison { display: grid; grid-column: 2; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-inline-size: 0; margin-block-start: var(--space-8); }
.palyak-mobile__card { min-inline-size: 0; }
.palyak-mobile__card--strength { background: var(--color-soft-mint); }
.palyak-mobile__card--limits { background: var(--color-lavender-mist); margin-inline-start: var(--space-8); }
.palyak-mobile__card li { margin-block-end: var(--space-3); }
.palyak-label { display: inline-block; border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); color: var(--color-charcoal); }
.palyak-label--mint { background: rgb(255 255 255 / 45%); }
.palyak-label--lavender { background: rgb(255 255 255 / 45%); }
.palyak-tempo__intro { max-inline-size: 42.5rem; }
.palyak-tempo__panel { display: flex; inline-size: min(100%, 48rem); flex-direction: column; gap: var(--space-6); margin-block-start: var(--space-12); margin-inline-start: auto; }
.palyak-tempo__fieldset { display: flex; min-inline-size: 0; flex-direction: column; gap: var(--space-3); margin: 0; }
.palyak-tempo__helper { margin: 0; color: var(--color-slate); font-size: var(--font-size-14); }
.palyak-check { display: flex; align-items: center; gap: var(--space-3); min-block-size: 3rem; border: var(--border); border-radius: var(--radius-sm); background: var(--color-surface); padding: var(--space-3) var(--space-4); cursor: pointer; }
.palyak-check input { inline-size: 1.25rem; block-size: 1.25rem; flex: 0 0 auto; margin: 0; accent-color: var(--color-lavender-deep); }
.palyak-check span { min-inline-size: 0; }
.palyak-tempo__result { max-inline-size: 31.25rem; margin: 0; border-inline-start: 3px solid var(--color-mint-deep); padding-inline-start: var(--space-4); color: var(--color-slate); }
.palyak-tempo__cta { display: flex; inline-size: min(100%, 31.25rem); flex-direction: column; gap: var(--space-4); }
.palyak-tempo__cta > * { margin: 0; }
.palyak-tempo__cta .google-play-badge { align-self: flex-start; }
.palyak-stuck__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: var(--space-12); align-items: start; }
.palyak-stuck__content { grid-column: 1; max-inline-size: 42.5rem; min-inline-size: 0; }
.palyak-stuck__lead { max-inline-size: 35rem; }
.palyak-stuck__content details { max-inline-size: 38.75rem; }
.palyak-details__body { max-inline-size: 38.75rem; }
.palyak-details__body .status-marker { vertical-align: middle; margin-inline-end: var(--space-2); }
.palyak-stuck__blocks { position: relative; grid-column: 2; min-block-size: 19rem; margin-block-start: var(--space-16); }
.palyak-stuck__blocks span { position: absolute; display: block; inline-size: 7rem; block-size: 5rem; border: 1px solid var(--color-charcoal); box-shadow: 11px 10px 0 var(--color-pale-stone); }
.palyak-stuck__blocks span:nth-child(1) { inset: 1rem auto auto 1rem; background: var(--color-lavender-mist); }
.palyak-stuck__blocks span:nth-child(2) { inset: 6rem auto auto 7rem; background: var(--color-soft-mint); }
.palyak-stuck__blocks span:nth-child(3) { inset: 12rem auto auto 2rem; background: var(--color-warm-white); }
.palyak-verdict__panel { max-inline-size: 49.375rem; margin-inline: auto; }
.palyak-verdict__panel p { max-inline-size: 42.5rem; }
.palyak-verdict__cards { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--space-6); margin-block-start: var(--space-8); }
.palyak-verdict__cards > * { min-inline-size: 0; }
.palyak-verdict__card--raised { transform: translateY(-1.5rem); }
.palyak-related__intro { max-inline-size: 38.75rem; }
.palyak-related__cards { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--space-6); margin-block-start: var(--space-8); }
.palyak-related__card { display: flex; min-inline-size: 0; flex-direction: column; gap: var(--space-3); color: var(--color-charcoal); text-decoration: none; transition: border-color var(--transition-fast), transform var(--transition-fast); }
.palyak-related__card > * { margin: 0; }
.palyak-related__card span { margin-block-start: auto; color: var(--color-lavender-deep); font-weight: 700; text-decoration: underline; text-underline-offset: .16em; }
.palyak-related__card:hover { border-color: var(--color-lavender-deep); transform: translateY(-2px); color: var(--color-charcoal); }
.palyak-related__card:focus-visible { outline: 2px solid var(--color-lavender-deep); outline-offset: 3px; }
.palyak-related__card--offset { transform: translateY(1.5rem); }
.palyak-related__card--offset:hover { transform: translateY(calc(1.5rem - 2px)); }
.palyak-final { padding-block-start: var(--space-16); }
.palyak-final__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-12); align-items: center; }
.palyak-final__panel { grid-column: 1; max-inline-size: 43.75rem; }
.palyak-final__panel p { max-inline-size: 31.25rem; }
.palyak-final__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.palyak-final__geometry { position: relative; grid-column: 2; min-block-size: 13.75rem; }
.palyak-final__geometry span { position: absolute; display: block; inline-size: 5.5rem; block-size: 4rem; border: 1px solid var(--color-charcoal); box-shadow: 8px 7px 0 var(--color-pale-stone); transform: skewY(-20deg); }
.palyak-final__geometry span:nth-child(1) { inset: 1rem auto auto 1rem; background: var(--color-lavender-mist); }
.palyak-final__geometry span:nth-child(2) { inset: 4.5rem auto auto 8rem; background: var(--color-soft-mint); }
.palyak-final__geometry span:nth-child(3) { inset: 9rem auto auto 3rem; background: var(--color-warm-white); }
@media (max-width: 1100px) {
.palyak-process__step, .palyak-process__step:nth-child(even) { grid-column: 1 / span 10; }
.palyak-process__step:nth-child(even) { margin-inline-start: auto; }
}
@media (max-width: 1040px) {
.palyak-bento__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.palyak-bento__dominant { grid-column: 1 / span 6; grid-row: 1; }
.palyak-bento__tile--lavender { grid-column: 1 / span 4; grid-row: 2; }
.palyak-bento__tile--mint { grid-column: 1 / span 3; grid-row: 3; }
.palyak-bento__tile--quote { grid-column: 4 / span 3; grid-row: 3; }
}
@media (max-width: 1000px) {
.palyak-routine__top { grid-template-columns: minmax(0, 4fr) minmax(0, 2fr); }
.palyak-routine__image { grid-column: 2; }
.palyak-mobile__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.palyak-mobile__intro, .palyak-mobile__comparison { grid-column: auto; }
.palyak-stuck__grid { grid-template-columns: minmax(0, 8fr); }
.palyak-stuck__blocks { grid-column: 1; max-inline-size: 17.5rem; min-block-size: 13rem; margin-block-start: 0; }
}
@media (max-width: 980px) {
.palyak-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.palyak-hero__visual { margin-block-start: var(--space-12); }
.palyak-verdict__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.palyak-verdict__cards > :nth-child(3) { grid-column: 1 / span 2; }
.palyak-verdict__card--raised { transform: none; }
.palyak-related__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.palyak-related__cards > :nth-child(3) { grid-column: 1 / span 2; }
.palyak-related__card--offset { transform: none; }
.palyak-related__card--offset:hover { transform: translateY(-2px); }
.palyak-final__grid { grid-template-columns: minmax(0, 6fr); }
.palyak-final__geometry { grid-column: 1; grid-row: 1; max-inline-size: 15rem; min-block-size: 9rem; }
.palyak-final__panel { grid-column: 1; grid-row: 2; }
}
@media (max-width: 900px) {
.palyak-hero__grid, .palyak-mobile__grid { grid-template-columns: minmax(0, 1fr); }
.palyak-hero__copy, .palyak-hero__visual, .palyak-mobile__intro, .palyak-mobile__comparison { grid-column: 1; }
.palyak-hero__visual { inline-size: 100%; max-inline-size: 32.5rem; justify-self: start; margin-block-start: var(--space-4); }
.palyak-hero__floating { position: static; inline-size: 100%; margin-block-start: var(--space-4); }
.palyak-process__rail { grid-template-columns: minmax(0, 1fr); }
.palyak-process__rail::before { inset-inline-start: 1rem; }
.palyak-process__step, .palyak-process__step:nth-child(even) { grid-column: 1; grid-template-columns: 2rem minmax(0, 1fr); margin-inline-start: 0; align-items: start; }
.palyak-process__diagram { grid-column: 2; max-inline-size: 15.625rem; }
.palyak-process__content { grid-column: 2; }
.palyak-routine__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.palyak-routine__cards > :nth-child(3) { grid-column: 1 / span 2; }
.palyak-mobile__comparison { max-inline-size: 35rem; margin-block-start: 0; }
.palyak-mobile__card--limits { margin-inline-start: 0; }
.palyak-tempo__panel { margin-inline: 0; }
}
@media (max-width: 599px) {
.palyak-hero { padding-block-end: var(--section-space); }
.palyak-hero__lead { max-inline-size: none; }
.palyak-hero__copy h1 { max-inline-size: 13ch; }
.palyak-hero__visual { max-inline-size: none; }
.palyak-process__rail { gap: var(--space-6); margin-block-start: var(--space-8); }
.palyak-process__step, .palyak-process__step:nth-child(even) { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); }
.palyak-process__content { padding: var(--space-4); }
.palyak-process__diagram svg { margin-inline: 0; }
.palyak-bento__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-block-start: var(--space-8); }
.palyak-bento__dominant, .palyak-bento__tile--lavender, .palyak-bento__tile--mint, .palyak-bento__tile--quote { grid-column: 1; grid-row: auto; }
.palyak-routine__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.palyak-routine__intro, .palyak-routine__image { grid-column: 1; }
.palyak-routine__image { max-inline-size: 20rem; }
.palyak-routine__cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-block-start: var(--space-8); }
.palyak-routine__cards > :nth-child(3) { grid-column: 1; }
.palyak-mobile__comparison { gap: var(--space-4); }
.palyak-tempo__panel { inline-size: 100%; margin-block-start: var(--space-8); }
.palyak-check { min-block-size: 3.5rem; }
.palyak-tempo__cta { inline-size: 100%; }
.palyak-stuck__blocks { display: none; }
.palyak-verdict__cards, .palyak-related__cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.palyak-verdict__cards > :nth-child(3), .palyak-related__cards > :nth-child(3) { grid-column: 1; }
.palyak-final { padding-block-start: var(--space-8); }
.palyak-final__geometry { display: none; }
.palyak-final__panel { grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
.palyak-process__step.is-active .palyak-arrow { transform: none; }
.palyak-bento__dominant:hover, .palyak-bento__tile:hover, .palyak-related__card:hover, .palyak-related__card--offset:hover { transform: none; }
}