.j-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 50px; align-items: center; }
.j-head .lead { margin-top: 26px; }
@media (max-width: 1000px) { .j-grid { grid-template-columns: 1fr; } }

.pass { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); border-radius: 26px; overflow: hidden; background: #eeece6; color: #111; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.9); transform: rotate(-1.5deg); transition: transform 1s var(--ease); }
.pass:hover { transform: rotate(0deg); }
.pass-main { padding: 26px 28px; }
.pass-top { display: flex; justify-content: space-between; align-items: center; }
.pass-top img { width: 80px; height: auto; filter: invert(1) contrast(1.2); }
.pass-top span { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #6b6a64; }
.route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin: 34px 0 30px; }
.route small { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #6b6a64; }
.route b { display: block; margin-top: 6px; font-family: var(--f-display); font-stretch: 62%; font-weight: 800; font-size: clamp(34px, 3.4vw, 46px); line-height: 0.9; text-transform: uppercase; }
.route i { height: 2px; background: repeating-linear-gradient(90deg, #111 0 6px, transparent 6px 12px); position: relative; }
.route i::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 9px solid var(--accent); }
.pass-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 18px; border-top: 1.5px dashed rgba(17, 17, 17, 0.25); }
.pass-meta dt { font: 400 11px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #6b6a64; }
.pass-meta dd { margin-top: 8px; display: flex; align-items: center; gap: 8px; font: 600 14.5px/1.2 var(--f-body); }
.pass-stub { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px; background: #111; color: var(--ink); }
.pass-stub::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: radial-gradient(circle, #eeece6 2px, transparent 2.5px) 0 0 / 2px 12px; }
.pass-stub small { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.addr { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 52px; padding: 0 6px 0 14px; border-radius: 14px; background: rgba(237, 237, 235, 0.06); box-shadow: inset 0 0 0 1px var(--hair-2); font-size: 13px; color: var(--ink); text-align: left; transition: background-color 0.4s var(--ease); }
.addr:hover { background: rgba(237, 237, 235, 0.1); }
.addr .cp { display: grid; place-items: center; height: 40px; padding: 0 12px; border-radius: 10px; background: rgba(237, 237, 235, 0.08); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.addr.ok .cp { background: var(--moss); color: #10140a; }
.pass-stub .btn { justify-content: space-between; }
.barcode { margin-top: auto; height: 46px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px, var(--ink) 9px 12px, transparent 12px 14px); opacity: 0.85; }
@media (max-width: 640px) { .pass { grid-template-columns: 1fr; transform: none; } .pass-stub::before { display: none; } }

.steps-sec { padding-top: clamp(30px, 5vw, 60px); }
.steps { display: grid; border-top: 1px solid var(--hair); }
.step { display: grid; grid-template-columns: 120px 1fr auto; gap: 30px; align-items: start; padding: clamp(36px, 5vw, 60px) 0; border-bottom: 1px solid var(--hair); }
.step .n { font-family: var(--f-display); font-stretch: 62%; font-weight: 800; font-size: clamp(64px, 7vw, 100px); line-height: 0.8; color: var(--accent); }
.step h2 { font: 600 clamp(24px, 2.4vw, 32px)/1.15 var(--f-body); }
.step p { margin-top: 12px; max-width: 58ch; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.step p b { color: var(--ink); font-weight: 600; }
.step .links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tick { position: relative; cursor: pointer; }
.tick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tick i { display: block; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-4); transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.tick input:checked + i { background: var(--moss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.3 2.6 2.6 5.4-5.6' fill='none' stroke='%2310140a' stroke-width='2'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: none; }
.tick input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 700px) { .step { grid-template-columns: 1fr auto; } .step .n { grid-column: 1 / -1; font-size: 56px; } }

.next-up { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(60px, 8vw, 100px); }
.next-up .core { padding: 26px 26px 28px; transition: background-color 0.5s var(--ease); }
.next-up a:hover .core { background: var(--bg-3); }
.next-up small { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.next-up b { display: block; margin-top: 12px; font: 600 19px/1.25 var(--f-body); }
@media (max-width: 760px) { .next-up { grid-template-columns: 1fr; } }