/*
  Everything here is scoped under the `.marketing` wrapper applied to the
  marketing layout root, so the reset, element defaults, tokens and utility
  classes never leak into the rest of the explorer app. Colour and accent
  tokens are NOT redefined — the marketing pages reuse the explorer's own
  theme-aware tokens from colors.css. Only the typography tokens, border-radius
  aliases and layout classes that radicle.dev relies on are added here.
*/

.marketing {
  --border-radius-tiny: 2px;
  --border-radius-small: 4px;
  --border-radius-regular: 8px;
  --border-radius-round: 10rem;

  --section-gap: 10rem;

  /* Horizontal gutter shared by every marketing page's content and the
     footer, so they align regardless of which page is shown. */
  --marketing-inline-gap: 4rem;

  /* Bold */
  --txt-bold-48: 600 48px/52px Booton, sans-serif;
  --txt-bold-32: 600 32px/40px Booton, sans-serif;
  --txt-bold-24: 600 24px/32px Booton, sans-serif;
  --txt-bold-22: 600 22px/30px Booton, sans-serif;
  --txt-bold-18: 600 18px/24px Booton, sans-serif;
  --txt-bold-16: 600 16px/22px Booton, sans-serif;
  --txt-bold-14: 600 14px/20px Booton, sans-serif;
  --txt-bold-12: 600 12px/16px Booton, sans-serif;

  /* Medium */
  --txt-medium-32: 468 32px/40px Booton, sans-serif;
  --txt-medium-24: 468 24px/32px Booton, sans-serif;
  --txt-medium-22: 468 22px/30px Booton, sans-serif;
  --txt-medium-20: 468 20px/28px Booton, sans-serif;
  --txt-medium-18: 468 18px/24px Booton, sans-serif;
  --txt-medium-16: 468 16px/22px Booton, sans-serif;
  --txt-medium-14: 468 14px/20px Booton, sans-serif;
  --txt-medium-12: 468 12px/16px Booton, sans-serif;

  line-height: 1.5;
  color: var(--color-text-primary);
}

/* Reset (scoped) */
.marketing *,
.marketing *::before,
.marketing *::after {
  box-sizing: border-box;
}

.marketing * {
  margin: 0;
}

.marketing img,
.marketing picture,
.marketing video,
.marketing canvas,
.marketing svg {
  display: block;
  max-width: 100%;
}

.marketing input,
.marketing button,
.marketing textarea,
.marketing select {
  font: inherit;
}

.marketing p,
.marketing h1,
.marketing h2,
.marketing h3,
.marketing h4,
.marketing h5,
.marketing h6 {
  overflow-wrap: break-word;
}

.marketing p {
  margin: 1rem 0;
  text-wrap: pretty;
}

/* Link defaults. `.product-link` is the standard blue call-to-action link, so
   it opts out of the default dark link color. */
.marketing a:-webkit-any-link:not(.button):not(.product-link) {
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text-primary);
}

.marketing a:-webkit-any-link:not(.button):not(.product-link):hover {
  color: var(--color-text-secondary);
}

.marketing a.arrow-link,
.marketing button.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  text-decoration: none;
  white-space: nowrap;
}

.marketing a.arrow-link:hover,
.marketing button.arrow-link:hover {
  text-decoration: none;
}

.marketing a.arrow-link:active,
.marketing button.arrow-link:active {
  filter: brightness(0.85);
}

.marketing .link-arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}

.marketing .arrow-link:hover .link-arrow-right,
.marketing .button:hover .link-arrow-right {
  transform: translateX(0.15rem);
}

.marketing .arrow-link:hover .link-arrow-down,
.marketing .button:hover .link-arrow-down {
  transform: translateY(0.15rem);
}

.marketing .arrow-link:hover .link-arrow-up-right,
.marketing .button:hover .link-arrow-up-right {
  transform: translate(0.15rem, -0.15rem);
}

/* Typography utility classes */
.marketing .txt-bold-48 {
  font: var(--txt-bold-48);
  letter-spacing: -0.02em;
}
.marketing .txt-bold-32 {
  font: var(--txt-bold-32);
  letter-spacing: -0.02em;
}
.marketing .txt-bold-24 {
  font: var(--txt-bold-24);
  letter-spacing: -0.02em;
}
.marketing .txt-bold-22 {
  font: var(--txt-bold-22);
}
.marketing .txt-bold-18 {
  font: var(--txt-bold-18);
}
.marketing .txt-bold-16 {
  font: var(--txt-bold-16);
}
.marketing .txt-bold-14 {
  font: var(--txt-bold-14);
}
.marketing .txt-bold-12 {
  font: var(--txt-bold-12);
}
.marketing .txt-medium-32 {
  font: var(--txt-medium-32);
  letter-spacing: -0.01em;
}
.marketing .txt-medium-24 {
  font: var(--txt-medium-24);
}
.marketing .txt-medium-22 {
  font: var(--txt-medium-22);
}
.marketing .txt-medium-20 {
  font: var(--txt-medium-20);
}
.marketing .txt-medium-18 {
  font: var(--txt-medium-18);
}
.marketing .txt-medium-16 {
  font: var(--txt-medium-16);
}
.marketing .txt-medium-14 {
  font: var(--txt-medium-14);
}
.marketing .txt-medium-12 {
  font: var(--txt-medium-12);
}
.marketing .txt-color-tertiary {
  color: var(--color-text-tertiary);
}

.marketing .global-flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Shared page styles */
.marketing .page-container {
  padding: 6rem var(--marketing-inline-gap);
}

/* On section-based pages, each top-level block rises and fades in, staggered,
   when the page mounts. Markdown docs (FAQ, glossary, guides) are a flat list
   of paragraphs, so they rise in as a single block instead. */
@keyframes section-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.marketing .page-container:not(.markdown-content) > * {
  animation: section-rise 500ms cubic-bezier(0, 0, 0.2, 1) both;
}
.marketing .page-container:not(.markdown-content) > *:nth-child(2) {
  animation-delay: 70ms;
}
.marketing .page-container:not(.markdown-content) > *:nth-child(3) {
  animation-delay: 140ms;
}
.marketing .page-container:not(.markdown-content) > *:nth-child(4) {
  animation-delay: 210ms;
}
.marketing .page-container:not(.markdown-content) > *:nth-child(5) {
  animation-delay: 280ms;
}
.marketing .page-container:not(.markdown-content) > *:nth-child(n + 6) {
  animation-delay: 350ms;
}

/* Markdown docs (FAQ, glossary, guides) are a flat element list. Animate the
   elements with the same timing (no stagger) so the doc rises in as one block.
   This lives on the children, not the reused .markdown-content container, so it
   replays on client-side navigation and not only on hard reload. */
.marketing .page-container.markdown-content > * {
  animation: section-rise 500ms cubic-bezier(0, 0, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .marketing .page-container:not(.markdown-content) > *,
  .marketing .page-container.markdown-content > * {
    animation: none;
  }
}

@media (max-width: 90rem) {
  .marketing {
    --marketing-inline-gap: 2rem;
  }
}

@media (max-width: 64rem) {
  .marketing {
    --marketing-inline-gap: 1.5rem;
  }
}

.marketing h1[id],
.marketing h2[id],
.marketing h3[id] {
  scroll-margin-top: 5rem;
}

.marketing .page-header {
  margin-bottom: 3rem;
}

/* Balance headline line lengths so the last line isn't a lone word (widow). */
.marketing .page-header h1 {
  text-wrap: balance;
}

.marketing .page-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
  margin-bottom: 0.5rem;
}

.marketing .page-title {
  margin: 0 0 0.5rem;
}

.marketing .page-subtitle {
  color: var(--color-text-secondary);
  margin: 0;
}

/* Card list styles */
.marketing .card-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.marketing .card-link {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-small);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s;
}

.marketing .card-link:hover {
  border-color: var(--color-brand-hover);
  text-decoration: none;
}

.marketing .card-link strong {
  display: block;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
}

.marketing .card-link span {
  color: var(--color-text-secondary);
}

/* Shared markdown/prose styles */
.marketing .markdown-content {
  max-width: 48rem;
  font-weight: 468;
  line-height: 1.7;
  position: relative;
}

.marketing .markdown-content aside {
  position: absolute;
  left: 100%;
  margin-left: 2rem;
  width: 16rem;
  font: var(--txt-medium-14);
  line-height: 1.6;
  color: var(--color-text-tertiary);
  background: none !important;
}

.marketing .markdown-content aside p {
  font: var(--txt-medium-14);
  line-height: 1.6;
}

.marketing .guide-hero {
  height: 20rem;
  object-fit: cover;
  border-radius: var(--border-radius-small);
  margin-bottom: 2rem;
}

.marketing .guides-markdown .markdown-content {
  max-width: min(66rem, 100%);
}

.marketing .guides-markdown .markdown-content > :not(aside) {
  max-width: none;
  width: min(42rem, calc(100% - clamp(15rem, 26vw, 20rem) - 2rem));
}

.marketing .guides-markdown .markdown-content aside {
  position: static;
  float: right;
  clear: right;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1rem;
  margin-inline-start: 0;
  width: clamp(15rem, 26vw, 20rem);
  font: var(--txt-medium-14);
  line-height: 1.6;
  color: var(--color-text-tertiary);
  background: none !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 72rem) {
  .marketing .guides-markdown .markdown-content {
    max-width: min(62rem, 100%);
  }

  .marketing .guides-markdown .markdown-content > :not(aside) {
    width: min(38rem, calc(100% - clamp(13.5rem, 30vw, 17rem) - 1.25rem));
  }

  .marketing .guides-markdown .markdown-content aside {
    width: clamp(13.5rem, 30vw, 17rem);
    margin-inline-start: 1.25rem;
  }
}

@media (max-width: 56rem) {
  .marketing .guides-markdown .markdown-content > :not(aside) {
    width: min(36rem, calc(100% - clamp(12rem, 32vw, 15rem) - 1rem));
  }

  .marketing .guides-markdown .markdown-content aside {
    width: clamp(12rem, 32vw, 15rem);
    margin-inline-start: 1rem;
  }
}

@media (max-width: 44rem) {
  .marketing .guides-markdown .markdown-content {
    max-width: 48rem;
  }

  .marketing .guides-markdown .markdown-content > :not(aside) {
    max-width: 100%;
    width: 100%;
  }

  .marketing .guides-markdown .markdown-content aside {
    float: none;
    clear: none;
    width: auto;
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    background: var(--color-surface-subtle) !important;
    overflow-wrap: anywhere;
  }

  .marketing .guides-markdown .markdown-content aside p {
    margin: 0;
  }
}

.marketing .markdown-content h1 {
  font: var(--txt-bold-48);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.marketing .markdown-content h2 {
  font: var(--txt-bold-32);
  letter-spacing: -0.02em;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.marketing .markdown-content h3 {
  font: var(--txt-bold-24);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.marketing .markdown-content h4 {
  font: var(--txt-bold-18);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 44rem) {
  .marketing .markdown-content h1 {
    font: var(--txt-bold-32);
  }

  .marketing .markdown-content h2 {
    font: var(--txt-bold-24);
  }

  .marketing .markdown-content h3 {
    font: var(--txt-bold-18);
  }
}

.marketing .markdown-content p {
  font: var(--txt-medium-16);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.marketing .markdown-content ul,
.marketing .markdown-content ol {
  font: var(--txt-medium-16);
  line-height: 1.7;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.marketing .markdown-content li {
  margin-bottom: 0.5rem;
}

.marketing .markdown-content strong {
  font-weight: 600;
}

.marketing .markdown-content code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9em;
  background: var(--color-surface-subtle);
  padding: 0.125rem 0.375rem;
  border-radius: var(--border-radius-tiny);
}

.marketing .markdown-content pre {
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius-tiny);
  overflow-x: auto;
  background: var(--color-surface-subtle) !important;
  margin-bottom: 1rem;
}

.marketing .markdown-content pre code {
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  background: none;
  padding: 0;
}

.marketing .markdown-content pre.shiki {
  background: var(--color-surface-subtle) !important;
  color: var(--shiki-dark) !important;
}

.marketing .markdown-content pre.shiki span {
  color: var(--shiki-dark) !important;
  background: none !important;
}

:root[data-theme="light"] .marketing .markdown-content pre.shiki,
:root[data-theme="light"] .marketing .markdown-content pre.shiki span {
  color: var(--shiki-light) !important;
}

.marketing .copy-code-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem;
  background: none;
  border: none;
  border-radius: 0.125rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.marketing .markdown-content pre:hover .copy-code-button {
  opacity: 1;
}

.marketing .copy-code-button:hover {
  background: var(--color-surface-subtle);
}

.marketing .markdown-content a {
  color: var(--color-brand-hover);
}

.marketing .markdown-content a:hover {
  text-decoration: underline;
}

.marketing .markdown-content blockquote {
  border-left: 3px solid var(--color-border-mid);
  padding-left: 1rem;
  margin: 1rem 0;
  color: var(--color-text-secondary);
}

.marketing .markdown-content table {
  border-collapse: collapse;
  margin-bottom: 1rem;
  width: 100%;
}

.marketing .markdown-content th,
.marketing .markdown-content td {
  font: var(--txt-medium-14);
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-subtle);
  text-align: left;
}

.marketing .markdown-content th {
  font: var(--txt-bold-14);
  background: var(--color-surface-subtle);
}

.marketing .markdown-content hr {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: 2rem 0;
}

.marketing .markdown-content figure {
  margin: 2rem 0;
}

.marketing .markdown-content figure img {
  max-width: 100%;
  height: auto;
}

.marketing .markdown-content figcaption {
  font: var(--txt-medium-14);
  color: var(--color-text-tertiary);
  margin-top: 0.75rem;
}

/* Inline link styles */
.marketing .inline-link {
  color: var(--color-brand-hover);
  text-decoration: none;
}

.marketing .inline-link:hover {
  text-decoration: underline;
}

/* Product card styles (shared by Install and Learn pages) */
.marketing .card-row {
  --product-card-gap: 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: var(--product-card-gap);
  column-gap: var(--product-card-gap);
  align-items: start;
}

.marketing .product-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1.25rem;
}

.marketing .product-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--border-radius-small);
}

.marketing .product-card-text {
  display: flex;
  flex-direction: column;
  padding-right: 1.5rem;
  min-width: 0;
}

.marketing .product-title {
  font: var(--txt-bold-18);
  color: var(--color-text-primary);
  padding: 0 0 0.5rem;
}

.marketing .product-description {
  font: var(--txt-medium-16);
  color: var(--color-text-tertiary);
  margin: 0 0 0.75rem;
}

.marketing .product-link {
  font: var(--txt-bold-16);
  color: var(--color-accent-blue-500);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  width: fit-content;
}

.marketing .product-link:hover {
  text-decoration: none;
}

@media (max-width: 64rem) {
  .marketing .card-row {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
    column-gap: 0;
  }

  .marketing .product-card-text {
    padding-right: 0;
  }
}

/* Marketing sidebar active-indicator dot (see Sidebar.svelte). When the dot
   exists on both the outgoing and incoming page the browser morphs it between
   nav items automatically. When it only appears (enter) or disappears (exit),
   slide it in from / out to the left edge. `:only-child` singles out those
   enter/exit cases, leaving the morph untouched. */
@keyframes sidebar-dot-in {
  from {
    opacity: 0;
    transform: translateX(-1.5rem);
  }
}

@keyframes sidebar-dot-out {
  to {
    opacity: 0;
    transform: translateX(-1.5rem);
  }
}

/* `both` holds the final keyframe after the 0.2s animation ends: the overall
   transition runs longer (the root fade+slide is 0.3s), and without a forwards
   fill the dot snapshot would revert to full opacity at its start position for
   the remaining time before the transition tears down. */
::view-transition-new(sidebar-dot):only-child {
  animation: sidebar-dot-in 0.2s ease both;
}

::view-transition-old(sidebar-dot):only-child {
  animation: sidebar-dot-out 0.2s ease both;
}

/* Marketing sidebar sub-nav unfurl (see Sidebar.svelte). Each nav section is a
   view-transition group. As one section grows/shrinks, the sections below tween
   their boxes to the new positions (smooth reflow, no jump), and clipping the
   growing/shrinking box turns the height change into a top-to-bottom unfurl.
   These always run, but on a same-section navigation the boxes don't change
   size so it's a no-op. */
::view-transition-group(install-section),
::view-transition-group(learn-section),
::view-transition-group(sidebar-external) {
  animation-duration: 0.25s;
  animation-timing-function: ease-out;
}

::view-transition-group(install-section),
::view-transition-group(learn-section) {
  overflow: clip;
}

/* Anchor the section snapshots to the top at natural height, so a growing/
   shrinking group reveals/hides content by clipping rather than scaling it. */
::view-transition-old(install-section),
::view-transition-new(install-section),
::view-transition-old(learn-section),
::view-transition-new(learn-section) {
  height: auto;
  inset-block-start: 0;
}

/* Animatable soft-edge distance for the reveal, registered so it can tween. */
@property --subnav-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@keyframes subnav-fade-edge {
  /* Hold the soft edge at full through the 0.25s reveal (0-78% of this 0.32s),
     then dissolve it over the short tail so the last item keeps its soft edge
     while revealing and the gradient is gone before the pseudo is removed (no
     pop, no hard cut). */
  0%,
  78% {
    --subnav-fade: 2rem;
  }
  100% {
    --subnav-fade: 0rem;
  }
}

/* The soft-edge gradient only applies when a section actually opens or closes:
   the sidebar adds `.sidebar-unfurling` to the document element for exactly
   those navigations (see Sidebar.svelte), so moving *within* a section shows no
   gradient. `max()` floors the opaque region to the header height so a
   collapsing section never fades its own header text. */
:root.sidebar-unfurling::view-transition-image-pair(install-section),
:root.sidebar-unfurling::view-transition-image-pair(learn-section) {
  mask-image: linear-gradient(
    to bottom,
    #000 max(1.75rem, calc(100% - var(--subnav-fade))),
    transparent
  );
  animation: subnav-fade-edge 0.32s ease-out both;
}