.doc-hero { position: relative; overflow: clip; padding-block: clamp(68px, 9vw, 120px); color: var(--pp-night-text); background: var(--pp-night-frame); }
.doc-hero__inner { position: relative; z-index: 1; max-inline-size: 880px; }
.doc-hero h1 { margin-block-end: 22px; font-size: clamp(44px, 6.5vw, 78px); }
.doc-hero p { max-inline-size: 720px; color: var(--pp-night-muted); font-size: clamp(18px, 2vw, 22px); }
.doc-hero__orb { inset-inline-end: -14vw; inset-block-start: -62%; }

.guide-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(42px, 6vw, 78px); align-items: start; }
.guide-nav { position: sticky; inset-block-start: calc(var(--pp-header-height) + 24px); padding: 20px; border: 1px solid var(--pp-color-border); border-radius: var(--pp-radius-xl); background: var(--pp-color-surface); box-shadow: var(--pp-shadow-card); }
.guide-nav h2 { margin-block-end: 14px; font-size: 15px; letter-spacing: 0; }
.guide-nav ol { list-style: none; margin: 0; padding: 0; counter-reset: nav-step; }
.guide-nav li { counter-increment: nav-step; }
.guide-nav li + li { margin-block-start: 5px; }
.guide-nav a { min-block-size: 42px; display: grid; grid-template-columns: 24px 1fr; gap: 9px; align-items: center; padding: 7px 9px; border-radius: var(--pp-radius-sm); color: var(--pp-color-text-muted); font-size: 13px; text-decoration: none; }
.guide-nav a::before { content: counter(nav-step); inline-size: 23px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: var(--pp-color-brand-600); background: var(--pp-color-brand-50); font-size: 11px; font-weight: 900; }
.guide-nav a:hover { color: var(--pp-color-text); background: var(--pp-color-surface-subtle); }

.guide-content { min-inline-size: 0; }
.guide-step { position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 20px; padding-block: 0 64px; }
.guide-step::before { content: ""; position: absolute; inset-inline-start: 33px; inset-block: 58px 0; inline-size: 2px; background: var(--pp-color-brand-100); }
.guide-step:last-child::before { display: none; }
.guide-step__num { inline-size: 66px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--pp-color-brand-100); border-radius: var(--pp-radius-lg); color: var(--pp-color-brand-600); background: var(--pp-color-brand-50); font-size: 21px; font-weight: 900; }
.guide-step__body { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--pp-color-border); border-radius: var(--pp-radius-xl); background: var(--pp-color-surface); box-shadow: var(--pp-shadow-card); }
.guide-step h2 { margin-block-end: 12px; font-size: clamp(27px, 3vw, 36px); }
.guide-step h3 { margin-block-start: 30px; font-size: 21px; }
.guide-step p, .guide-step li { color: var(--pp-color-text-muted); }
.guide-step li + li { margin-block-start: 7px; }
.guide-screen { margin-block: 24px; padding: 16px; border: 1px solid var(--pp-color-border); border-radius: var(--pp-radius-lg); background: var(--pp-color-surface-subtle); }
.guide-screen__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 14px; color: var(--pp-color-text-muted); font-size: 12px; }
.guide-screen__surface { min-block-size: 150px; padding: 20px; border: 1px solid var(--pp-color-border); border-radius: var(--pp-radius-md); background: var(--pp-color-surface); }

.legal-hero { padding-block: clamp(48px, 7vw, 84px); border-block-end: 1px solid var(--pp-color-border); background: var(--pp-color-surface); }
.legal-hero h1 { max-inline-size: 900px; margin-block-end: 16px; font-size: clamp(38px, 5vw, 60px); }
.legal-hero p { max-inline-size: 760px; margin: 0; color: var(--pp-color-text-muted); }
.legal-shell { padding-block: clamp(48px, 7vw, 90px); }
.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 56px; align-items: start; }
.legal-content { max-inline-size: 820px; font-size: 17px; line-height: 1.85; }
.legal-content h2 { margin-block-start: 54px; margin-block-end: 16px; font-size: clamp(26px, 3vw, 34px); }
.legal-content h2:first-child { margin-block-start: 0; }
.legal-content h3 { margin-block-start: 34px; font-size: 21px; }
.legal-content p, .legal-content li { color: #34415e; }
.legal-content li + li { margin-block-start: 7px; }
.legal-content a { color: var(--pp-color-brand-600); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal-aside { position: sticky; inset-block-start: calc(var(--pp-header-height) + 24px); padding: 20px; border: 1px solid var(--pp-color-border); border-radius: var(--pp-radius-lg); background: var(--pp-color-surface); }
.legal-aside strong { display: block; margin-block-end: 10px; }
.legal-aside p { margin: 0; color: var(--pp-color-text-muted); font-size: 13px; }

.compare-hero { position: relative; overflow: clip; padding-block: clamp(66px, 9vw, 116px); color: var(--pp-night-text); background: var(--pp-night-frame); }
.compare-hero__inner { position: relative; z-index: 1; }
.compare-hero h1 { max-inline-size: 920px; margin-block-end: 22px; font-size: clamp(44px, 6.6vw, 80px); }
.compare-hero p { max-inline-size: 740px; color: var(--pp-night-muted); font-size: clamp(18px, 2vw, 22px); }
.comparison-wrap { overflow-x: auto; padding-block-end: 10px; }
.comparison-table { inline-size: 100%; min-inline-size: 900px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--pp-color-border); border-radius: var(--pp-radius-xl); overflow: hidden; background: var(--pp-color-surface); box-shadow: var(--pp-shadow-card); }
.comparison-table caption { padding-block-end: 18px; color: var(--pp-color-text-muted); text-align: start; caption-side: top; }
.comparison-table th, .comparison-table td { padding: 17px 16px; border-block-end: 1px solid var(--pp-color-border); border-inline-end: 1px solid var(--pp-color-border); text-align: center; vertical-align: middle; }
.comparison-table tr:last-child td, .comparison-table tr:last-child th { border-block-end: 0; }
.comparison-table th:last-child, .comparison-table td:last-child { border-inline-end: 0; }
.comparison-table thead th { position: sticky; inset-block-start: 0; z-index: 2; color: var(--pp-color-text); background: var(--pp-color-surface-subtle); font-size: 13px; }
.comparison-table tbody th { position: sticky; inset-inline-start: 0; z-index: 1; min-inline-size: 210px; color: var(--pp-color-text); background: var(--pp-color-surface); text-align: start; }
.comparison-table .is-postpro { color: var(--pp-color-text); background: var(--pp-color-brand-50); font-weight: 800; }
.comparison-table thead .is-postpro { color: #fff; background: var(--pp-color-brand-600); }
.comparison-table .yes { color: var(--pp-color-brand-700); font-weight: 900; }
.comparison-table .no { color: var(--pp-color-text-disabled); }
.comparison-table .partial { color: var(--pp-color-brand-700); font-weight: 800; }
.comparison-note { margin-block-start: 20px; color: var(--pp-color-text-muted); font-size: 13px; }
.comparison-note a { color: var(--pp-color-brand-600); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .guide-shell, .legal-layout { grid-template-columns: 1fr; }
  .guide-nav, .legal-aside { position: relative; inset-block-start: auto; }
  .guide-nav ol { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .legal-aside { grid-row: 1; }
}

@media (max-width: 767px) {
  .guide-nav ol { grid-template-columns: 1fr; }
  .guide-step { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding-block-end: 42px; }
  .guide-step::before { inset-inline-start: 22px; inset-block-start: 44px; }
  .guide-step__num { inline-size: 44px; border-radius: var(--pp-radius-md); font-size: 16px; }
  .guide-step__body { padding: 21px; border-radius: var(--pp-radius-lg); }
  .legal-content { font-size: 16px; }
  .comparison-wrap { margin-inline: -14px; padding-inline: 14px; }
}

@media print {
  .guide-shell, .legal-layout { display: block; }
  .guide-nav, .legal-aside { display: none; }
  .guide-step { display: block; padding-block-end: 28px; break-inside: avoid; }
  .guide-step::before, .guide-step__num { display: none; }
  .legal-content { max-inline-size: none; }
}