.jak-grac-page { overflow: clip; }
.jak-grac-page .section { position: relative; }
.jak-grac-page h2 { margin-bottom: var(--space-4); }
.jak-hero { position: relative; padding: clamp(3rem, 7vw, 6rem) 0; background: var(--color-night-navy); }
.jak-hero::before { position: absolute; inset: auto 5% 8% auto; width: 10px; height: 10px; background: var(--color-neon-lime); box-shadow: 42px -31px 0 var(--color-pixel-turquoise), -28px 45px 0 var(--color-lavender-purple); content: ""; }
.jak-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.jak-hero__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.jak-hero__copy > * { margin: 0; }
.jak-hero__copy h1 { max-width: 10ch; font-size: clamp(2.25rem, 6vw, 4rem); }
.jak-hero__lead { max-width: 56ch; font-size: var(--font-size-18); line-height: 1.5; }
.jak-hero__tip { max-width: 56ch; padding: var(--space-3) var(--space-4); border-inline-start: 4px solid var(--color-pixel-turquoise); background: var(--color-deep-navy); }
.jak-hero__action { margin-top: var(--space-2); }
.jak-hero__media { width: 100%; min-width: 0; margin: 0; border: var(--border-dark); border-radius: var(--radius-panel); overflow: hidden; box-shadow: var(--shadow-block); }
.jak-hero__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
.jak-core__intro { max-width: 62ch; }
.jak-core__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.jak-core__step { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: var(--border-light); border-radius: var(--radius-card); background: #fff; }
.jak-core__step > * { margin: 0; }
.jak-core__step p { max-width: 44ch; }
.jak-step-number { color: #526d00; font-family: var(--font-heading); font-size: var(--font-size-32); font-weight: 800; line-height: 1; }
.jak-step-number--coral { color: #a13a28; }
.jak-mini-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); width: 100%; max-width: 13rem; }
.jak-mini-route span { min-width: 0; height: 1.75rem; border: 1px solid #7bcfc5; background: #dffbf7; }
.jak-mini-route span:nth-child(2) { background: var(--color-neon-lime); }
.jak-core__warning { padding: var(--space-2) var(--space-3); border-inline-start: 4px solid var(--color-coral-orange); background: #fff0ec; }
.jak-core__more { margin-top: var(--space-5); }
.jak-road { background: var(--color-night-navy); }
.jak-road__heading { max-width: 58ch; }
.jak-road__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-6); }
.jak-road__media { width: 100%; min-width: 0; margin: 0; border: var(--border-dark); border-radius: var(--radius-card); overflow: hidden; }
.jak-road__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.jak-road__rules { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.jak-road__rule { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: var(--border-dark); }
.jak-road__rule > * { margin: 0; }
.jak-road__rule h3, .jak-road__rule p { max-width: 48ch; }
.jak-road__rule::before { width: 3rem; height: 3px; background: var(--color-pixel-turquoise); content: ""; }
.jak-road__rule--alert::before { background: var(--color-coral-orange); }
.jak-rails { background: var(--color-deep-navy); }
.jak-rails__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.jak-rails__copy { min-width: 0; }
.jak-rails__copy p { max-width: 64ch; }
.jak-rails__rule { max-width: 60ch; margin-top: var(--space-5); margin-bottom: 0; padding: var(--space-3) var(--space-4); border: var(--border-dark); border-inline-start: 4px solid var(--color-lavender-purple); background: var(--color-night-navy); font-weight: 700; }
.jak-rails__aside { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: var(--border-dark); border-radius: var(--radius-card); background: var(--color-ink-blue); }
.jak-rails__aside > * { margin: 0; }
.jak-rails__aside p { max-width: 28ch; }
.jak-river { background: var(--color-night-navy); }
.jak-river__heading { max-width: 58ch; }
.jak-river__scene { position: relative; margin-top: var(--space-6); }
.jak-river__media { width: 100%; min-width: 0; margin: 0; border: var(--border-dark); border-radius: var(--radius-panel); overflow: hidden; }
.jak-river__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
.jak-river__panel { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); padding: var(--space-5); border: var(--border-light); border-radius: var(--radius-card); background: var(--color-paper-light); color: var(--color-night-navy); }
.jak-river__panel article { min-width: 0; padding-bottom: var(--space-4); border-bottom: var(--border-light); }
.jak-river__panel article:last-child { padding-bottom: 0; border-bottom: 0; }
.jak-river__panel article > :last-child { margin-bottom: 0; }
.jak-river__panel p { max-width: 50ch; }
.jak-context { background: var(--color-deep-navy); }
.jak-context__intro { max-width: 60ch; }
.jak-context__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.jak-context__cards article { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: var(--border-dark); border-radius: var(--radius-card); }
.jak-context__cards article > * { margin: 0; }
.jak-context__worlds { background: #29265b; }
.jak-context__worlds p { max-width: 56ch; }
.jak-context__characters { background: var(--color-ink-blue); }
.jak-context__characters p { max-width: 38ch; }
.jak-context__note { display: flex; min-width: 0; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-4); border: var(--border-dark); background: var(--color-night-navy); }
.jak-context__note > span { flex: 0 0 1rem; width: 1rem; height: 1rem; margin-top: 0.3rem; background: var(--color-neon-lime); }
.jak-context__note p { max-width: 66ch; margin: 0; }
.jak-training__intro { max-width: 58ch; }
.jak-training__list { display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); max-width: 50rem; margin: var(--space-6) auto 0; padding: 0; list-style: none; }
.jak-training__list > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; padding-bottom: var(--space-5); border-bottom: var(--border-light); }
.jak-training__number { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; min-width: 0; height: 3.25rem; background: var(--color-neon-lime); color: var(--color-night-navy); font-family: var(--font-heading); font-weight: 800; }
.jak-training__number--turquoise { background: var(--color-pixel-turquoise); }
.jak-training__number--purple { background: var(--color-lavender-purple); }
.jak-training__number--coral { background: var(--color-coral-orange); }
.jak-training__list h3, .jak-training__list p { max-width: 56ch; }
.jak-training__list blockquote { max-width: 32ch; font-size: var(--font-size-18); font-weight: 700; }
.jak-access { background: var(--color-night-navy); }
.jak-access__intro { max-width: 60ch; }
.jak-access__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.jak-access__card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: var(--border-dark); border-radius: var(--radius-card); background: var(--color-ink-blue); }
.jak-access__card > * { margin: 0; }
.jak-access__card p { max-width: 42ch; }
.jak-faq { background: var(--color-deep-navy); }
.jak-faq__intro, .jak-faq__items { max-width: 47.5rem; margin-inline: auto; }
.jak-faq__intro { text-align: left; }
.jak-faq__items { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.jak-faq__item { min-width: 0; border: var(--border-dark); border-radius: var(--radius-control); background: var(--color-ink-blue); }
.jak-faq__item[open] { border-color: var(--color-neon-lime); }
.jak-faq__item summary { display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; gap: var(--space-3); align-items: center; min-width: 0; min-height: 3.5rem; padding: var(--space-4); color: var(--color-paper-light); font-family: var(--font-heading); font-weight: 800; line-height: 1.3; list-style: none; }
.jak-faq__item summary::-webkit-details-marker { display: none; }
.jak-faq__state { position: relative; width: 1.25rem; height: 1.25rem; border: 1px solid var(--color-pixel-turquoise); }
.jak-faq__state::before, .jak-faq__state::after { position: absolute; top: 50%; left: 50%; width: 0.65rem; height: 2px; background: var(--color-pixel-turquoise); content: ""; transform: translate(-50%, -50%); }
.jak-faq__state::after { transform: translate(-50%, -50%) rotate(90deg); }
.jak-faq__item[open] .jak-faq__state { border-color: var(--color-neon-lime); }
.jak-faq__item[open] .jak-faq__state::before, .jak-faq__item[open] .jak-faq__state::after { background: var(--color-neon-lime); }
.jak-faq__item[open] .jak-faq__state::after { transform: translate(-50%, -50%); }
.jak-faq__answer { padding: 0 var(--space-4) var(--space-4); }
.jak-faq__answer p { max-width: 64ch; margin: 0; }
.jak-next { background: var(--color-night-navy); }
.jak-next__intro { max-width: 58ch; }
.jak-next__links { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.jak-next__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); min-width: 0; min-height: 8rem; padding: var(--space-5); border: var(--border-dark); border-radius: var(--radius-card); background: var(--color-ink-blue); color: var(--color-paper-light); text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); }
.jak-next__link span { grid-column: 1; color: var(--color-neon-lime); font-family: var(--font-heading); font-size: var(--font-size-12); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.jak-next__link strong { grid-column: 1; max-width: 34ch; }
.jak-next__link b { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--color-neon-lime); font-size: var(--font-size-32); }
.jak-next__link--purple span, .jak-next__link--purple b { color: var(--color-lavender-purple); }
.jak-next__link--turquoise span, .jak-next__link--turquoise b { color: var(--color-pixel-turquoise); }
.jak-next__link:hover { border-color: var(--color-neon-lime); color: var(--color-paper-light); box-shadow: var(--shadow-block); transform: translateY(-2px); }
.jak-next__link:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
@media (min-width: 48rem) {
.jak-core__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jak-core__steps > :nth-child(3) { grid-column: 1 / -1; }
.jak-access__cards, .jak-next__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jak-access__cards > :nth-child(3), .jak-next__links > :nth-child(3) { grid-column: 1 / -1; }
.jak-training__list > li { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-5); }
}
@media (min-width: 56.25rem) {
.jak-river__panel { position: absolute; top: var(--space-5); left: var(--space-5); width: min(50%, 35rem); margin-top: 0; }
}
@media (min-width: 60rem) {
.jak-road__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: calc(var(--space-6) + var(--space-5)); }
.jak-rails__layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-6); }
.jak-context__cards { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
@media (min-width: 64rem) {
.jak-hero { min-height: 33.75rem; }
.jak-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: calc(var(--space-6) + var(--space-5)); }
}
@media (min-width: 68rem) {
.jak-core__steps, .jak-access__cards, .jak-next__links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jak-core__steps > :nth-child(3), .jak-access__cards > :nth-child(3), .jak-next__links > :nth-child(3) { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
.jak-next__link:hover { box-shadow: none; transform: none; }
}