.survey-guide-page { background: var(--figma-canvas); color: var(--figma-copy); --survey-accent: #344dc7; }
html[data-bs-theme="dark"] .survey-guide-page { --survey-accent: #adbaff; }
html[data-bs-theme="dark"] body.survey-guide-page { background: var(--figma-canvas); }
.survey-guide-page .btn-get-started { background: linear-gradient(90deg, var(--figma-sky), var(--figma-blue)); color: #fff; border: 0; box-shadow: 4px 4px 5px rgb(52 118 240 / 25%) !important; }
.survey-container { max-width: 1288px; margin: 100px auto 0; padding: 80px 24px; }
.survey-container.survey-guide-list { margin-top: 0; padding-top: 60px; }
.survey-guide-page a:not(.btn) { color: var(--survey-accent); text-underline-offset: .2em; }
.survey-guide-page .navbar a:not(.btn), .survey-guide-page .site-footer a { color: inherit; }
.survey-guide-page :focus-visible { outline: 3px solid var(--figma-blue-light); outline-offset: 4px; }
.survey-heading { margin-bottom: 40px; }
.survey-heading h1 { color: var(--figma-ink); font-size: 48px; font-weight: 700; line-height: 1.18; letter-spacing: -.035em; margin: 0 0 24px; overflow-wrap: anywhere; }
.survey-lead { font-size: 19px; line-height: 1.85; color: var(--figma-muted); margin: 0; }
.survey-eyebrow { color: var(--figma-muted); font-size: 14px; font-weight: 600; line-height: 22px; }
.survey-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.survey-card { background: var(--figma-deep-surface); border: 1px solid var(--survey-border, var(--figma-border)); border-radius: 20px; min-height: 224px; }
.survey-card-main { display: flex; flex-direction: column; height: 100%; padding: 24px; gap: 12px; border-radius: inherit; text-decoration: none; }
.survey-card-main:hover { background: var(--figma-panel); }
.survey-guide-page .survey-card-main:focus-visible { outline: 2px solid var(--survey-accent); outline-offset: -2px; }
.survey-card h2 { font-size: 24px; line-height: 1.35; letter-spacing: -.035em; font-weight: 700; color: var(--figma-ink); margin: 0; }
.survey-card p { color: var(--figma-muted); font-size: 16px; line-height: 1.85; margin: 0; }
.survey-card .survey-eyebrow { color: var(--survey-accent); font-size: 14px; line-height: 22px; }
.survey-read { margin-top: auto; font-size: 16px; line-height: 1.85; font-weight: 600; }
.survey-list-start { margin-top: 32px; }
.survey-list-start h2 { font-size: 19px; line-height: 1.85; font-weight: 400; color: var(--figma-ink); }
.survey-list-start p { color: var(--figma-muted); margin: 12px 0 20px; }
html[data-bs-theme="dark"] .survey-guide-page { --survey-border: #304158; }
.survey-operation-link { margin-top: 40px; padding: 24px; background: var(--figma-panel); border-radius: 12px; font-size: 16px; line-height: 1.85; }
.survey-operation-link p { margin-bottom: 8px; }
.survey-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; font-size: 14px; line-height: 22px; color: var(--figma-muted); }
.survey-document { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 104px; align-items: start; }
.survey-toc { position: sticky; top: 124px; background: var(--figma-panel); padding: 20px; border-radius: 12px; }
.survey-toc h2 { font-size: 16px; font-weight: 400; margin: 0 0 14px; }
.survey-toc ol { display: grid; gap: 14px; padding-left: 20px; margin: 0; font-size: 14px; line-height: 22px; }
.survey-toc a { font-weight: 600; text-decoration: none; }
.survey-article { min-width: 0; font-size: 16px; line-height: 1.85; }
.survey-article section { margin-bottom: 40px; scroll-margin-top: 124px; }
.survey-article h2 { font-size: 26px; line-height: 1.25; letter-spacing: -.035em; color: var(--figma-ink); font-weight: 700; margin: 0 0 14px; }
.survey-article h3 { font-size: 19px; line-height: 1.85; font-weight: 700; color: var(--figma-copy); margin: 0 0 10px; }
.survey-article p { margin: 0 0 14px; }
.survey-panel, .survey-start { background: var(--figma-panel); border-radius: 16px; padding: 24px; }
.survey-panel dl { margin: 0; }
.survey-panel dl div { display: flex; gap: 16px; }
.survey-panel dt { min-width: 4em; font-weight: 600; }
.survey-panel dd { margin: 0; }
.survey-roles { display: grid; gap: 14px; margin: 0; }
.survey-roles > div { display: grid; grid-template-columns: 238px minmax(0, 1fr); gap: 12px; }
.survey-roles dt, .survey-team-panel h3 { font-size: 19px; line-height: 1.85; font-weight: 400; color: var(--figma-ink); }
.survey-roles dd, .survey-team-panel { color: var(--figma-muted); }
.survey-team-panel { margin-bottom: 14px; }
.survey-team-panel p:last-child { margin-bottom: 0; }
.survey-checklist { list-style: none; padding: 0; margin: 0; }
.survey-checklist li { position: relative; padding-left: 1.5em; }
.survey-checklist li::before { content: "□"; position: absolute; left: 0; }
.survey-team-panel dl div { align-items: baseline; }
.survey-team-panel dt { min-width: 8em; }
.survey-back { display: block; margin-top: 24px; font-size: 14px; font-weight: 600; }
.survey-questions { list-style: none; padding: 0; counter-reset: question; }
.survey-questions li { padding: 20px; border-radius: 12px; counter-increment: question; margin-bottom: 0; }
.survey-questions li:nth-child(odd) { background: var(--figma-panel); }
.survey-questions h3::before { content: counter(question, decimal-leading-zero) "  "; white-space: pre; }
.survey-questions p { font-size: 14px; line-height: 22px; font-weight: 600; color: var(--figma-muted); margin: 0; }
.survey-links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 16px 0; font-size: 14px; font-weight: 600; }
.survey-results { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.survey-results th { font-weight: 400; width: 4em; }
.survey-results td:last-child { width: 4em; text-align: right; }
.survey-result-track { display: block; background: var(--figma-panel); height: 18px; border-radius: 4px; }
.survey-result-bar { display: block; height: 100%; border-radius: 4px; background: var(--figma-blue); }
.survey-result-bar.is-low { background: #b6c6e0; }
.survey-result-summary { margin-top: 14px; }
.survey-result-summary strong { display: block; color: var(--figma-ink); font-size: 19px; margin-bottom: 12px; }
.survey-faq h3 { font-size: 16px; margin-bottom: 4px; }
.survey-related { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; font-weight: 600; }
.survey-article .guide-figure { margin: 24px 0; }
.survey-team-figure { width: 780px; max-width: 100%; }
.survey-article .guide-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--figma-border); border-radius: 12px; }
.survey-article .guide-figure figcaption { margin-top: 10px; color: var(--figma-muted); font-size: 14px; line-height: 22px; }
.survey-skip { position: fixed; top: -100px; left: 16px; z-index: 1100; background: var(--figma-canvas); padding: 12px; }
.survey-skip:focus { top: 16px; }
@media (max-width: 1199.98px) {
  .survey-container { margin-top: 80px; }
  .survey-document { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  .survey-card-grid { gap: 24px; }
}
@media (max-width: 767.98px) {
  .survey-container.survey-guide-list { padding-top: 40px; }
  .survey-container { padding-top: 40px; padding-bottom: 40px; }
  .survey-heading h1 { font-size: 32px; line-height: 1.25; margin-bottom: 20px; }
  .survey-lead { font-size: 16px; }
  .survey-card-grid, .survey-document { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .survey-card { min-height: 272px; }
  .survey-card-main { padding: 20px; }
  .survey-card h2 { font-size: 24px; }
  .survey-toc { position: static; }
  .survey-breadcrumb { margin-bottom: 24px; gap: 8px; }
  .survey-article h2 { font-size: 24px; }
  .survey-panel, .survey-start { padding: 20px; }
  .survey-panel dl div { display: block; margin-bottom: 10px; }
  .survey-roles > div { grid-template-columns: minmax(0, 1fr); }
  .survey-questions li { padding: 16px; }
  .survey-article section { scroll-margin-top: 104px; }
}