/* The reference supplies the composition; existing RM tokens supply the palette. */
#before-you-go { --companion-sketch: var(--bronze, #9a805a); --companion-soft: var(--line, #d8cfc1); }
#before-you-go .fit-grid { gap: clamp(60px, 6vw, 90px); }
#before-you-go .fit-intro { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 32px; text-align: left; width: min(100%, 850px); max-width: none; margin-inline: auto; }
#before-you-go .fit-intro h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: .065em; }
#before-you-go .fit-intro > p { align-self: flex-end; max-width: 32em; margin: 0; padding: 0; font-size: 16px; }
#before-you-go .travel-disclosure { width: 100%; min-width: 0; }
#before-you-go .travel-disclosure > summary { min-height: 62px; padding-block: 13px; }
#before-you-go .travel-disclosure-body p { font-size: 16px; }
#before-you-go .travel-disclosure > summary { grid-template-columns: minmax(0,1fr) 24px; }
#before-you-go .fit-interview-step { max-width: 26em; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--companion-soft); }
#before-you-go .fit-interview-step h4 { margin: 0 0 6px; color: var(--companion-sketch); font: 500 14px/1.8 var(--sans); letter-spacing: .08em; }
#before-you-go .fit-interview-step p { margin: 0; color: #59646a; font-size: 16px; line-height: 1.9; }
#before-you-go .fit-principles { display: flex; flex-direction: column; gap: clamp(72px, 8vw, 116px); width: min(100%, 1060px); margin: 0; }
#before-you-go .fit-principle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; width: 100%; margin: 0; }
#before-you-go .fit-copy { display: block; }
#before-you-go .fit-principle:nth-child(even) .companion-art { grid-column: 1; grid-row: 1; }
#before-you-go .fit-principle:nth-child(even) .fit-copy { grid-column: 2; grid-row: 1; }
#before-you-go .fit-principle h3 { font-size: clamp(30px, 3.45vw, 48px); line-height: 1.6; letter-spacing: .065em; margin-bottom: 22px; }
#before-you-go .fit-line + .fit-line { margin-left: 1em; }
#before-you-go .fit-emphasis::after { left: 0; bottom: 0; width: 100%; background: var(--champagne); }
#before-you-go .fit-principle .fit-description { max-width: 26em; font-size: 16px; }
#before-you-go .companion-art { min-width: 0; margin: 0; }
#before-you-go .fit-drawing { display: block; width: 100%; max-width: 420px; height: auto; aspect-ratio: 320 / 210; margin: 0 auto; fill: none; stroke: none; }
#before-you-go .ln { fill: none; stroke: var(--companion-sketch); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
#before-you-go .ln.soft { stroke: var(--companion-soft); stroke-width: 1.1; }
#before-you-go .companion-pending .ln { stroke-dashoffset: 1; }
#before-you-go .companion-drawn .ln { animation: companion-draw 2.4s cubic-bezier(.45, 0, .2, 1) var(--d, 0s) both; }
#before-you-go .companion-steam { transform-box: fill-box; transform-origin: center bottom; }
#before-you-go .companion-drawn .companion-steam { animation: companion-drift 7s ease-in-out 4.2s 3; }
@keyframes companion-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
#before-you-go .invitation-flap { transform-origin: 160px 108px; }
#before-you-go .invitation-front { fill: #eeebe3; }
#before-you-go .companion-drawn .invitation-flap { animation: companion-draw .7s ease both, invitation-open .9s ease .7s both; }
#before-you-go .companion-drawn .invitation-card { animation: invitation-rise 1.1s ease 1.4s both; }
@keyframes invitation-open { from { transform: scaleY(-1); } to { transform: scaleY(1); } }
@keyframes invitation-rise { from { transform: translateY(43px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #before-you-go .companion-art .invitation-flap,
  #before-you-go .companion-art .invitation-card { animation: none !important; transform: none !important; opacity: 1 !important; }
}
@keyframes companion-drift { 50% { transform: translateY(-3px); opacity: .65; } }
/* Each text block enters independently of its artwork, especially on mobile. */
#before-you-go .companion-entered.fit-intro h2,
#before-you-go .companion-entered.fit-intro > p,
#before-you-go .companion-entered .fit-index,
#before-you-go .companion-entered .fit-line,
#before-you-go .companion-entered .fit-description { animation: companion-typeset .8s cubic-bezier(.22, .6, .3, 1) both; }
#before-you-go .companion-entered .fit-line { animation-delay: .08s; }
#before-you-go .companion-entered .fit-line + .fit-line { animation-delay: .2s; }
#before-you-go .companion-entered.fit-intro > p,
#before-you-go .companion-entered .fit-description { animation-delay: .3s; }
#before-you-go .companion-entered .fit-emphasis::after { animation: companion-underline 1.1s cubic-bezier(.22, .6, .3, 1) .4s both; }
@keyframes companion-typeset { from { opacity: .78; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes companion-underline { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
@media (max-width: 760px) {
  #before-you-go .fit-intro { gap: 24px; }
  #before-you-go .fit-intro > p { align-self: auto; margin-left: 1em; max-width: calc(100% - 1em); }
  #before-you-go .fit-principle { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #before-you-go .fit-principle .companion-art,
  #before-you-go .fit-principle:nth-child(even) .companion-art { grid-column: 1; grid-row: 1; }
  #before-you-go .fit-principle .fit-copy,
  #before-you-go .fit-principle:nth-child(even) .fit-copy { grid-column: 1; grid-row: 2; }
  #before-you-go .fit-drawing { max-width: 280px; margin-left: 0; margin-right: auto; }
  #before-you-go .fit-principle h3 { font-size: clamp(28px, 7.8vw, 32px); }
  #before-you-go .fit-principle .fit-index { letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  #before-you-go .companion-art .ln,
  #before-you-go .companion-art .companion-steam,
  #before-you-go .companion-entered > *,
  #before-you-go .companion-entered .fit-line,
  #before-you-go .companion-entered .fit-emphasis::after { animation: none !important; transform: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
}