:root {
  --product-ink: #1c382e;
  --product-muted: #718078;
  --product-green: #4d6d5f;
  --product-deep-green: #17372b;
  --product-orange: #d08351;
  --product-cream: #fffdf8;
  --product-paper: #f4f0e7;
  --product-line: rgba(45, 70, 58, .15);
  --product-shadow: 0 22px 60px rgba(32, 55, 45, .13);
}

body.product-page {
  color: var(--product-ink);
  background:
    linear-gradient(rgba(244, 241, 234, .78), rgba(244, 241, 234, .88)),
    url("./study/assets/study-login-background.jpg") center / cover fixed no-repeat;
}

body.product-page .topbar {
  position: relative;
  z-index: 30;
  display: flex;
  width: min(1180px, calc(100% - 48px));
  min-height: 78px;
  margin: 0 auto;
  padding: 0;
  align-items: center;
  gap: 14px;
  border: 0;
  color: var(--product-ink);
  background: transparent;
  backdrop-filter: none;
}

body.product-page .back-link {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(44, 73, 59, .16);
  border-radius: 12px;
  color: var(--product-deep-green);
  background: rgba(255, 253, 248, .72);
  box-shadow: 0 7px 18px rgba(35, 60, 48, .08);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

body.product-page .back-link:hover,
body.product-page .back-link:focus-visible {
  border-color: rgba(77, 109, 95, .5);
  outline: none;
  background: var(--product-cream);
  transform: translateX(-2px);
}

body.product-page .brand-copy {
  display: grid;
  min-width: 150px;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 11px;
  flex: 1;
  line-height: 1.1;
}

body.product-page .brand-copy::before {
  display: grid;
  width: 42px;
  height: 42px;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 13px 13px 17px 13px;
  color: #fff8e9;
  content: "ㄸ";
  background: var(--product-green);
  box-shadow: 0 7px 16px rgba(43, 73, 59, .2);
  font-size: 14px;
  font-weight: 950;
}

body.product-page .brand-copy p {
  align-self: end;
  margin: 0 0 2px;
  color: var(--product-muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
}

body.product-page .brand-copy strong {
  align-self: start;
  color: var(--product-ink);
  font-size: 16px;
  letter-spacing: -.04em;
}

body.product-page .app-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 4px;
  border: 1px solid rgba(44, 73, 59, .13);
  border-radius: 12px;
  background: rgba(255, 253, 248, .82);
  box-shadow: 0 8px 22px rgba(35, 60, 48, .09);
  backdrop-filter: blur(12px);
}

body.product-page .app-nav a {
  min-width: 54px;
  padding: 9px 11px;
  border-radius: 8px;
  color: #66766e;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}

body.product-page .app-nav a:hover,
body.product-page .app-nav a:focus-visible {
  color: var(--product-deep-green);
  outline: none;
  background: rgba(77, 109, 95, .09);
}

body.product-page .app-nav a.is-current {
  color: #fffaf0;
  background: var(--product-deep-green);
  box-shadow: 0 5px 13px rgba(23, 55, 43, .18);
}

.topbar .app-nav + .save-state,
.topbar .app-nav + .demo-badge { margin-left: 0; }

@media (max-width: 720px) {
  body.product-page { padding-bottom: 78px !important; background-position: 38% center; }
  body.product-page.is-login-visible { padding-bottom: 0 !important; }
  body.product-page .topbar { width: calc(100% - 24px); min-height: 68px; }
  body.product-page .topbar:has(.app-nav) { backdrop-filter: none !important; }
  body.product-page .brand-copy { min-width: 0; }
  body.product-page .brand-copy p { display: none; }
  body.product-page .brand-copy strong { font-size: 14px; }
  body.product-page .brand-copy::before { width: 38px; height: 38px; }
  body.product-page .app-nav {
    position: fixed;
    z-index: 80;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 7px;
    border-color: rgba(125, 145, 135, .3);
    border-radius: 17px;
    background: rgba(255, 253, 248, .96);
    box-shadow: 0 14px 32px rgba(28, 51, 41, .2);
    backdrop-filter: blur(14px);
  }
  body.product-page .app-nav a { min-width: 0; padding: 11px 5px; }
}