/* Article layout from the supplied ISO 27001 vs SOC 2 reference. */
#iso-soc-article { background: var(--surface); color: var(--ink); font-family: 'Source Sans 3', system-ui, sans-serif; font-size: var(--text-base); line-height: 1.65; }
#iso-soc-article, #iso-soc-article *, #iso-soc-article *::before, #iso-soc-article *::after { box-sizing: border-box; margin: 0; padding: 0; }
#iso-soc-article .prose-container { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }

  #iso-soc-article .article-header { padding: clamp(48px, 8vw, 88px) 0 clamp(32px, 6vw, 48px); }
  #iso-soc-article .article-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin-bottom: 20px; }
  #iso-soc-article .article-eyebrow-dot { width: 6px; height: 6px; background: var(--amber); border-radius: 50%; flex-shrink: 0; }
  #iso-soc-article .article-header h1 { font-family: 'Bitter', serif; font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 20px; }
  #iso-soc-article .article-sub { font-size: var(--text-lg); color: var(--ink-muted); line-height: 1.6; margin-bottom: 24px; }
  #iso-soc-article .article-meta { display: flex; align-items: center; gap: 14px; font-size: var(--text-sm); color: var(--ink-faint); flex-wrap: wrap; }
  #iso-soc-article .article-meta .dot { width: 3px; height: 3px; background: var(--ink-faint); border-radius: 50%; }

  #iso-soc-article .prose { padding-bottom: clamp(48px, 8vw, 80px); }
  #iso-soc-article .prose p { font-size: var(--text-base); color: var(--ink-muted); line-height: 1.75; margin-bottom: 22px; }
  #iso-soc-article .prose h2 { font-family: 'Bitter', serif; font-size: var(--text-2xl); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; margin: 48px 0 20px; }
  #iso-soc-article .prose strong { color: var(--ink); font-weight: 700; }

  #iso-soc-article .controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0 36px; }
  #iso-soc-article .control-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; }
  #iso-soc-article .control-card h3 { font-family: 'Bitter', serif; font-size: var(--text-base); font-weight: 700; color: var(--brand); margin-bottom: 8px; }
  #iso-soc-article .control-card p { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.6; margin: 0; }
  @media (max-width: 700px) { #iso-soc-article .controls-grid { grid-template-columns: 1fr; } }

  #iso-soc-article .checklist { list-style: none; margin: 28px 0 32px; display: flex; flex-direction: column; gap: 2px; background: var(--border); border-radius: 12px; overflow: hidden; }
  #iso-soc-article .checklist li { background: var(--card); padding: 20px 24px; display: flex; gap: 18px; align-items: flex-start; }
  #iso-soc-article .checklist-num { font-family: 'Bitter', serif; font-size: var(--text-xl); font-weight: 700; color: var(--brand-pale); flex-shrink: 0; line-height: 1.3; min-width: 28px; }
  #iso-soc-article .checklist-body strong { font-family: 'Bitter', serif; font-size: var(--text-base); color: var(--ink); display: block; margin-bottom: 4px; }
  #iso-soc-article .checklist-body span { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.6; }

  #iso-soc-article .cta-soft { background: var(--brand-pale); border: 1px solid oklch(88% 0.05 255); border-radius: 12px; padding: 24px 28px; margin: 8px 0 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  #iso-soc-article .cta-soft p { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; flex: 1; min-width: 220px; line-height: 1.6; }
  #iso-soc-article .cta-main { background: var(--brand-dark); border-radius: 14px; padding: clamp(28px, 5vw, 40px); margin: 40px 0 8px; }
  #iso-soc-article .cta-main-eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; }
  #iso-soc-article .cta-main h3 { font-family: 'Bitter', serif; font-size: var(--text-xl); font-weight: 700; color: white; margin-bottom: 12px; line-height: 1.25; }
  #iso-soc-article .cta-main p { font-size: var(--text-sm); color: oklch(78% 0.05 245); line-height: 1.7; margin-bottom: 24px; max-width: 60ch; }

  #iso-soc-article .btn-primary { background: var(--brand); color: white; padding: 13px 26px; border-radius: 6px; font-family: 'Source Sans 3', sans-serif; font-size: var(--text-base); font-weight: 700; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s, transform 0.15s; display: inline-block; white-space: nowrap; }
  #iso-soc-article .btn-primary:hover { background: var(--brand-mid); transform: translateY(-1px); }
  #iso-soc-article .btn-amber { background: var(--amber); color: oklch(20% 0.05 70); padding: 13px 26px; border-radius: 6px; font-family: 'Source Sans 3', sans-serif; font-size: var(--text-base); font-weight: 700; text-decoration: none; border: none; cursor: pointer; transition: opacity 0.15s, transform 0.15s; display: inline-block; white-space: nowrap; }
  #iso-soc-article .btn-amber:hover { opacity: 0.9; transform: translateY(-1px); }

  #iso-soc-article .article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
  #iso-soc-article .article-tag { font-size: 12px; font-weight: 600; background: var(--brand-pale); color: var(--brand); padding: 5px 12px; border-radius: 20px; }

  
@media (max-width: 600px) {
  #iso-soc-article .cta-soft { flex-direction: column; align-items: stretch; }
  #iso-soc-article .cta-soft p { min-width: 0; flex: auto; }
  #iso-soc-article .btn-primary, #iso-soc-article .btn-amber { white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  #iso-soc-article .btn-primary, #iso-soc-article .btn-amber { transition: none; }
}