/* Find Help and Community: the menu's items as paper notes pinned to a cork board.
   Tilts use the `rotate` property so the entrance animation (transform) never fights the hover lift. */
.p-door .door-main { padding-block: clamp(8px, 2vw, 24px) clamp(48px, 6vw, 88px); }
.p-door .door-board {
  position: relative;
  padding: clamp(26px, 4vw, 48px) clamp(16px, 3.4vw, 44px);
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 30%, rgba(120, 78, 30, .10) 0 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    radial-gradient(circle at 70% 60%, rgba(255, 244, 214, .35) 0 1px, transparent 1.5px) 0 0 / 11px 11px,
    #d9b77e;
  box-shadow: inset 0 0 0 10px #b98a4a, inset 0 0 0 12px #9c6f35, inset 0 8px 24px rgba(70, 40, 10, .28), 0 30px 50px -34px rgba(60, 40, 10, .6);
}
.p-door .door-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 38px) clamp(18px, 2.6vw, 32px); }
.p-door .door-grid > li { margin: 0; }
.p-door .door-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 26px 20px 22px; border-radius: 4px; text-decoration: none; color: var(--navy);
  background: #fffaf0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 18px 26px -18px rgba(60, 35, 5, .55);
  rotate: -1.4deg;
  transition: rotate .35s var(--ease), translate .35s var(--ease), box-shadow .35s var(--ease);
}
.p-door .door-grid > li:nth-child(3n+2) .door-card { rotate: 1.1deg; background: #fdf3d8; }
.p-door .door-grid > li:nth-child(3n) .door-card { rotate: -.5deg; background: #f3f6ee; }
.p-door .door-card:hover, .p-door .door-card:focus-visible { rotate: 0deg; translate: 0 -5px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 28px 34px -20px rgba(60, 35, 5, .6); color: var(--navy); }
.p-door .door-card:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.p-door .door-pin { position: absolute; top: -10px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--gold-deep) 34% 100%); box-shadow: 0 5px 6px -2px rgba(0, 0, 0, .35); }
.p-door .door-grid > li:nth-child(2n) .door-pin { background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--sage, #7d9a6b) 34% 100%); }
.p-door .door-art { display: block; margin: 0 0 8px; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .6); }
.p-door .door-art img { display: block; width: 100%; height: auto; aspect-ratio: 252 / 156; object-fit: contain; mix-blend-mode: multiply; }
.p-door .door-name { display: flex; align-items: center; gap: 8px; font: 600 clamp(19px, 1.7vw, 22px)/1.2 var(--f-display); }
.p-door .door-line { color: var(--muted); font-size: 16px; line-height: 1.45; font-weight: 500; }
.p-door .door-card .arrow { color: var(--gold-deep); transition: translate .25s var(--ease); }
.p-door .door-card:hover .arrow { translate: 4px 0; }
.p-door .door-card--urgent { background: var(--brick-soft) !important; }
.p-door .door-card--urgent .door-pin { background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--brick) 34% 100%); }
.p-door .door-card--urgent .arrow { color: var(--brick); }
@media (max-width: 900px) { .p-door .door-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) {
  .p-door .door-grid { grid-template-columns: 1fr; }
  .p-door .door-card { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; align-items: start; padding: 20px 16px 16px; }
  .p-door .door-art { grid-row: span 2; margin: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .p-door .door-card { animation: osv-door-pin .8s calc(.12s + var(--i, 0) * .08s) var(--ease) both; transform-origin: 50% -8px; }
  @keyframes osv-door-pin { 0% { transform: translateY(-14px) rotate(-3deg); opacity: 0; } 65% { transform: rotate(1deg); opacity: 1; } 100% { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .p-door .door-card { transition: none; } }