:root {
--knitters-background: #FFFFFF;
--knitters-foreground: #111111;
--knitters-card: #FFF5F2;
--knitters-primary: #F72E00;
--knitters-secondary-foreground: #111111;
--knitters-muted: #F6F6F6;
--knitters-muted-foreground: #8A8A8A;
--knitters-accent: #FEF0ED;
--knitters-destructive: #FF4242;
--knitters-border: #E5E5E5;
--knitters-input: #E5E5E5;
--knitters-ring: #F72E00;
--knitters-radius: 8px;
--knitters-font-sans: Pretendard;
--knitters-web-header-height: 72px;
--knitters-web-control-height: 44px;
--knitters-web-page-max-width: 1180px;
--knitters-web-page-padding: 32px;
--knitters-web-card-radius: 16px;
--content-canvas: #FDFCF8;
--content-card: #FFF5F2;
--content-neutral: #5E5E5E;
--content-on-primary: #FFFFFF;
--content-primary-text: #2A0B04;
--content-surface: #FFFFFF;
--content-marketing-action-shadow: 0 14px 34px rgba(247, 46, 0, 0.18);
--content-marketing-action-hover-shadow: 0 20px 42px rgba(247, 46, 0, 0.24);
--content-marketing-accent-chip-shadow: 0 8px 24px rgba(247, 46, 0, 0.10);
}

.marketing-action {
  position: relative;
  display: inline-flex;
  min-width: 0;
  min-height: var(--marketing-action-height, 52px);
  align-items: center;
  justify-content: center;
  padding: 0 var(--marketing-action-padding, 20px);
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--marketing-action-radius, 999px);
  isolation: isolate;
  color: var(--marketing-action-ink, currentColor);
  background: transparent;
  font: inherit;
  font-size: var(--marketing-action-font-size, 16px);
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.marketing-action__content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--marketing-action-content-gap, 12px);
}

.marketing-action__leading-icon,
.marketing-action__trailing-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
}

.marketing-action__trailing-icon {
  transition: transform 180ms ease;
}

.marketing-action--compact {
  --marketing-action-height: 44px;
  --marketing-action-padding: 16px;
  --marketing-action-font-size: 13px;
}

.marketing-action--primary {
  color: var(--marketing-action-on-accent);
  background: var(--marketing-action-accent);
  box-shadow: var(--marketing-action-shadow);
}

.marketing-action--primary:hover,
.marketing-action--primary:focus-visible {
  box-shadow: var(--marketing-action-shadow-hover);
  transform: translateY(-3px);
}

.marketing-action--fill {
  border-color: var(--marketing-action-accent);
  color: var(--marketing-action-accent-text);
  background: var(--marketing-action-surface);
}

.marketing-action--fill::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--marketing-action-accent);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.marketing-action--fill:hover,
.marketing-action--fill:focus-visible {
  color: var(--marketing-action-on-accent);
  box-shadow: var(--marketing-action-shadow-hover);
  transform: translateY(-3px);
}

.marketing-action--fill:hover::before,
.marketing-action--fill:focus-visible::before {
  transform: scaleX(1);
}

.marketing-action--soft {
  border-width: 1px;
  border-color: var(--marketing-action-line);
  color: var(--marketing-action-accent-text);
  background: var(--marketing-action-soft);
}

.marketing-action--soft:hover,
.marketing-action--soft:focus-visible {
  border-color: var(--marketing-action-accent);
  box-shadow: var(--marketing-action-soft-shadow);
  transform: translateY(-2px);
}

.marketing-action--inset {
  border-width: 1px;
  border-color: var(--marketing-action-accent);
  color: var(--marketing-action-accent-text);
  background: var(--marketing-action-surface);
  box-shadow: inset 0 0 0 4px var(--marketing-action-soft);
}

.marketing-action--inset:hover,
.marketing-action--inset:focus-visible {
  box-shadow:
    inset 0 0 0 1px var(--marketing-action-accent),
    var(--marketing-action-soft-shadow);
  transform: translateY(-2px);
}

.marketing-action--text {
  min-height: 44px;
  padding: 0 12px;
  border-width: 0;
  color: var(--marketing-action-muted);
}

.marketing-action--text:hover,
.marketing-action--text:focus-visible {
  color: var(--marketing-action-accent-text);
  transform: translateY(-2px);
}

.marketing-action:hover .marketing-action__trailing-icon,
.marketing-action:focus-visible .marketing-action__trailing-icon {
  transform: translateX(2px);
}

.marketing-action--dark.marketing-action--fill {
  border-color: color-mix(
    in srgb,
    var(--marketing-action-on-dark) 56%,
    transparent
  );
  color: var(--marketing-action-on-dark);
  background: transparent;
}

.marketing-action--dark.marketing-action--fill::before {
  background: var(--marketing-action-on-dark);
}

.marketing-action--dark.marketing-action--fill:hover,
.marketing-action--dark.marketing-action--fill:focus-visible {
  color: var(--marketing-action-dark);
}

.marketing-action:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .marketing-action,
  .marketing-action::before,
  .marketing-action__trailing-icon {
    transition-duration: 1ms;
  }
}


.brand {
  align-items: center;
  color: var(--landing-accent, var(--knitters-primary));
  display: inline-flex;
  font-size: clamp(25px, 2vw, 32px);
  line-height: 1;
  text-decoration: none;
  width: max-content;
}

.brand__wordmark {
  background: currentColor;
  display: block;
  height: 1em;
  mask: url("/assets/images/knitters-wordmark.7099e3a88406.svg") center / contain no-repeat;
  width: 4.507em;
  -webkit-mask: url("/assets/images/knitters-wordmark.7099e3a88406.svg") center / contain no-repeat;
}

.site-footer {
  background: var(--landing-surface, var(--knitters-background));
  color: var(--landing-muted, var(--content-neutral));
  contain-intrinsic-size: auto 720px;
  font-size: 13px;
  padding: 0 clamp(24px, 5vw, 80px) 40px;
  scroll-snap-align: end;
  scroll-snap-stop: always;
}

.site-footer__inner {
  display: grid;
  margin: 0 auto;
  max-width: 1440px;
  width: 100%;
}

.site-footer__cta {
  border-bottom: 1px solid var(--landing-line-soft, var(--knitters-border));
  display: grid;
  justify-items: center;
  padding: clamp(64px, 8vw, 104px) 0 clamp(56px, 7vw, 88px);
  text-align: center;
}

.site-footer__eyebrow {
  color: var(--landing-accent-text, var(--content-primary-text));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 24px;
}

.site-footer__cta h2 {
  color: var(--landing-ink-strong, var(--knitters-foreground));
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.12;
  margin: 0;
  max-width: 880px;
  text-wrap: balance;
}

.site-footer__cta > p:not(.site-footer__eyebrow) {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
  margin: 24px 0 0;
  max-width: 660px;
}

.site-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

.site-footer__actions .marketing-action {
  width: 224px;
}

.brand--footer {
  font-size: 30px;
  justify-self: center;
  margin-top: clamp(48px, 6vw, 72px);
}

.site-footer__primary-links ul,
.site-footer__story-links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__primary-links ul {
  gap: 8px clamp(20px, 2.4vw, 36px);
  margin-top: 28px;
}

.site-footer__primary-links a {
  align-items: center;
  color: var(--landing-ink, var(--knitters-foreground));
  display: inline-flex;
  font-size: 15px;
  font-weight: 600;
  min-height: 44px;
  text-decoration: none;
}

.site-footer__story-links {
  margin-top: 28px;
  text-align: center;
}

.site-footer__story-links h2 {
  color: var(--landing-muted, var(--content-neutral));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
}

.site-footer__story-links ul {
  gap: 4px 20px;
  margin-top: 8px;
}

.site-footer__story-links a {
  align-items: center;
  color: var(--landing-muted, var(--content-neutral));
  display: inline-flex;
  font-size: 13px;
  font-weight: 500;
  min-height: 44px;
  text-decoration: none;
}

.site-footer__bottom {
  align-items: center;
  border-top: 1px dashed var(--landing-line, var(--knitters-border));
  color: var(--landing-muted, var(--content-neutral));
  display: flex;
  justify-content: space-between;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
}

.site-footer__social-links {
  display: flex;
  gap: 8px;
}

.site-footer__social-links a {
  border-radius: 50%;
  color: var(--landing-muted, var(--content-neutral));
  display: grid;
  height: 44px;
  place-items: center;
  transition: color 180ms ease, background-color 180ms ease;
  width: 44px;
}

.site-footer__social-links a:hover {
  background: var(--landing-accent-soft, var(--knitters-accent));
  color: var(--landing-accent-text, var(--content-primary-text));
}

.site-footer a:not(.marketing-action) {
  text-underline-offset: 4px;
}

.site-footer__primary-links a:hover,
.site-footer__story-links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--landing-accent, var(--knitters-primary));
}

@media (min-width: 1560px) {
  .site-footer {
    padding-left: max(80px, calc((100vw - 1440px) / 2 + 48px));
    padding-right: max(80px, calc((100vw - 1440px) / 2 + 48px));
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding: 0 20px 24px;
  }

  .site-footer__cta {
    padding: 64px 0 48px;
  }

  .site-footer__cta h2 {
    font-size: clamp(36px, 10.5vw, 48px);
  }

  .site-footer__actions {
    width: 100%;
  }

  .site-footer__actions .marketing-action {
    width: min(100%, 312px);
  }

  .site-footer__primary-links ul {
    gap: 0 16px;
  }

  .site-footer__story-links ul {
    align-items: center;
    flex-direction: column;
    gap: 0;
  }
}


@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Pretendard-Medium.68613a0cd1be.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Pretendard-SemiBold.b594ec6f8a39.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Pretendard-Bold.ee55b7f4ca1f.woff2") format("woff2");
}

* {
  box-sizing: border-box;
}

html {
  background: var(--knitters-background);
  color: var(--knitters-foreground);
  font-family: var(--knitters-font-sans), -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", system-ui, sans-serif;
  line-height: 1.65;
  font-weight: 500;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
}

a {
  color: inherit;
}

.content-page {
  --marketing-action-accent: var(--knitters-primary);
  --marketing-action-accent-text: var(--content-primary-text);
  --marketing-action-dark: var(--knitters-foreground);
  --marketing-action-ink: var(--knitters-foreground);
  --marketing-action-line: var(--knitters-border);
  --marketing-action-muted: var(--content-neutral);
  --marketing-action-on-accent: var(--knitters-foreground);
  --marketing-action-on-dark: var(--knitters-background);
  --marketing-action-shadow: var(--content-marketing-action-shadow);
  --marketing-action-shadow-hover: var(--content-marketing-action-hover-shadow);
  --marketing-action-soft: var(--knitters-accent);
  --marketing-action-soft-shadow: var(--content-marketing-accent-chip-shadow);
  --marketing-action-surface: var(--knitters-background);
}

a:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--knitters-ring);
  outline-offset: 4px;
}

.content-page__skip {
  background: var(--knitters-foreground);
  color: var(--knitters-background);
  left: 16px;
  padding: 12px 16px;
  position: fixed;
  top: -80px;
  z-index: 10;
}

.content-page__skip:focus {
  top: 16px;
}

.content-page__header {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--knitters-web-page-max-width);
  padding-left: var(--knitters-web-page-padding);
  padding-right: var(--knitters-web-page-padding);
}

.legal-page {
  --legal-accent: var(--knitters-primary);
  --legal-canvas: var(--content-canvas);
  --legal-ink: var(--knitters-foreground);
  --legal-muted: var(--content-neutral);
  --legal-line: var(--knitters-border);
  --legal-soft: var(--knitters-accent);
  --legal-surface: var(--content-surface);
  --marketing-action-accent: var(--legal-accent);
  --marketing-action-accent-text: var(--content-primary-text);
  --marketing-action-dark: var(--legal-ink);
  --marketing-action-ink: var(--legal-ink);
  --marketing-action-line: var(--legal-line);
  --marketing-action-muted: var(--legal-muted);
  --marketing-action-on-accent: var(--knitters-background);
  --marketing-action-shadow: var(--content-marketing-action-shadow);
  --marketing-action-shadow-hover: var(--content-marketing-action-hover-shadow);
  --marketing-action-soft: var(--legal-soft);
  --marketing-action-soft-shadow: var(--content-marketing-accent-chip-shadow);
  --marketing-action-surface: var(--legal-canvas);
  background: var(--legal-canvas);
  color: var(--legal-ink);
  min-height: 100vh;
}

.legal-page__skip {
  background: var(--legal-ink);
  color: var(--legal-canvas);
  left: 16px;
  padding: 12px 16px;
  position: fixed;
  top: -80px;
  z-index: 10;
}

.legal-page__skip:focus { top: 16px; }

.legal-page__header {
  align-items: center;
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--legal-canvas) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--legal-line) 75%, transparent);
  display: flex;
  gap: 28px;
  justify-content: space-between;
  min-height: var(--knitters-web-header-height);
  padding: 0 clamp(24px, 5vw, 80px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.legal-page__brand {
  flex-shrink: 0;
}

.legal-page__document-nav {
  align-items: center;
  display: flex;
  gap: clamp(12px, 2vw, 28px);
}

.legal-page__document-nav a {
  color: var(--legal-muted);
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  padding: 12px 0;
  text-decoration: none;
}

.legal-page__document-nav a[aria-current="page"] {
  color: var(--legal-ink);
  text-decoration: underline 2px var(--legal-accent);
  text-underline-offset: 7px;
}

.legal-page__article {
  margin: 0 auto;
  max-width: 1240px;
  padding: clamp(64px, 8vw, 112px) clamp(24px, 5vw, 80px) 96px;
}

.legal-page__hero { max-width: 880px; }

.legal-page__eyebrow {
  color: var(--content-primary-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  margin: 0 0 16px;
}

.legal-page__hero h1 {
  font-size: clamp(40px, 6vw, 68px);
  letter-spacing: -0.06em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

.legal-page__intro {
  color: var(--legal-muted);
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: -0.02em;
  line-height: 1.65;
  margin: 24px 0 0;
}

.legal-page__document-meta {
  align-items: end;
  background: color-mix(in srgb, var(--legal-surface) 88%, transparent);
  border: 1px solid var(--legal-line);
  border-radius: var(--knitters-web-card-radius);
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  justify-content: space-between;
  margin-top: 36px;
  padding: 20px 24px;
}

.legal-page__document-meta label { display: grid; gap: 7px; }
.legal-page__document-label,
.legal-page__document-meta dt {
  color: var(--content-primary-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.legal-page__version-select {
  display: inline-grid;
  position: relative;
}

.legal-page__document-meta select {
  appearance: none;
  background: var(--legal-canvas);
  border: 1px solid var(--legal-line);
  border-radius: 8px;
  color: var(--legal-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  min-height: 44px;
  padding: 0 48px 0 16px;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.legal-page__document-meta select:hover {
  border-color: var(--legal-muted);
}

.legal-page__document-meta select:focus-visible {
  border-color: var(--content-primary-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--content-primary-text) 18%, transparent);
  outline: none;
}

.legal-page__version-select-icon {
  color: var(--legal-muted);
  pointer-events: none;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.legal-page__document-meta dl { display: flex; gap: 24px; margin: 0; }
.legal-page__document-meta dl > div { display: grid; gap: 4px; }
.legal-page__document-meta dd { color: var(--legal-ink); font-size: 14px; margin: 0; }

.legal-page .legal-document {
  gap: clamp(48px, 8vw, 104px);
  grid-template-columns: minmax(196px, 240px) minmax(0, 760px);
  margin-top: clamp(56px, 7vw, 88px);
}

.legal-page .legal-document__toc { top: calc(var(--knitters-web-header-height) + 32px); }
.legal-document__toc-mobile { display: none; }

.legal-page .legal-document__toc a {
  min-height: 36px;
  padding: 8px 0 8px 14px;
}

.legal-page .legal-document__body > section { scroll-margin-top: calc(var(--knitters-web-header-height) + 32px); }
.legal-page .legal-document__notice {
  border: 1px solid color-mix(in srgb, var(--legal-accent) 30%, var(--legal-line));
  border-left: 4px solid var(--legal-accent);
}

.legal-page__related {
  background: var(--legal-soft);
  border-radius: var(--knitters-web-card-radius);
  margin: 96px 0 0 auto;
  max-width: 720px;
  padding: 28px;
}

.legal-page__cta {
  margin: 48px 0 0 auto;
  max-width: 720px;
}

.legal-page__related h2 { font-size: 22px; letter-spacing: -0.04em; margin: 0 0 16px; }
.legal-page__related ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.legal-page__related a { color: var(--content-primary-text); font-weight: 600; text-underline-offset: 4px; }

.content-page__header {
  border-bottom: 1px solid var(--knitters-border);
  min-height: var(--knitters-web-header-height);
}

.content-page__brand {
  color: var(--content-primary-text);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.content-page__nav {
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 24px;
}

.content-page__nav a {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.content-page__nav a[aria-current="page"] {
  color: var(--content-primary-text);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}

.content-page__article {
  margin: 0 auto;
  max-width: 820px;
  padding: clamp(64px, 9vw, 112px) var(--knitters-web-page-padding) 96px;
}

.content-page__breadcrumb {
  color: var(--content-neutral);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.content-page__breadcrumb ol {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-page__breadcrumb a {
  color: var(--content-primary-text);
  font-weight: 600;
  text-underline-offset: 4px;
}

.content-page__breadcrumb [aria-current="page"] {
  color: var(--knitters-foreground);
  font-weight: 600;
}

.content-page__breadcrumb-separator {
  color: var(--knitters-muted-foreground);
}

.content-page--legal .content-page__article {
  max-width: 1120px;
}

.content-page__hero {
  max-width: 760px;
}

.content-page__eyebrow {
  color: var(--content-primary-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 16px;
}

.content-page__hero h1 {
  color: var(--knitters-foreground);
  font-size: clamp(38px, 7vw, 68px);
  letter-spacing: -0.055em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

.content-page__intro {
  color: var(--content-neutral);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.65;
  margin: 28px 0 0;
  max-width: 680px;
}

.content-page__byline {
  align-items: center;
  color: var(--content-neutral);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 8px;
  margin: 20px 0 0;
}

.content-page__figure {
  background: var(--knitters-muted);
  border-radius: var(--knitters-web-card-radius);
  margin: 48px 0 56px;
  overflow: hidden;
}

.content-page__figure img {
  aspect-ratio: 16 / 10;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.content-page__body {
  margin-top: 64px;
  max-width: 680px;
}

.content-page__figure + .content-page__body {
  margin-top: 0;
}

.content-page__body section + section {
  border-top: 1px solid var(--knitters-border);
  margin-top: 48px;
  padding-top: 48px;
}

.content-page__body h2,
.content-page__related h2 {
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing: -0.04em;
  line-height: 1.3;
  margin: 0 0 16px;
}

.content-page__body p,
.content-page__body li,
.content-page__faq dd {
  color: var(--content-neutral);
  font-size: 17px;
  letter-spacing: -0.012em;
  line-height: 1.8;
}

.content-page__body p {
  margin: 0;
}

.content-page__body p + p {
  margin-top: 16px;
}

.content-page__faq dl {
  margin: 0;
}

.content-page__faq dl > div {
  border-top: 1px solid var(--knitters-border);
  padding: 24px 0;
}

.content-page__faq dt {
  font-size: 18px;
  font-weight: 700;
}

.content-page__faq dd {
  margin: 8px 0 0;
}

.content-page__source {
  background: var(--knitters-accent);
  border-radius: var(--knitters-web-card-radius);
  margin-top: 48px !important;
  padding: 20px;
}

.content-page__source a {
  color: var(--content-primary-text);
  font-weight: 600;
}

.content-page__cta {
  margin-top: 48px;
}

.content-page__document-status {
  color: var(--content-primary-text);
  font-weight: 700;
}

.legal-document {
  align-items: start;
  display: grid;
  gap: clamp(40px, 7vw, 88px);
  grid-template-columns: minmax(164px, 200px) minmax(0, 680px);
  margin-top: 64px;
}

.legal-document__toc {
  position: sticky;
  top: 32px;
}

.legal-document__toc > p {
  color: var(--content-primary-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 16px;
}

.legal-document__toc nav {
  display: grid;
  gap: 6px;
}

.legal-document__toc a {
  border-left: 1px solid var(--knitters-border);
  color: var(--content-neutral);
  font-size: 14px;
  line-height: 1.45;
  padding: 7px 0 7px 12px;
  text-decoration: none;
}

.legal-document__toc a > span {
  color: var(--content-primary-text);
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.legal-document__toc a:hover,
.legal-document__toc a:focus-visible {
  border-left-color: var(--content-primary-text);
  color: var(--knitters-foreground);
}

.legal-document__body {
  min-width: 0;
}

.legal-document__body > section {
  scroll-margin-top: 32px;
}

.legal-document__body > section + section {
  border-top: 1px solid var(--knitters-border);
  margin-top: 48px;
  padding-top: 48px;
}

.legal-document__chapter {
  align-items: baseline;
  border-bottom: 1px solid var(--legal-line);
  border-top: 2px solid var(--legal-ink);
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
  padding: 16px 0;
}

.legal-document__chapter > span {
  color: var(--content-primary-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.legal-document__chapter > strong {
  color: var(--legal-ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.legal-document__body h2 {
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing: -0.04em;
  line-height: 1.3;
  margin: 0 0 16px;
}

.legal-document__body .legal-document__article-heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 20px;
}

.legal-document__article-heading > span:first-child {
  color: var(--content-primary-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.legal-document__article-heading > span:last-child {
  color: var(--legal-ink);
  font-size: clamp(23px, 3.3vw, 29px);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.legal-document__body p,
.legal-document__body li {
  color: var(--content-neutral);
  font-size: 17px;
  letter-spacing: -0.012em;
  line-height: 1.8;
}

.legal-document__body p {
  margin: 0;
}

.legal-document__body p + p {
  margin-top: 16px;
}

.legal-document__notice-stack {
  margin-bottom: 64px;
}

.legal-document__notice {
  background: var(--knitters-accent);
  border-radius: var(--knitters-web-card-radius);
  padding: 24px;
}

.legal-document__notice > p:first-child {
  color: var(--content-primary-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.legal-document__notice > p:last-child {
  color: var(--knitters-foreground);
  font-size: 15px;
  line-height: 1.75;
}

.legal-document__status:not(:empty) {
  background: var(--knitters-accent);
  border-radius: var(--knitters-web-card-radius);
  color: var(--knitters-foreground);
  font-size: 15px;
  line-height: 1.75;
  margin: 16px 0 0;
  padding: 16px 20px;
}

.legal-document__overview {
  margin-bottom: 72px;
  scroll-margin-top: calc(var(--knitters-web-header-height) + 32px);
}

.legal-document__overview-eyebrow {
  color: var(--content-primary-text) !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.1em !important;
  margin-bottom: 8px !important;
}

.legal-document__overview h2 {
  font-size: clamp(28px, 4vw, 36px);
  margin-bottom: 12px;
}

.legal-document__overview-intro {
  max-width: 680px;
}

.legal-document__overview-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.legal-document__overview-grid > li {
  background: var(--legal-surface);
  border: 1px solid var(--legal-line);
  border-radius: var(--knitters-web-card-radius);
  column-gap: 16px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 20px;
}

.legal-document__overview-icon {
  align-items: center;
  background: var(--legal-soft);
  border-radius: 50%;
  color: var(--content-primary-text);
  display: inline-flex;
  grid-row: 1 / span 3;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.legal-document__overview-label {
  color: var(--legal-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.legal-document__overview-grid strong {
  color: var(--legal-ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.35;
  margin-top: 4px;
}

.legal-document__overview-detail {
  color: var(--legal-muted);
  font-size: 13px;
  line-height: 1.55;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.legal-document__process {
  background: var(--legal-surface);
  border: 1px solid var(--legal-line);
  border-radius: var(--knitters-web-card-radius);
  margin-top: 20px;
  overflow: hidden;
  padding: 24px;
}

.legal-document__process h3 {
  color: var(--legal-ink);
  font-size: 16px;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.legal-document__process ol {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.legal-document__process ol::before {
  border-top: 2px dotted color-mix(in srgb, var(--legal-accent) 58%, transparent);
  content: "";
  left: 7%;
  position: absolute;
  right: 7%;
  top: 22px;
}

.legal-document__process li {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  text-align: center;
}

.legal-document__process-icon {
  align-items: center;
  background: var(--legal-soft);
  border: 1px solid color-mix(in srgb, var(--legal-accent) 32%, var(--legal-line));
  border-radius: 50%;
  color: var(--content-primary-text);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
  z-index: 1;
}

.legal-document__process strong {
  color: var(--legal-ink);
  font-size: 14px;
  line-height: 1.45;
  margin-top: 12px;
}

.legal-document__process li > span:last-child {
  color: var(--legal-muted);
  font-size: 12px;
  line-height: 1.55;
  margin-top: 6px;
}

.legal-document__table-card {
  background: var(--legal-surface);
  border: 1px solid var(--knitters-border);
  border-radius: var(--knitters-web-card-radius);
  margin-top: 24px;
  max-width: 100%;
}

.legal-document__table-caption {
  color: var(--content-primary-text);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  padding: 18px 20px;
}

.legal-document__table-instruction {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.legal-document__table-region {
  border-radius: 0 0 var(--knitters-web-card-radius) var(--knitters-web-card-radius);
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.legal-document__table-card:has(.legal-document__table-region:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--content-primary-text) 24%, transparent);
  outline-offset: 3px;
}

.legal-document__table-region:focus-visible {
  outline: none;
}

.legal-document__table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1180px;
  width: 100%;
}

.legal-document__table--compact {
  min-width: 680px;
}

.legal-document__table th,
.legal-document__table td {
  border-top: 1px solid var(--knitters-border);
  color: var(--content-neutral);
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1.65;
  padding: 16px;
  text-align: left;
  vertical-align: top;
}

.legal-document__table thead th {
  background: var(--knitters-accent);
  color: var(--content-primary-text);
  font-weight: 700;
  white-space: nowrap;
}

.legal-document__table thead th:first-child {
  box-shadow: 1px 0 0 var(--legal-line);
  left: 0;
  position: sticky;
  z-index: 3;
}

.legal-document__table tbody th {
  background: var(--legal-surface);
  box-shadow: 1px 0 0 var(--legal-line);
  color: var(--knitters-foreground);
  font-weight: 700;
  left: 0;
  min-width: 180px;
  position: sticky;
  z-index: 2;
}

.legal-document__table td {
  min-width: 150px;
}

.content-page__related {
  background: var(--knitters-accent);
  border-radius: var(--knitters-web-card-radius);
  margin-top: 88px;
  padding: 28px;
}

.content-page__related h2 {
  font-size: 22px;
}

.content-page__related ul {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-page__related a {
  color: var(--content-primary-text);
  font-weight: 600;
  text-underline-offset: 4px;
}

@media (max-width: 560px) {
  .legal-page__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    padding-bottom: 8px;
    padding-top: 12px;
  }

  .legal-page__document-nav {
    justify-content: space-between;
    width: 100%;
  }

  .legal-page__document-nav a { font-size: 13px; }

  .legal-page__article { padding-bottom: 64px; }
  .legal-page__hero h1 { font-size: clamp(36px, 11vw, 48px); }
  .legal-page__document-meta { align-items: stretch; padding: 18px; }
  .legal-page__document-meta label { width: 100%; }
  .legal-page__version-select { width: 100%; }
  .legal-page__document-meta select { width: 100%; }
  .legal-page__document-meta dl { justify-content: space-between; width: 100%; }

  .legal-page .legal-document {
    display: block;
    margin-top: 48px;
  }

  .legal-page .legal-document__toc { display: none; }

  .legal-document__toc-mobile {
    background: var(--legal-soft);
    border: 1px solid var(--legal-line);
    border-radius: var(--knitters-web-card-radius);
    display: block;
    margin-bottom: 32px;
    padding: 0 16px;
  }

  .legal-document__toc-mobile summary {
    color: var(--legal-ink);
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    min-height: 52px;
    padding-top: 15px;
  }

  .legal-document__toc-mobile nav { display: grid; gap: 2px; padding: 4px 0 16px; }
  .legal-document__toc-mobile a { color: var(--legal-muted); font-size: 14px; padding: 9px 0; text-decoration: none; }
  .legal-document__toc-mobile a:hover, .legal-document__toc-mobile a:focus-visible { color: var(--legal-ink); text-decoration: underline; }

  .legal-document__notice-stack {
    margin-bottom: 48px;
  }

  .legal-document__overview {
    margin-bottom: 56px;
  }

  .legal-document__overview-grid {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .legal-document__overview-grid > li {
    padding: 16px;
  }

  .legal-document__process {
    padding: 20px;
  }

  .legal-document__process ol {
    gap: 0;
    grid-template-columns: 1fr;
  }

  .legal-document__process ol::before {
    border-left: 2px dotted color-mix(in srgb, var(--legal-accent) 58%, transparent);
    border-top: 0;
    bottom: 24px;
    left: 21px;
    right: auto;
    top: 24px;
  }

  .legal-document__process li {
    align-items: start;
    display: grid;
    gap: 2px 12px;
    grid-template-columns: 44px minmax(0, 1fr);
    padding-bottom: 20px;
    text-align: left;
  }

  .legal-document__process li:last-child {
    padding-bottom: 0;
  }

  .legal-document__process-icon {
    grid-row: 1 / span 2;
  }

  .legal-document__process strong {
    margin-top: 2px;
  }

  .legal-document__process li > span:last-child {
    margin-top: 2px;
  }

  .legal-page__related { margin-top: 64px; padding: 24px 20px; }

  .content-page__header {
    min-height: 64px;
  }

  .content-page__nav {
    gap: 16px;
  }

  .content-page__article {
    padding-bottom: 64px;
  }

  .content-page__hero h1 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .content-page__figure {
    border-radius: 12px;
    margin: 40px 0 48px;
  }

  .content-page__body p,
  .content-page__body li,
  .content-page__faq dd {
    font-size: 16px;
  }

  .content-page__related {
    margin-top: 64px;
    padding: 24px 20px;
  }

  .legal-document {
    gap: 32px;
    grid-template-columns: 1fr;
    margin-top: 48px;
  }

  .legal-document__toc {
    position: static;
  }

  .legal-document__toc nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .legal-document__toc a {
    border: 1px solid var(--knitters-border);
    border-radius: 999px;
    font-size: 13px;
    padding: 7px 12px;
  }

  .legal-document__body > section + section {
    margin-top: 40px;
    padding-top: 40px;
  }

  .legal-document__body p,
  .legal-document__body li {
    font-size: 16px;
  }

  .legal-document__notice {
    padding: 20px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}