.dashboard-main { background: var(--color-canvas); }

.dashboard-hero {
  display: flex;
  min-height: 307px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 90px var(--content-inset) 56px;
}

.dashboard-hero__eyebrow {
  color: var(--color-warm-grey);
  font-size: var(--font-size-section-meta);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .18em;
}

.dashboard-hero__title {
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-2);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

.dashboard-hero__title em { color: var(--color-accent); font-weight: 300; }
.dashboard-hero__intro { color: var(--color-warm-grey); font-size: var(--font-size-body-lg); line-height: 1.7; }

.dashboard-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 0 var(--content-inset) 90px;
}

.dashboard-tile {
  display: flex;
  min-width: 0;
  min-height: 163px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 29px 28px 28px;
  border: 1px solid #dcd8d0;
  border-radius: 18px;
  background: var(--color-surface);
  text-align: left;
  cursor: default;
  transition: transform 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.dashboard-tile[href] { cursor: pointer; text-decoration: none; }

.dashboard-tile__icon {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  place-items: center;
  border-radius: 10px;
  background: #e8efea;
  transition: transform 160ms ease-out;
}

.dashboard-tile__copy { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.dashboard-tile__title { color: var(--color-ink); font-family: var(--font-heading); font-size: var(--font-size-heading-10); font-weight: 300; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.dashboard-tile__sub { color: var(--color-warm-grey); font-size: var(--font-size-supporting-text); line-height: normal; letter-spacing: -.01em; overflow-wrap: anywhere; }
.dashboard-tile__mobile { display: none; }
.dashboard-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .dashboard-tile:hover {
    transform: translateY(-2px);
    border-color: #c3cfc8;
    box-shadow: 0 8px 10px rgb(26 28 23 / 8%);
  }
  .dashboard-tile:hover .dashboard-tile__icon { transform: translateX(2px); }
}

.dashboard-tile:focus-visible { transform: translateY(-2px); border-color: #c3cfc8; box-shadow: 0 8px 10px rgb(26 28 23 / 8%); outline: 2px solid var(--color-accent); outline-offset: 3px; }
.dashboard-tile:focus-visible .dashboard-tile__icon { transform: translateX(2px); }
.dashboard-tile:active { transform: scale(.99); }

html.dashboard-motion-boot .dashboard-hero__eyebrow,
html.dashboard-motion-boot .dashboard-hero__title,
html.dashboard-motion-boot .dashboard-hero__intro,
html.dashboard-motion-boot .dashboard-tile { opacity: 0; visibility: hidden; }

@media (max-width: 1366px) {
  .dashboard-hero { padding-inline: 48px; }
  .dashboard-tiles { padding-inline: 48px; gap: 18px; }
  .dashboard-tile { padding-inline: 22px; }
}

@media (max-width: 900px) {
  .dashboard-hero { padding: 72px 36px 48px; }
  .dashboard-hero__title { font-size: var(--font-size-hero-tablet); }
  .dashboard-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 36px 72px; gap: 16px; }
}

@media (max-width: 480px) {
  .dashboard-hero { min-height: 160px; gap: 14px; padding: 56px 24px 36px; }
  .dashboard-hero__eyebrow { line-height: 1.2; }
  .dashboard-hero__title { font-size: var(--font-size-heading-compact); }
  .dashboard-hero__intro, .dashboard-tile__desktop { display: none; }
  .dashboard-tile__mobile { display: inline; }
  .dashboard-tiles { align-items: start; gap: 0 14px; padding: 0 24px 56px; }
  .dashboard-tile { min-height: 164px; padding: 29px 28px 29px; }
  .dashboard-tile--membership { min-height: 193px; }
  .dashboard-tile--membership .dashboard-tile__title { max-width: 100px; }
}

@media (max-width: 359px) {
  .dashboard-tile { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-tile, .dashboard-tile__icon { transition-duration: .01ms; }
  .dashboard-tile:focus-visible, .dashboard-tile:focus-visible .dashboard-tile__icon { transform: none; }
  html.dashboard-motion-boot .dashboard-hero__eyebrow,
  html.dashboard-motion-boot .dashboard-hero__title,
  html.dashboard-motion-boot .dashboard-hero__intro,
  html.dashboard-motion-boot .dashboard-tile { opacity: 1; visibility: visible; }
}

.dashboard-body {
  display: grid;
  grid-template-columns: minmax(0, 2.08fr) minmax(0, 1fr);
  gap: 64px;
  padding: 0 var(--content-inset) 120px;
}

.dashboard-body__main, .dashboard-body__side { min-width: 0; }
.dashboard-body__main { display: flex; flex-direction: column; gap: 72px; }
.dashboard-body__side { display: flex; flex-direction: column; gap: 48px; }
.dashboard-body__eyebrow { color: var(--color-warm-grey); font-size: var(--font-size-section-meta); font-weight: 500; line-height: 1.25; letter-spacing: .18em; }
.dashboard-body__heading { margin-top: 18px; color: var(--color-ink); font-family: var(--font-heading); font-size: var(--font-size-h6); font-weight: 300; line-height: 1.4; letter-spacing: -.01em; }
.dashboard-body__heading em { color: var(--color-accent); font-weight: 300; }

.dashboard-documents, .dashboard-events__list { margin-top: 28px; border-top: 1px solid #dcd8d0; list-style: none; }
.dashboard-document { border-bottom: 1px solid #dcd8d0; }
.dashboard-document__button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto 61px;
  align-items: center;
  column-gap: 18px;
  width: 100%;
  min-height: 67px;
  padding: 0 28px 0 3px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: default;
  transition: background-color 160ms ease-out, padding-inline-start 160ms ease-out, padding-inline-end 160ms ease-out;
}
.dashboard-document__icon { width: 18px; height: 18px; }
.dashboard-document__title { min-width: 0; margin-left: -3px; color: var(--color-ink); font-size: var(--font-size-body); font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; transition: margin-left 160ms ease-out; }
.dashboard-document__tag { padding: 5px 11px; border-radius: 6px; background: #efede7; color: var(--color-warm-grey); font-size: var(--font-size-caption); font-weight: 500; line-height: 1.2; }
.dashboard-document__age { min-width: 0; color: var(--color-warm-grey); font-size: var(--font-size-caption); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
.dashboard-document__button:focus-visible, .dashboard-membership__card:focus-visible, .dashboard-event__book:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.dashboard-document__button:focus-visible { padding-inline: 14px 42px; background: #f4f2ec; }
.dashboard-document__button:focus-visible .dashboard-document__title { margin-left: 0; }

.dashboard-event { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; gap: 24px; min-height: 90px; }
.dashboard-event:first-child { min-height: 89px; }
.dashboard-event + .dashboard-event { border-top: 1px solid #dcd8d0; }
.dashboard-event__date { color: var(--color-accent); font-size: var(--font-size-caption); font-weight: 500; line-height: 1.2; white-space: nowrap; }
.dashboard-event__title { min-width: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: var(--font-size-heading-8); font-weight: 300; line-height: 1.18; letter-spacing: -.01em; overflow-wrap: anywhere; }
.dashboard-event__book { color: var(--color-ink); cursor: default; transition: border-color var(--motion-cta-duration) var(--motion-ease-out), background-color var(--motion-cta-duration) var(--motion-ease-out), box-shadow var(--motion-cta-duration) var(--motion-ease-out); }
.dashboard-event__book:focus-visible { border-color: #a9c0b4; background: transparent; box-shadow: 0 6px 9px rgb(15 23 18 / 22%); }

.dashboard-membership__card {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  padding: 31px 31px 30px;
  border: 1px solid #dcd8d0;
  border-radius: 18px;
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
}
.dashboard-membership__eyebrow { margin-bottom: 18px; }
.dashboard-membership__top { display: flex; width: 100%; min-width: 0; align-items: flex-start; gap: 14px; }
.dashboard-membership__tier { min-width: 0; color: var(--color-ink); font-family: var(--font-heading); font-size: var(--font-size-heading-8); font-weight: 300; line-height: 1.18; letter-spacing: -.01em; overflow-wrap: anywhere; }
.dashboard-membership__active { display: inline-flex; flex: none; align-items: center; align-self: flex-start; gap: 7px; margin-top: 4.5px; padding: 6px 12px 6px 11px; border-radius: 999px; background: #e8efea; color: #2f5c48; font-size: var(--font-size-label-xs); font-weight: 500; line-height: 1.2; letter-spacing: .12em; }
.dashboard-membership__active img { width: 6px; height: 6px; }
.dashboard-membership__renewal { margin-top: 16px; color: var(--color-warm-grey); font-size: var(--font-size-inline-link); line-height: normal; letter-spacing: -.01em; }
.dashboard-membership__manage { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding-bottom: 3px; border-bottom: 1px solid #a6a6a1; color: var(--color-ink); font-size: var(--font-size-inline-link); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; transition: gap 220ms ease-out, border-color 220ms ease-out; }
.dashboard-membership__manage span { color: var(--color-accent); font-size: var(--font-size-caption); }
.dashboard-whats-new__card { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; padding: 32px; border-radius: 18px; background: #f2f0ea; }
.dashboard-whats-new__card span { display: block; height: 8px; border-radius: 4px; background: #e7e4dc; }
.dashboard-whats-new__card span:last-child { width: 82.14%; }

@media (hover: hover) and (pointer: fine) {
  .dashboard-document__button:hover { padding-inline: 14px 42px; background: #f4f2ec; }
  .dashboard-document__button:hover .dashboard-document__title { margin-left: 0; }
  .dashboard-event__book:hover { border-color: #a9c0b4; background: transparent; box-shadow: 0 6px 9px rgb(15 23 18 / 22%); color: var(--color-ink); }
  .dashboard-membership__card:hover .dashboard-membership__manage { gap: 11px; border-color: var(--color-accent); }
}

html.dashboard-body-motion-boot .dashboard-recent,
html.dashboard-body-motion-boot .dashboard-events,
html.dashboard-body-motion-boot .dashboard-membership,
html.dashboard-body-motion-boot .dashboard-whats-new { opacity: 0; visibility: hidden; }

@media (max-width: 1366px) { .dashboard-body { padding-inline: 48px; gap: 48px; } }
@media (max-width: 900px) {
  .dashboard-body { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 32px; padding-inline: 36px; }
  .dashboard-event { grid-template-columns: 90px minmax(0, 1fr) auto; gap: 12px; }
  .dashboard-event__title { font-size: 24px; }
}
@media (max-width: 700px) {
  .dashboard-body { display: block; padding-inline: 36px; }
  .dashboard-body__side { margin-top: 48px; }
}
@media (max-width: 480px) {
  .dashboard-body { padding: 0; }
  .dashboard-body__main, .dashboard-body__side { display: block; }
  .dashboard-body__side { margin-top: 0; }
  .dashboard-recent { padding: 0 24px 48px; }
  .dashboard-body__eyebrow { line-height: 1.2; }
  .dashboard-body__heading, .dashboard-events, .dashboard-whats-new { display: none; }
  .dashboard-documents { margin-top: 18px; }
  .dashboard-document:nth-child(n+4) { display: none; }
  .dashboard-document__button { display: flex; min-height: 86px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 0; }
  .dashboard-document__button:hover { padding: 0; background: transparent; }
  .dashboard-document__button:focus-visible { padding: 0; }
  .dashboard-document__icon, .dashboard-document__age { display: none; }
  .dashboard-document__title { margin-left: 0; font-size: var(--font-size-body-compact); font-weight: 400; line-height: 1.2; letter-spacing: -.01em; }
  .dashboard-document__tag { font-size: var(--font-size-label-xs); line-height: 1.2; letter-spacing: .12em; }
  .dashboard-membership { padding: 0 24px 72px; }
  .dashboard-membership__eyebrow, .dashboard-membership__manage { display: none; }
  .dashboard-membership__card { padding: 25px 23px 23px; }
  .dashboard-membership__tier { font-size: var(--font-size-h6); line-height: 1.166667; }
  .dashboard-membership__active { margin-top: 2px; }
  .dashboard-membership__renewal { margin-top: 14px; font-size: var(--font-size-body-sm); }
}
@media (prefers-reduced-motion: reduce) {
  html.dashboard-body-motion-boot .dashboard-recent,
  html.dashboard-body-motion-boot .dashboard-events,
  html.dashboard-body-motion-boot .dashboard-membership,
  html.dashboard-body-motion-boot .dashboard-whats-new { opacity: 1; visibility: visible; }
  .dashboard-document__button, .dashboard-document__title, .dashboard-membership__manage { transition-duration: .01ms; }
}