#hireGuide.activity-guide {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(.75rem, 2.5vh, 1.6rem) 3vw;
  padding-bottom: max(.75rem, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at top right, #135874, #082e41 75%);
  color: #f7fbff;
  overflow: auto;
}

#guides { width: 100%; max-width: 73rem; margin: 0 auto; }
#guides:has(#activity-buttons:not([hidden])) { max-width: 90rem; }
#guides[hidden], #nativeHireGuide[hidden], #guides [hidden] { display: none !important; }
#guides h1 { margin: .16em 0 .38em; font-size: clamp(1.9rem, 4.7vh, 3.3rem); line-height: 1.06; }
#guides .guide-kicker { margin: 0; color: #ffa746; font-size: .82rem; font-weight: 800; letter-spacing: .14em; }
#guides button {
  min-height: 44px;
  padding: .43rem .72rem;
  border: 1px solid #547b9d;
  border-radius: .6rem;
  background: #17475b;
  color: #fff;
  font: 750 1rem/1.18 system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
#guides button:focus-visible { outline: 3px solid #f9db70; outline-offset: 2px; }
#guides #activity-buttons, #guides .guide-cards { display: grid; gap: clamp(.55rem, 1.3vw, .95rem); }
#guides #activity-buttons { grid-template-columns: repeat(12, minmax(0, 1fr)); }
#guides .guide-tile { grid-column: span 4; min-width: 0; }
#guides .guide-tile:nth-child(n+4) { grid-column: span 3; }
#guides #activity-buttons[data-count="1"] .guide-tile { grid-column: span 12; }
#guides #activity-buttons[data-count="2"] .guide-tile,
#guides #activity-buttons[data-count="5"] .guide-tile:nth-child(n+4) { grid-column: span 6; }
#guides #activity-buttons[data-count="4"] .guide-tile { grid-column: span 3; }
#guides #activity-buttons[data-count="6"] .guide-tile { grid-column: span 4; }
#guides .guide-tile, #guides .guide-card {
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid #547b9d;
  border-radius: 1rem;
  background: #123c60;
}
#guides .guide-tile img, #guides .guide-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
#guides .guide-tile span { display: block; padding: .72rem .38rem; font-size: clamp(1rem, 2.1vw, 1.32rem); }
#guides .guide-tile:active { background: #245679; }
#guides .guide-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
#guides .guide-card > div { padding: .58rem .7rem .72rem; }
#guides .guide-card h3 { margin: 0 0 .32rem; font-size: clamp(1rem, 1.8vw, 1.3rem); }
#guides .guide-card p { margin: 0; font-size: clamp(.95rem, 1.55vw, 1.1rem); line-height: 1.33; }
#guides .guide-card .guide-step { margin: 0 0 .28rem; color: #ffb86e; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
#guides .guide-requirement { display: inline-block; margin-bottom: .42rem; padding: .24rem .48rem; color: #281807; background: #ffbf73; border-radius: .3rem; font-size: .8rem; line-height: 1.2; text-transform: uppercase; }
#guides .guide-pages, #guides .guide-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
#guides .guide-pages button { background: #102f4c; }
#guides .guide-pages [aria-current="step"] { background: #234c70; border-color: #ffad55; color: #fff2dc; }
#guides .guide-actions { margin-top: .65rem; }
#guides .guide-actions #guide-start { margin-left: auto; }
#guides .guide-actions :is(#guide-next, #guide-start.primary), #guides .guide-timeout button { background: #a74300; border-color: #ffb263; }
#guides .guide-page-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin: .62rem 0 .5rem; }
#guides .guide-page-title h2, #guides .guide-page-title p { margin: 0; }
#guides .guide-page-title h2 { font-size: clamp(1.15rem, 2.8vh, 1.6rem); }
#guides .guide-page-title p { color: #c7e2fb; font-size: .95rem; }
#guides .guide-timeout {
  position: fixed;
  inset: 0;
  width: min(29rem, calc(100% - 2rem));
  margin: auto;
  padding: clamp(1.3rem, 4vw, 2rem);
  text-align: center;
  color: #f7fbff;
  background: #102b45;
  border: 1px solid #ffad55;
  border-radius: 1rem;
  box-shadow: 0 .6rem 2.5rem #0007;
}
#guides .guide-timeout::backdrop { background: #061824b5; }
#guides .guide-timeout h2 { margin: 0 0 .5rem; font-size: clamp(1.45rem, 3vw, 1.9rem); }
#guides .guide-timeout p { margin: 0 0 1.15rem; line-height: 1.4; }
#guides .guide-timeout button { min-width: 11rem; }

@media (max-width: 699px) {
  #guides #activity-buttons .guide-tile:nth-child(n) { grid-column: span 6; }
  #guides #activity-buttons[data-count="1"] .guide-tile { grid-column: span 12; }
}

@media (min-width: 700px) and (min-height: 560px) {
  #hireGuide.activity-guide { overflow: hidden; }
  #guides { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
  #guides #instructions { align-self: start; min-width: 0; }
  #guides #activity-buttons { grid-template-rows: repeat(2, minmax(0, 1fr)); min-height: 0; }
  #guides #activity-buttons:is([data-count="1"], [data-count="2"], [data-count="3"], [data-count="4"]) { grid-template-rows: minmax(0, 1fr); }
  #guides .guide-tile { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  #guides .guide-tile img { height: 100%; min-height: 0; aspect-ratio: auto; }
  #guides .guide-card img { height: clamp(88px, 18vh, 190px); height: clamp(88px, 18dvh, 190px); }
}

@media (min-width: 700px) and (min-height: 560px) and (orientation: landscape) {
  #guides .guide-cards[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #guides .guide-cards[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #guides .guide-cards[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 700px) and (min-height: 560px) and (orientation: portrait) {
  #guides #activity-buttons[data-count="4"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  #guides #activity-buttons[data-count="7"] { grid-template-rows: repeat(3, minmax(0, 1fr)); }
  #guides #activity-buttons[data-count="4"] .guide-tile,
  #guides #activity-buttons[data-count="7"] .guide-tile:nth-child(n+4) { grid-column: span 6; }
  #guides .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #guides .guide-card img { height: clamp(76px, 12vh, 140px); height: clamp(76px, 12dvh, 140px); }
}
@media (min-width: 700px) and (min-height: 560px) and (max-height: 830px) and (orientation: portrait) {
  #guides .guide-card { display: grid; grid-template-columns: minmax(72px, 28%) minmax(0, 1fr); }
  #guides .guide-card img { height: 100%; aspect-ratio: auto; }
}
@media (min-width: 700px) and (min-height: 560px) and (max-height: 640px) and (orientation: landscape) {
  #guides h1 { font-size: 1.65rem; margin: .12em 0 .25em; }
  #guides .guide-page-title { margin: .42rem 0 .35rem; }
  #guides .guide-card img { height: 58px; }
  #guides .guide-card > div { padding: .42rem .52rem .5rem; }
  #guides .guide-card p { line-height: 1.25; }
}