/* Public content screens: price list, buyer guide, licences and legal text. */
.content-page { gap: var(--space-8); }
.content-page .page-header { padding-block: var(--space-4); }
.content-page .page-h {
  font-family: var(--font-marketing); font-size: var(--type-h1); font-weight: 400;
  letter-spacing: -.035em;
}
.content-page .page-summary { max-width: 68ch; font-size: 17px; line-height: 1.65; }
.content-header-row { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); }
.content-header-row .page-header { flex: 1; }
.content-header-row > .btn { flex: none; margin-bottom: var(--space-4); }

/* ---------- pricing ---------- */
.pricing-disclosure {
  display: grid; gap: var(--space-3); padding: var(--space-6);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.pricing-disclosure p { margin: 0; color: var(--text-secondary); line-height: 1.65; }
.pricing-disclosure .price-payments { color: var(--text-primary); font-weight: 700; }
.price-legend { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.price-effect-tag {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 34px;
  padding: 6px 13px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700;
}
.price-effect-tag::before { content: ''; width: 8px; height: 8px; border-radius: var(--radius-pill); }
.price-effect-tag.changes-order { background: var(--state-danger-bg); color: var(--state-danger); }
.price-effect-tag.changes-order::before { background: var(--surface-coral); }
.price-effect-tag.separate-surface { background: var(--state-info-bg); color: var(--state-info); }
.price-effect-tag.separate-surface::before { background: var(--surface-sky); }
.pricing-page .price-group { border: 0; padding: 0; scroll-margin-top: 100px; }
.price-group-head { display: flex; align-items: baseline; gap: var(--space-4); }
.price-group-head h2 {
  margin: 0; font-family: var(--font-marketing); font-size: var(--type-h2); font-weight: 400;
  letter-spacing: -.025em;
}
.pricing-page .price-group-note { max-width: 88ch; margin: 8px 0 16px; font-size: 14px; }
.price-table {
  overflow: hidden; background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.price-table-head,.pricing-page .price-row {
  display: grid;
  grid-template-columns: minmax(170px,1.1fr) 140px minmax(230px,1.8fr) 90px 110px;
  column-gap: var(--space-5); align-items: start;
}
.price-table-head {
  padding: 14px var(--space-6); color: var(--text-muted); font-size: 10px;
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.pricing-page .price-row {
  padding: 18px var(--space-6); border: 0; border-top: 1px solid var(--border-subtle);
  background: transparent;
}
.pricing-page .price-label { font-size: 14.5px; }
.pricing-page .price-amount { display: grid; gap: 3px; font-size: 15px; }
.pricing-page .price-amount del,.pricing-page .price-amount small {
  color: var(--text-muted); font-size: 11.5px;
}
.pricing-page .price-effect { color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; }
.pricing-page .price-period {
  grid-column: auto; margin: 0; color: var(--text-muted); font-size: 12.5px;
  letter-spacing: 0; text-transform: none;
}
.pricing-page .price-order {
  display: block; margin-top: 7px; color: var(--state-danger); font-size: 11.5px;
}
.pricing-page .price-action { align-self: center; justify-self: end; }
.pricing-page .price-footnote {
  margin: var(--space-4) 0 0; padding: var(--space-6); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); background: var(--surface-warm); font-size: 13.5px;
  color: var(--text-secondary); line-height: 1.65;
}

/* ---------- article layout and guide ---------- */
.article-layout,.legal-layout {
  display: grid; grid-template-columns: 250px minmax(0,680px); gap: clamp(30px,5vw,72px);
  align-items: start; justify-content: center;
}
.article-toc,.legal-aside {
  padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.article-toc-title {
  margin: 0 0 var(--space-4); color: var(--text-muted); font-size: 10px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
}
.article-toc ol,.legal-aside .legal-toc ol { list-style: none; margin: 0; padding: 0; }
.article-toc li,.legal-aside .legal-toc li { margin: 0; }
.article-toc a,.legal-aside .legal-toc a {
  display: flex; gap: 10px; padding: 9px 10px; color: var(--text-secondary);
  border-radius: var(--radius-xs); font-size: 13px; line-height: 1.35;
}
.article-toc a span { flex: none; color: var(--text-muted); }
.article-toc a:hover,.article-toc a[aria-current],
.legal-aside .legal-toc a:hover,.legal-aside .legal-toc a[aria-current] {
  color: var(--text-primary); background: var(--surface-warm); text-decoration: none;
}
.guide-article { min-width: 0; }
.guide-point { margin: 0; padding: 0 0 var(--space-10); scroll-margin-top: 100px; }
.guide-point-h {
  display: flex; gap: var(--space-4); align-items: baseline; margin: 0 0 var(--space-4);
  font-family: var(--font-marketing); font-size: var(--type-h2); font-weight: 400; line-height: 1.2;
}
.guide-point-n {
  flex: none; color: var(--surface-coral); font: 800 12px/1 var(--font-ui); letter-spacing: .08em;
}
.guide-point p { margin: 0; color: var(--text-secondary); font-size: 17px; line-height: 1.75; }
.guide-checklist {
  display: grid; gap: 0; margin-bottom: var(--space-8); overflow: hidden;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); scroll-margin-top: 100px;
}
.guide-checklist header { padding: var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.guide-checklist h2 { margin: 4px 0; font-family: var(--font-marketing); font-size: 26px; font-weight: 400; }
.guide-checklist header p:last-child { margin: 0; color: var(--text-secondary); }
.guide-check {
  display: flex; gap: var(--space-3); align-items: center; min-height: 58px; padding: 12px var(--space-6);
  border-bottom: 1px solid var(--border-subtle); cursor: pointer;
}
.guide-check:last-child { border-bottom: 0; }
.guide-check input { width: 20px; height: 20px; accent-color: var(--action-primary); }
.guide-check span { display: flex; gap: var(--space-3); }
.guide-check b { color: var(--text-muted); font-size: 12px; }
.guide-outro {
  margin: 0; padding: var(--space-5); background: var(--state-warning-bg); color: var(--state-warning);
  border-radius: var(--radius-card); font-size: 14px; line-height: 1.65;
}
.guide-outro a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- common mistakes ----------
   Two sentences per entry that must not be confused for each other: the claim
   we are quoting from a forum and the correction. They are told apart by weight
   and by a label, not by colour alone — a reader who sees no colour still reads
   "Mit" before the sentence that is wrong. */
.mistakes-disclaimer {
  max-width: 68ch; margin: 0; padding: var(--space-4) var(--space-5);
  background: var(--state-warning-bg); color: var(--state-warning);
  border-radius: var(--radius-card); font-size: var(--type-small); line-height: 1.65;
}
.mistakes-list {
  display: grid; gap: var(--space-5); max-width: 78ch; margin: 0; padding: 0; list-style: none;
}
.mistake {
  display: grid; gap: var(--space-3); padding: var(--space-6);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); scroll-margin-top: 100px;
}
.mistake p { margin: 0; line-height: 1.7; }
.mistake-myth { color: var(--text-muted); font-size: 17px; font-style: italic; }
.mistake-fact { color: var(--text-primary); font-size: 17px; }
.mistake-label {
  /* The shorthand resets font-style, so the label stays upright inside the
     italic myth line. */
  display: block; margin-bottom: var(--space-1);
  font: 800 12px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--state-danger);
}
.mistake-label.fact { color: var(--state-success); }
.mistake-basis {
  padding-top: var(--space-3); border-top: 1px solid var(--border-subtle);
  color: var(--text-muted); font-size: 13px;
}
.mistakes-outro {
  margin: 0; padding: var(--space-5); background: var(--state-info-bg); color: var(--state-info);
  border-radius: var(--radius-card); font-size: 14px; line-height: 1.65;
}
.mistakes-outro a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- licences ---------- */
.licenses-section { display: grid; gap: var(--space-4); }
.licenses-section > h2 {
  margin: 0; font-family: var(--font-marketing); font-size: var(--type-h2);
  font-weight: 400; letter-spacing: -.025em;
}
.licenses-section-intro {
  max-width: 76ch; margin: -4px 0 0; color: var(--text-secondary); line-height: 1.65;
}
.licenses-method-card {
  display: grid; gap: var(--space-4); max-width: 82ch; padding: var(--space-6);
  background: var(--surface-warm); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.licenses-method-card p { margin: 0; color: var(--text-secondary); line-height: 1.7; }
.license-list {
  overflow: hidden; background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.license-row {
  display: grid; grid-template-columns: minmax(0,1fr) 130px 110px; gap: var(--space-5);
  align-items: center; padding: var(--space-6); border-bottom: 1px solid var(--border-subtle);
}
.license-row:last-child { border-bottom: 0; }
.license-name h3 { margin: 0 0 4px; font-size: 16px; }
.license-name p { margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; }
.license-name .license-version { margin-bottom: 5px; color: var(--text-muted); font-size: 12px; font-weight: 700; }
.license-tag { font: 700 12px/1.4 var(--font-ui); color: var(--action-primary); }
.license-source { display: inline-flex; gap: 4px; justify-self: start; font-size: 13px; font-weight: 700; }
.license-source:hover { color: var(--action-primary); }
.licenses-map-note { margin: 0; color: var(--text-muted); font-size: 13px; }

/* ---------- legal documents ---------- */
.legal-hero {
  padding: clamp(24px,4vw,40px); background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
}
.legal-page .legal-title {
  margin: 4px 0 12px; font-family: var(--font-marketing); font-size: var(--type-h1);
  font-weight: 400; letter-spacing: -.035em;
}
.legal-page .legal-intro { max-width: 72ch; margin: 0 0 var(--space-6); }
.legal-hero-foot {
  display: flex; align-items: end; justify-content: space-between; gap: var(--space-5);
  padding-top: var(--space-5); border-top: 1px solid var(--border-subtle);
}
.legal-page .legal-meta { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0; padding: 0; border: 0; }
.legal-meta div { display: grid; gap: 3px; }
.legal-page .legal-meta dt { font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.legal-page .legal-meta dd { font-size: 13px; font-weight: 700; }
.legal-layout.without-toc { grid-template-columns: minmax(0,760px); }
.legal-toc-mobile { display: none; }
.legal-aside { padding: var(--space-4); }
.legal-aside .legal-toc { margin: 0; }
.legal-page .legal-doc { max-width: 680px; }
.legal-page .legal-doc-section { position: relative; padding-block: 24px 12px; scroll-margin-top: 96px; }
.legal-page .legal-doc-section:first-child { border-top: 0; padding-top: 0; }
.legal-page .legal-doc-section h2 {
  display: flex; gap: var(--space-3); align-items: start; justify-content: space-between;
  font-family: var(--font-marketing); font-size: 25px; font-weight: 400; line-height: 1.25;
}
.legal-page .legal-doc-section p,.legal-page .legal-doc-section li { font-size: 16px; line-height: 1.75; }
.legal-anchor-copy {
  flex: none; border: 0; padding: 7px 10px; border-radius: var(--radius-pill);
  background: var(--surface-warm); color: var(--action-primary); font: 700 11px/1.2 var(--font-ui);
  cursor: pointer;
}
.legal-doc-section:target {
  margin-inline: -16px; padding-inline: 16px; background: var(--state-warning-bg);
  border-radius: var(--radius-card); animation: legal-target 3s ease forwards;
}
@keyframes legal-target { 70% { background: var(--state-warning-bg); } 100% { background: transparent; } }

@media (max-width: 820px) {
  .price-table-head { display: none; }
  .pricing-page .price-row { grid-template-columns: minmax(0,1fr) auto; gap: 8px var(--space-4); }
  .pricing-page .price-label { grid-column: 1; grid-row: 1; }
  .pricing-page .price-amount { grid-column: 2; grid-row: 1; text-align: right; }
  .pricing-page .price-effect { grid-column: 1 / -1; grid-row: 2; }
  .pricing-page .price-period { grid-column: 1; grid-row: 3; }
  .pricing-page .price-action { grid-column: 2; grid-row: 3; }
  .article-layout,.legal-layout { grid-template-columns: minmax(0,680px); }
  .article-toc,.legal-aside { display: none; }
  .legal-toc-mobile {
    display: block; padding: var(--space-4); background: var(--surface-card);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  }
  .legal-toc-mobile summary { cursor: pointer; font-weight: 700; }
  .legal-toc-mobile .legal-toc { margin: var(--space-4) 0 0; }
}
@media (max-width: 560px) {
  .content-page { gap: var(--space-6); }
  .content-header-row { align-items: stretch; flex-direction: column; }
  .content-header-row > .btn { width: 100%; margin: 0; }
  .price-table,.license-list { border-radius: var(--radius-card); }
  .pricing-page .price-row,.license-row,.mistake { padding: var(--space-4); }
  .mistake-myth,.mistake-fact { font-size: var(--type-body); }
  .license-row { grid-template-columns: 1fr auto; }
  .license-source { grid-column: 1 / -1; }
  .legal-hero-foot { align-items: stretch; flex-direction: column; }
  .legal-hero-foot .btn { width: 100%; }
  .legal-page .legal-meta { gap: var(--space-4); }
}

@media print {
  .dheader,.topbar,.dfooter,.bottomnav,.article-toc,.legal-aside,.legal-toc-mobile,
  .page-header-actions,.content-header-row > .btn,.legal-hero-foot .btn,.legal-anchor-copy { display: none !important; }
  body { background: var(--surface-card); }
  .page { max-width: none; padding: 0; }
  .article-layout,.legal-layout { display: block; }
  .legal-hero,.guide-checklist,.mistake { border-color: var(--border-strong); box-shadow: none; }
  .guide-point,.legal-doc-section,.mistake { break-inside: avoid; }
}