/* Office-guide layout only. Match the Blog/Guides hub's 900px content column. */
.office-guide .office-shell { width: min(900px, calc(100% - 40px)); }
.office-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 28px 0 40px; }
.office-hero h1 { margin: 14px 0 20px; font-size: clamp(38px, 4.5vw, 52px); line-height: 1.12; letter-spacing: -.035em; }
.office-hero p { margin: 0; font-size: 18px; line-height: 1.75; color: var(--muted); }
.office-hero-art { margin: 0; }
.office-hero-art img { width: 100%; height: auto; }
.office-section { margin-top: 48px; }
.office-article > .office-section:first-child { margin-top: 12px; }
.office-section-heading { max-width: 740px; margin-bottom: 24px; }
.office-section-label { color: var(--teal); font-size: 12px; font-weight: 600; }
.office-section h2 { margin: 12px 0 14px; font-size: clamp(26px, 3vw, 32px); line-height: 1.25; letter-spacing: -.025em; }
.office-section-heading p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.office-game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px; list-style: none; padding: 0; margin: 0; }
.office-game { transition: border-color 180ms ease; min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: rgba(18, 24, 39, .65); }
.office-game-link { position: relative; display: block; height: 100%; padding: 20px; border-radius: inherit; transition: background-color 180ms ease; }
.office-game-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.office-card-arrow { position: absolute; top: 24px; right: 22px; color: var(--faint); transition: transform 180ms ease, color 180ms ease; }
@media (hover: hover) {
  .office-game:hover { border-color: var(--teal); }
  .office-game-link:hover { background: rgba(255, 255, 255, .035); }
  .office-game-link:hover .office-card-arrow { color: var(--teal); transform: translateX(3px); }
}
.office-game-link:focus-visible .office-card-arrow { color: var(--teal); }
.office-game-icon { color: var(--teal); display: flex; margin-bottom: 12px; }
.office-game-icon svg { width: 28px; height: 28px; }
.office-game h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: -.02em; }
.office-game p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.office-game-open { grid-column: 1 / -1; border-style: dashed; border-color: rgba(0, 212, 193, .45); background: rgba(0, 212, 193, .035); }
.office-article a { text-underline-offset: 4px; }
.office-steps a { color: var(--teal); text-decoration: underline; }
.office-setup { max-width: 760px; }
.office-steps { list-style: none; margin: 0; padding: 0; }
.office-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; position: relative; padding-bottom: 26px; }
.office-steps li:last-child { padding-bottom: 0; }
.office-steps li:not(:last-child)::before { content: ''; position: absolute; top: 40px; bottom: 8px; left: 15px; width: 1px; background: var(--border); }
.office-step-number { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--teal); font-size: 13px; }
.office-steps h3 { margin: 2px 0 8px; font-size: 18px; font-weight: 600; line-height: 1.4; }
.office-steps p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.office-guide .faq { max-width: 820px; margin-top: 52px; }
.office-guide .faq h2 { font-size: 28px; }
.office-guide .faq summary { font-size: 15px; font-weight: 500; }
.office-guide .faq-answer { font-size: 15px; }
.office-guide .detail-cta { max-width: none; margin-top: 40px; padding: 24px; }
.office-guide .detail-cta h2 { font-size: 26px; }
.office-guide .detail-cta p { font-size: 14px; margin-top: 10px; }
.office-guide .detail-cta .hero-actions { margin-top: 16px; }
.office-guide .detail-cta .app-store-badge, .office-guide .detail-cta .play-store-badge { min-height: 44px; }
.office-guide .detail-cta .app-store-badge img, .office-guide .detail-cta .play-store-badge img { height: 44px; }
@media (max-width: 960px) {
  .office-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .office-guide .office-shell { width: calc(100% - 28px); }
  .office-hero { grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; padding: 20px 0 32px; }
  .office-hero h1 { font-size: 34px; }
  .office-hero > div { display: contents; }
  .office-hero .eyebrow { grid-column: 1 / -1; }
  .office-hero h1 { grid-column: 1; margin: 0; }
  .office-hero-art { grid-column: 2; grid-row: 2; }
  .office-hero p, .office-hero .guide-read-link { grid-column: 1 / -1; }
  .office-hero p { font-size: 16px; margin-top: 8px; }
  .office-hero .guide-read-link { margin-top: 10px; }
  .office-section, .office-guide .faq { margin-top: 40px; }
  .office-section-heading { margin-bottom: 20px; }
  .office-section h2 { font-size: 26px; }
  .office-game-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .office-game-link { display: grid; align-content: start; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
  .office-card-arrow { top: 22px; right: 16px; font-size: 12px; }
  .office-game-icon { grid-column: 1; grid-row: 1 / 3; margin: 0; }
  .office-game h3 { grid-column: 2; margin: 0 14px 6px 0; }
  .office-game p { grid-column: 2; }
  .office-guide .detail-cta { padding: 20px; }
}
@media (max-width: 380px) {
  .office-hero { grid-template-columns: minmax(0, 1fr) 105px; }
  .office-hero h1 { font-size: 32px; }
}

/* The final custom-activity choice is a compact full-width row. */
.office-game-open .office-game-link { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; }
.office-game-open .office-game-icon { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; }
.office-game-open h3, .office-game-open p { grid-column: 2; }

.office-article [id] { scroll-margin-top: 112px; }
@media (prefers-reduced-motion: reduce) {
  .office-game, .office-game-link, .office-card-arrow { transition: none; }
}