@charset "UTF-8";

.responsive-product-shell {
  --product-shell-canvas: #02060d;
  --product-shell-surface: #09111d;
  --product-shell-surface-quiet: #070c12;
  --product-shell-text: #e9ecea;
  --product-shell-muted: #aab1b5;
  --product-shell-faint: #929ba0;
  --product-shell-silver: rgba(224, 230, 229, 0.28);
  --product-shell-line: rgba(224, 230, 229, 0.18);
  --product-shell-line-soft: rgba(224, 230, 229, 0.12);
  --product-shell-gold: #b79a5f;
  --product-shell-hit: 44px;
  min-width: 0;
  min-height: 100dvh;
  color: var(--product-shell-text);
  background: var(--product-shell-canvas);
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.static-product-shell {
  background: transparent;
}

.responsive-product-shell *,
.responsive-product-shell *::before,
.responsive-product-shell *::after {
  box-sizing: border-box;
}

.product-shell-workspace,
.product-shell-content {
  min-width: 0;
  min-height: 100dvh;
}

.product-shell-skip {
  position: fixed;
  z-index: 1200;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  min-height: var(--product-shell-hit);
  padding: 11px 16px;
  transform: translateY(-180%);
  border: 1px solid var(--product-shell-silver);
  color: var(--product-shell-text);
  background: var(--product-shell-surface);
  text-decoration: none;
}

.product-shell-skip:focus {
  transform: translateY(0);
}

.product-shell-side {
  display: none;
}

.product-shell-phone-header {
  position: sticky;
  z-index: 45;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(64px + env(safe-area-inset-top));
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--product-shell-line-soft);
  background: rgba(2, 6, 13, 0.96);
  backdrop-filter: blur(14px);
}

.product-shell-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--product-shell-hit);
  color: var(--product-shell-text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  text-decoration: none;
}

.product-shell-phone-account {
  display: inline-flex;
  align-items: center;
  min-height: var(--product-shell-hit);
  padding: 8px 0 8px 16px;
  border-bottom: 1px solid var(--product-shell-line);
  color: var(--product-shell-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.product-shell-phone-account[aria-current="page"] {
  border-bottom-color: var(--product-shell-gold);
  color: var(--product-shell-text);
}

.product-shell-phone-account.is-disabled {
  color: var(--product-shell-faint);
}

.product-shell-content {
  padding-bottom: calc(66px + max(8px, env(safe-area-inset-bottom)));
}

.product-shell-bottom {
  position: fixed;
  z-index: 70;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 4px max(14px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  border-top: 1px solid var(--product-shell-silver);
  background: rgba(2, 6, 13, 0.98);
  backdrop-filter: blur(14px);
}

.product-shell-bottom-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 54px;
  border: 0;
  border-top: 2px solid transparent;
  padding: 10px 3px 8px;
  color: var(--product-shell-muted);
  background: transparent;
  cursor: pointer;
  font: 700 clamp(0.67rem, 3.3vw, 0.78rem)/1.2 Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  text-decoration: none;
}

.product-shell-bottom-link:hover,
.product-shell-bottom-link:focus-visible {
  color: var(--product-shell-text);
}

.product-shell-bottom-link[aria-current="page"],
.product-shell-bottom-link[aria-current="location"],
.product-shell-bottom-link.is-active {
  border-top-color: var(--product-shell-gold);
  color: var(--product-shell-text);
}

.product-shell-bottom-link:focus-visible,
.product-shell-core-link:focus-visible,
.product-shell-service-link:focus-visible,
.product-shell-account-link:focus-visible,
.product-shell-phone-account:focus-visible,
.product-shell-brand:focus-visible,
.product-shell-menu button:focus-visible {
  outline: 1px solid #ede9df;
  outline-offset: 3px;
}

.product-shell-menu-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  align-items: end;
  padding-top: max(20px, env(safe-area-inset-top));
  background: rgba(1, 4, 9, 0.82);
  backdrop-filter: blur(7px);
}

.product-shell-menu-backdrop[hidden] {
  display: none !important;
}

.product-shell-menu {
  width: 100%;
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  border-top: 1px solid var(--product-shell-silver);
  padding: 18px max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  color: var(--product-shell-text);
  background: var(--product-shell-canvas);
  overscroll-behavior: contain;
}

.product-shell-menu-head {
  position: sticky;
  z-index: 1;
  top: -18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--product-shell-line-soft);
  background: var(--product-shell-canvas);
}

.product-shell-menu-head p,
.product-shell-menu-head h2 {
  margin: 0;
}

.product-shell-menu-head p {
  color: var(--product-shell-faint);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.product-shell-menu-head h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.35rem;
  font-weight: 500;
  line-height: 1;
}

.product-shell-menu-head button {
  min-height: var(--product-shell-hit);
  border: 0;
  border-bottom: 1px solid var(--product-shell-line);
  padding: 8px 0 8px 14px;
  color: var(--product-shell-muted);
  background: transparent;
  cursor: pointer;
  font: 700 0.76rem/1.2 Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.product-shell-service-groups {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 8px;
}

.product-shell-service-groups.is-compact {
  gap: 22px;
  padding-top: 22px;
}

.product-shell-service-group h2 {
  padding: 10px 8px 4px;
  margin: 0;
  color: var(--product-shell-faint);
  font: 750 0.56rem/1.35 Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.product-shell-service-group nav {
  display: grid;
}

.product-shell-service-groups.is-compact .product-shell-service-group nav {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

.product-shell-service-link,
.product-shell-core-link {
  display: flex;
  align-items: center;
  min-height: var(--product-shell-hit);
  border-left: 2px solid transparent;
  padding: 8px;
  color: var(--product-shell-muted);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
}

.product-shell-service-link:hover,
.product-shell-core-link:hover,
.product-shell-service-link:focus-visible,
.product-shell-core-link:focus-visible {
  color: var(--product-shell-text);
  background: var(--product-shell-surface-quiet);
}

.product-shell-service-link[aria-current="page"],
.product-shell-core-link[aria-current="page"],
.product-shell-core-link[aria-current="location"] {
  border-left-color: var(--product-shell-gold);
  color: var(--product-shell-text);
  background: var(--product-shell-surface);
}

html[data-product-shell-menu="open"],
html[data-product-shell-menu="open"] body {
  overflow: hidden;
}

@media (max-width: 359px) {
  .product-shell-phone-header {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .product-shell-bottom {
    padding-right: max(8px, env(safe-area-inset-right));
    padding-left: max(8px, env(safe-area-inset-left));
  }

  .product-shell-service-groups.is-compact .product-shell-service-group nav {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .product-shell-content > * > .site-navigation,
  .product-shell-content > .landing-shell > .landing-header,
  .product-shell-content > .app-shell > .site-header,
  .product-shell-content > .portal-shell > .portal-header,
  .product-shell-content > .account-shell > .account-topnav,
  .product-shell-content > .legal-page-shell > .legal-page-header,
  .product-shell-content > .rune-stones-shell > .rune-stones-header,
  .product-shell-content > .rune-guide-shell > .rune-guide-header,
  .product-shell-content > .seo-shell > .seo-header {
    display: none !important;
  }

  .static-product-shell .product-shell-content > .site-nav {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .product-shell-content .reading-busy {
    bottom: calc(68px + max(10px, env(safe-area-inset-bottom)));
  }

  .product-shell-content .account-dialog-backdrop,
  .product-shell-content .dialog-backdrop,
  .product-shell-content .reading-card-backdrop {
    padding-bottom: calc(68px + max(10px, env(safe-area-inset-bottom)));
  }

  .product-shell-content .onboarding-coachmark,
  .product-shell-content .onboarding-coachmark.is-welcome {
    bottom: calc(68px + max(10px, env(safe-area-inset-bottom))) !important;
  }
}

@media (max-width: 620px) and (max-height: 520px) {
  .product-shell-bottom {
    position: static;
  }

  .product-shell-content {
    padding-bottom: 0;
  }
}

@media (min-width: 621px) and (max-width: 1180px) {
  .responsive-product-shell {
    display: grid;
    grid-template-columns: 218px minmax(0, 1fr);
  }

  .product-shell-side {
    position: sticky;
    z-index: 55;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 218px;
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    padding: max(22px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    border-right: 1px solid var(--product-shell-silver);
    background: rgba(2, 6, 13, 0.97);
    overscroll-behavior: contain;
  }

  .product-shell-side-head {
    display: grid;
    gap: 7px;
    padding: 0 8px 18px;
    border-bottom: 1px solid var(--product-shell-line-soft);
  }

  .product-shell-side-head p {
    margin: 0;
    color: var(--product-shell-muted);
    font-size: 0.62rem;
    line-height: 1.45;
  }

  .product-shell-account-link {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 11px 8px;
    margin: 12px 0 8px;
    border: 1px solid var(--product-shell-line);
    color: var(--product-shell-text);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
  }

  .product-shell-account-link:hover,
  .product-shell-account-link:focus-visible,
  .product-shell-account-link[aria-current="page"] {
    border-color: var(--product-shell-gold);
    background: var(--product-shell-surface);
  }

  .product-shell-core {
    display: grid;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--product-shell-line-soft);
  }

  .product-shell-workspace {
    grid-column: 2;
    padding-right: env(safe-area-inset-right);
  }

  .product-shell-phone-header,
  .product-shell-bottom {
    display: none;
  }

  .product-shell-content {
    min-height: 100dvh;
    padding-bottom: 0;
  }

  .product-shell-content > .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    min-height: 100svh;
    overflow: auto;
    padding: 26px 28px 18px;
  }

  .product-shell-content > .app-shell > .reading-stage {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    width: 100%;
    padding: 22px 0 38px;
    transform: none;
  }

  .product-shell-content > .app-shell > .site-footer {
    grid-column: 1;
    grid-row: 3;
  }

  .product-shell-content > .rune-stones-shell .rune-stones-header,
  .product-shell-content > .rune-stones-shell .rune-stones-page {
    width: min(calc(100% - 36px), 760px);
  }

  .product-shell-content > .rune-stones-shell :is(.rune-stones-hero, .rune-stones-source, .rune-stones-slate, .rune-stones-note) {
    grid-template-columns: 1fr;
  }

  .product-shell-content > .rune-stones-shell .rune-stones-hero {
    min-height: 0;
    padding-block: 72px 92px;
  }

  .product-shell-content > .rune-stones-shell .rune-stones-hero h1 {
    max-width: none;
    font-size: clamp(58px, 9vw, 82px);
  }

  .product-shell-content > .rune-stones-shell :is(.rune-stones-source, .rune-stones-slate, .rune-stones-note) {
    gap: 52px;
    padding-block: 92px;
  }

  .product-shell-content > .rune-stones-shell .rune-stones-slate figure {
    order: 2;
  }

  .product-shell-content > .rune-stones-shell .rune-stones-slate > div {
    order: 1;
  }

  .product-shell-content > .rune-stones-shell :is(.rune-stones-next, .rune-stones-footer) {
    display: grid;
    grid-template-columns: 1fr;
  }

  .product-shell-content > .rune-guide-shell :is(.rune-guide-header, .rune-guide-page, .rune-guide-footer) {
    width: min(calc(100% - 36px), 820px);
  }

  .product-shell-content > .rune-guide-shell .rune-guide-hero,
  .product-shell-content > .rune-guide-shell .rune-guide-layout,
  .product-shell-content > .rune-guide-shell .rune-guide-section > header,
  .product-shell-content > .rune-guide-shell :is(.rune-meditation, .rune-material-grid, .rune-guide-editorial-note) {
    grid-template-columns: 1fr;
  }

  .product-shell-content > .rune-guide-shell .rune-guide-hero {
    min-height: 0;
    padding-block: 72px 100px;
  }

  .product-shell-content > .rune-guide-shell .rune-guide-hero h1 {
    max-width: 11ch;
  }

  .product-shell-content > .rune-guide-shell .rune-guide-hero-alphabet {
    width: min(100%, 680px);
    margin: 20px auto 0;
  }

  .product-shell-content > .rune-guide-shell .rune-guide-layout {
    gap: 44px;
  }

  .product-shell-content > .rune-guide-shell .rune-guide-toc {
    position: static;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--rg-line);
  }

  .product-shell-content > .rune-guide-shell .rune-guide-toc p {
    grid-column: 1 / -1;
  }

  .product-shell-content > .rune-guide-shell .rune-guide-footer {
    gap: 14px;
    padding-block: 24px;
  }

  .product-shell-content > .landing-shell:not(.storefront-shell):not(.trainer-shell):not(.stones-shell):not(.community-shell) :is(.landing-header, .landing-hero, .landing-section, .landing-support, .landing-final, .landing-footer) {
    width: min(calc(100% - 32px), 736px);
  }

  .product-shell-content > .landing-shell .landing-nav {
    display: none !important;
  }

  .product-shell-content > .landing-shell:not(.storefront-shell):not(.trainer-shell):not(.stones-shell):not(.community-shell) :is(.landing-hero, .landing-depth-grid, .landing-deck-story, .landing-view-grid, .landing-meaning, .landing-safety) {
    grid-template-columns: 1fr;
  }

  .product-shell-content > .landing-shell:not(.storefront-shell):not(.trainer-shell):not(.stones-shell):not(.community-shell) .landing-hero {
    min-height: auto;
    padding: 72px 8px 78px;
  }

  .product-shell-content > .landing-shell:not(.storefront-shell):not(.trainer-shell):not(.stones-shell):not(.community-shell) .landing-hero-copy {
    max-width: 670px;
    padding-left: 0;
    transform: none;
  }

  .product-shell-content > .landing-shell:not(.storefront-shell):not(.trainer-shell):not(.stones-shell):not(.community-shell) .landing-section-heading {
    display: block;
    margin-bottom: 50px;
  }

  .product-shell-content > .landing-shell:not(.storefront-shell):not(.trainer-shell):not(.stones-shell):not(.community-shell) .landing-depth-grid article {
    min-height: 0;
  }

  .product-shell-content > .landing-shell:not(.storefront-shell):not(.trainer-shell):not(.stones-shell):not(.community-shell) :is(.landing-depth-grid article + article, .landing-view-grid article + article) {
    border-top: 1px solid var(--landing-line);
    border-left: 0;
  }

  .product-shell-content > .landing-shell:not(.storefront-shell):not(.trainer-shell):not(.stones-shell):not(.community-shell) :is(.landing-support, .landing-curation) {
    grid-template-columns: auto 1fr;
  }

  .product-shell-content > .storefront-shell :is(.storefront-hero, .storefront-section-heading, .storefront-principles, .storefront-questions, .storefront-grid),
  .product-shell-content > .trainer-shell :is(.trainer-hero, .trainer-method, .trainer-section-heading),
  .product-shell-content > .stones-shell :is(.stones-hero, .stones-controls),
  .product-shell-content > .community-shell :is(.community-hero, .community-summary, .community-points-grid, .community-profile-grid),
  .product-shell-content > .portal-shell :is(.portal-hero, .portal-section-head, .portal-split, .portal-commerce-layout),
  .product-shell-content > .seo-shell :is(.seo-hero, .seo-related) {
    grid-template-columns: 1fr;
  }

  .product-shell-content > .storefront-shell .storefront-hero,
  .product-shell-content > .trainer-shell .trainer-hero,
  .product-shell-content > .stones-shell .stones-hero,
  .product-shell-content > .community-shell .community-hero {
    min-height: 0;
  }

  .product-shell-content > .community-shell .community-member {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 17px;
  }

  .product-shell-content > .community-shell .community-member-facts {
    display: none;
  }

  .product-shell-content > .community-shell .community-progress {
    grid-column: 2;
  }

  .product-shell-content > .storefront-shell .storefront-grid {
    grid-template-columns: 1fr;
  }

  .product-shell-content > .stones-shell .stones-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-shell-content > .trainer-shell .trainer-exercise {
    grid-template-columns: 1fr;
  }

  .product-shell-content > .portal-shell .portal-split-copy {
    position: static;
  }

  .product-shell-content > .portal-shell .portal-service-links {
    grid-template-columns: 1fr;
  }

  .product-shell-content > .legal-page-shell {
    padding-inline: 12px;
  }

  .product-shell-content > .legal-page-shell .legal-document {
    padding-inline: 20px;
  }

  .product-shell-content > .account-shell .account-workspace-grid {
    grid-template-columns: 1fr;
    min-width: 0;
    gap: 34px;
  }

  .product-shell-content > .account-shell .account-aside {
    position: static;
  }

  .product-shell-content > .account-shell .account-aside > div:first-child,
  .product-shell-content > .account-shell .account-aside > p {
    display: none;
  }

  .product-shell-content > .account-shell .account-tablist {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    gap: 0;
    margin-top: 0;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .product-shell-content > .account-shell .account-tablist > button {
    flex: 0 0 auto;
    min-width: max-content;
    justify-content: center;
    border-top: 1px solid var(--account-border-soft);
    padding-inline: 14px;
    text-align: center;
    scroll-snap-align: start;
  }

  .product-shell-content > .account-shell .account-tablist > button::before {
    top: -1px;
    right: 18%;
    bottom: auto;
    left: 18%;
    width: auto;
    height: 1px;
  }

  .product-shell-content > .account-shell .account-summary-grid,
  .product-shell-content > .account-shell .account-product-row,
  .product-shell-content > .account-shell .telegram-sharing-layout,
  .product-shell-content > .account-shell .account-achievement-overview {
    grid-template-columns: 1fr;
  }

  .product-shell-content > .account-shell .account-summary-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .product-shell-content > .account-shell .account-summary-heading > p {
    max-width: 42ch;
  }

  .product-shell-content > .account-shell .account-mobile-buy {
    display: inline-flex;
    grid-row: 2;
    justify-self: start;
  }

  .product-shell-content > .account-shell .account-balance-primary,
  .product-shell-content > .account-shell .account-summary-fact {
    border-left: 0;
    border-bottom: 1px solid var(--account-border-soft);
    padding: 26px 0;
  }

  .product-shell-content > .account-shell .account-product-action {
    min-width: 0;
    justify-items: stretch;
  }

  .product-shell-content > .account-shell .account-ledger-head {
    display: none;
  }

  .product-shell-content > .account-shell .account-ledger-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
    padding: 18px 0;
  }

  .product-shell-content > .account-shell .account-ledger-row > *::before {
    display: block;
    margin-bottom: 2px;
    color: var(--account-muted);
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .product-shell-content > .account-shell .account-section-heading {
    align-items: start;
    flex-direction: column;
    margin-bottom: 28px;
  }
}

@media (min-width: 834px) and (max-width: 1180px) {
  .responsive-product-shell {
    grid-template-columns: 244px minmax(0, 1fr);
  }

  .product-shell-side {
    width: 244px;
    padding-right: 18px;
    padding-left: max(18px, env(safe-area-inset-left));
  }

  .product-shell-service-link,
  .product-shell-core-link {
    font-size: 0.8rem;
  }

  .product-shell-content > .community-shell .community-member {
    grid-template-columns: 64px minmax(0, 1fr) minmax(180px, 0.72fr);
    gap: clamp(20px, 3vw, 36px);
  }

  .product-shell-content > .community-shell .community-progress {
    grid-column: auto;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .responsive-product-shell {
    grid-template-columns: 270px minmax(0, 1fr);
  }

  .product-shell-side {
    width: 270px;
    padding-right: 22px;
    padding-left: max(22px, env(safe-area-inset-left));
  }
}

@media (min-width: 1181px) {
  .product-shell-side,
  .product-shell-phone-header,
  .product-shell-bottom,
  .product-shell-menu-backdrop,
  .product-shell-skip {
    display: none;
  }

  .product-shell-content {
    min-height: 0;
    padding-bottom: 0;
  }
}