/* Katsa guide pages. Layout comes from the Paper file "Katsa site" (01M6GPEYH29AGNMVNCJX4A3ZPW): guide template desktop at 1440 and phone at 390. Tokens come from site.css. */

.g-hero { padding-top: clamp(2.5rem, 1.7rem + 3.3vw, 4.5rem); }
.g-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.g-crumbs li { display: flex; gap: 0.625rem; }
.g-crumbs li + li::before { content: "/"; color: var(--color-text-secondary); }
.g-crumbs a { color: var(--color-text-primary); text-decoration-line: underline; }
.g-h1 {
  max-width: 65rem;
  padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  line-height: 1.1;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.g-byline { display: flex; align-items: center; gap: 0.875rem; padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.g-byline img { width: 2.75rem; height: 2.75rem; border-radius: 50%; flex-shrink: 0; }
.g-byline p { display: flex; flex-direction: column; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.g-byline .g-when { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-secondary); }

.g-row { display: grid; gap: 0.875rem; border-top: 1px solid var(--color-border-strong); padding-top: 1rem; }
.g-answer { padding-top: clamp(2.5rem, 1.9rem + 2.4vw, 4rem); }
.g-answer-text {
  max-width: 55rem;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-light);
  font-size: clamp(1.5rem, 1.32rem + 0.76vw, 2rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.g-body { display: grid; padding-top: clamp(2.5rem, 1.5rem + 4.2vw, 6rem); }
.g-toc > .t-label, .g-toc-list { display: none; }
.g-toc ol { flex-direction: column; gap: 0.625rem; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.g-toc-m ol { display: flex; }
.g-toc-list { padding-top: 1rem; }
.g-toc a { color: var(--color-text-secondary); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .g-toc a:hover { color: var(--color-text-primary); text-decoration-line: underline; } }
.g-toc-m details { border-top: 1px solid var(--color-border-separator); border-bottom: 1px solid var(--color-border-separator); }
.g-toc-m summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.g-toc-m summary::-webkit-details-marker { display: none; }
.g-toc-m summary svg { flex-shrink: 0; transition: transform 200ms var(--ease-out); }
.g-toc-m details[open] summary svg { transform: rotate(180deg); }
.g-toc-m ol { padding-bottom: 1rem; }

.g-main { display: flex; flex-direction: column; gap: clamp(3.5rem, 3rem + 2vw, 4rem); min-width: 0; padding-top: 3rem; }
.g-main h2:not(.t-label) {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.386rem + 0.485vw, 1.75rem);
  line-height: 1.214;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}
.g-main h2, .g-main h3 { scroll-margin-top: 1.5rem; }
.g-main section > * + * { margin-top: 1.25rem; }
.g-main a { text-decoration-line: underline; }
.g-main ul:not([role]) { padding-left: 1.25em; list-style: disc; }
.g-main ol.g-ol { padding-left: 1.5em; list-style: decimal; }
.g-main ul:not([role]) li + li, .g-main ol.g-ol li + li { margin-top: 0.5rem; }

.g-stat { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 2rem; border-top: 1px solid var(--color-border-strong); padding-top: 1.25rem; }
.g-main section > .g-stat { margin-top: 2rem; }
.g-stat-value {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 3.8rem + 2.9vw, 6rem);
  line-height: 0.875;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  min-width: 2.6em;
}
.g-stat figcaption { display: flex; flex-direction: column; gap: 0.375rem; max-width: 27.5rem; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.g-stat .g-stat-src { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-secondary); }

.g-steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; padding: 1rem 0 1.25rem; border-top: 1px solid var(--color-border-strong); }
.g-step-num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}
.g-steps h3 { font-size: clamp(1.25rem, 1.2rem + 0.24vw, 1.375rem); line-height: 1.36; }
.g-steps p { margin-top: 0.375rem; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-text-secondary); }

.g-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.g-table th, .g-table td { padding: 0.875rem 1.5rem 0.875rem 0; border-bottom: 1px solid var(--color-border-separator); text-align: left; vertical-align: top; font-weight: var(--font-weight-regular); }
.g-table th:last-child, .g-table td:last-child { padding-right: 0; }
.g-table thead th {
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom-color: var(--color-border-strong);
  font-size: var(--text-label);
  line-height: 1.385;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.g-table td { color: var(--color-text-secondary); }
@media (max-width: 39.99rem) {
  .g-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .g-stack tr { display: block; padding: 0.875rem 0; border-bottom: 1px solid var(--color-border-separator); }
  .g-stack tbody th, .g-stack td { display: block; padding: 0; border: 0; }
  .g-stack td { margin-top: 0.625rem; }
  .g-stack td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-label);
    line-height: 1.385;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .g-stack tbody tr:first-child { border-top: 1px solid var(--color-border-strong); }
}

.g-note { display: grid; gap: 0.375rem; padding: 1rem 1.25rem; border-radius: 0.25rem; background: var(--color-bg-subtle); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.g-note .t-label { padding-top: 0.1875rem; }

.g-faq .g-qa { padding: 1.25rem 0 1.5rem; border-top: 1px solid var(--color-border-separator); }
.g-faq h2 + .g-qa { margin-top: 1.5rem; }
.g-faq .g-qa + .g-qa { margin-top: 0; }
.g-qa h3 { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--font-weight-bold); }
.g-qa p { margin-top: 0.375rem; }

.g-sources { border-top: 1px solid var(--color-border-strong); padding-top: 1.25rem; }
.g-sources ol { padding-left: 1.5em; list-style: decimal; font-size: var(--text-caption); line-height: var(--leading-caption); }
.g-sources li::marker { color: var(--color-text-secondary); }
.g-sources li + li { margin-top: 0.5rem; }

.g-related { display: grid; gap: 0.75rem; padding-top: clamp(4.5rem, 3.5rem + 4vw, 7.5rem); }
.g-links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  grid-template-areas: "kind arrow" "title arrow";
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border-strong);
  text-decoration: none;
}
.g-links .t-label { grid-area: kind; }
.g-links .g-link-title { grid-area: title; font-size: clamp(1.25rem, 1.2rem + 0.24vw, 1.375rem); line-height: 1.36; }
.g-links .g-link-desc { grid-area: desc; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-text-secondary); }
.g-links svg { grid-area: arrow; width: 2rem; height: 2rem; }
.g-links .has-desc { grid-template-areas: "title arrow" "desc arrow"; }
@media (hover: hover) and (pointer: fine) { .g-links a:hover .g-link-title { text-decoration-line: underline; } }

.g-cta { padding-top: clamp(6rem, 4.5rem + 6vw, 10rem); padding-bottom: clamp(6rem, 4.5rem + 6vw, 10rem); }
.g-cta-text {
  max-width: 55rem;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-light);
  font-size: clamp(1.75rem, 1.45rem + 1.21vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.g-cta .actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; padding-top: 2rem; text-align: center; }
.g-cta .text-link { padding-block: 0.625rem; }

.g-people { padding-top: 0.5rem; }

.g-index .g-main section + section { margin-top: 0; }

@media (min-width: 40rem) {
  .g-steps li { grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1.5rem; padding: 1.25rem 0 1.5rem; }
  .g-table tbody th { width: 8.5rem; }
  .g-note { grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1.5rem; padding: 1.25rem 1.5rem; }
  .g-links a { grid-template-columns: 8.5rem minmax(0, 1fr) 2rem; grid-template-areas: "kind title arrow"; column-gap: 1.5rem; padding: 1.375rem 0; }
  .g-links .has-desc { grid-template-columns: minmax(0, 1fr) 2rem; grid-template-areas: "title arrow" "desc arrow"; }
  .g-cta .actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; text-align: left; }
  .g-cta .text-link { padding-block: 0; }
}
@media (min-width: 64rem) {
  .g-row { grid-template-columns: 18.5rem minmax(0, 1fr); column-gap: 7.5rem; padding-top: 1.5rem; }
  .g-body, .g-related { grid-template-columns: 18.5rem minmax(0, 45rem); column-gap: 7.5rem; align-items: start; }
  .g-toc { position: sticky; top: 2rem; }
  .g-toc > .t-label { display: block; }
  .g-toc-list { display: flex; }
  .g-toc-m { display: none; }
  .g-main { padding-top: 0; }
  .g-related h2 { padding-top: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .g-toc-m summary svg { transition: none; } }