/**
 * Page-Specific Styles
 * Extracted from inline <style> blocks to comply with CSP style-src 'self'
 */

/* ========================================
   AI Integration Page
   ======================================== */

.philosophy-statement {
  background-color: var(--color-bg-alt);
  border-left: 4px solid var(--color-foundation);
  padding: var(--space-6);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin-bottom: var(--space-8);
}

.philosophy-statement blockquote {
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.philosophy-statement cite {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-text-muted);
}

.principles-grid {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .principles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.principle-card {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.principle-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.principle-icon {
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
  color: var(--color-foundation);
}

.principle-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.principle-description {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.context-section {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-12);
}

.context-section h2 {
  color: var(--color-foundation);
  margin-bottom: var(--space-4);
}

.context-intro {
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

.context-diagram {
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.diagram-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .diagram-flow {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.diagram-node {
  flex: 1;
  padding: var(--space-4);
  background-color: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  text-align: center;
}

.diagram-node-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.diagram-node-detail {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.diagram-arrow {
  display: none;
  color: var(--color-text-muted);
  font-size: var(--text-xl);
}

@media (min-width: 768px) {
  .diagram-arrow {
    display: block;
    flex-shrink: 0;
  }
}

.context-benefits {
  list-style: none;
}

.context-benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.context-benefit:last-child {
  border-bottom: none;
}

.benefit-icon {
  width: 20px;
  height: 20px;
  color: var(--color-growth);
  flex-shrink: 0;
  margin-top: 2px;
}

.benefit-text {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.use-cases-section {
  margin-bottom: var(--space-12);
}

.use-cases-section h2 {
  margin-bottom: var(--space-2);
}

.use-cases-intro {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.use-cases-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .use-cases-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.use-case-card {
  padding: var(--space-5);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.use-case-title {
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.use-case-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.use-case-outcome {
  font-size: var(--text-sm);
  color: var(--color-growth);
  font-weight: var(--font-medium);
}

.guardrails-section {
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-12);
}

.guardrails-section h2 {
  margin-bottom: var(--space-6);
}

.guardrails-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .guardrails-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.guardrail-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-bg-elevated);
  border-radius: var(--radius-md);
}

.guardrail-icon {
  width: 24px;
  height: 24px;
  color: var(--color-impact);
  flex-shrink: 0;
}

.guardrail-content h3 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.guardrail-content p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.meta-section {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.meta-section h2 {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
}

.meta-section p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.meta-section p:last-child {
  margin-bottom: 0;
}

/* ========================================
   Technical Page
   ======================================== */

.positioning-callout {
  background-color: var(--color-bg-alt);
  border-left: 4px solid var(--color-foundation);
  padding: var(--space-6);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin-bottom: var(--space-8);
}

.positioning-callout h2 {
  font-size: var(--text-xl);
  color: var(--color-foundation);
  margin-bottom: var(--space-3);
}

.positioning-callout p {
  margin-bottom: var(--space-3);
}

.positioning-callout p:last-child {
  margin-bottom: 0;
}

.tools-section {
  margin-bottom: var(--space-12);
}

.tools-grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tools-card {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.tools-card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-foundation);
  margin-bottom: var(--space-3);
}

.tools-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tool-tag {
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.code-examples {
  margin-top: var(--space-12);
}

.code-example {
  margin-bottom: var(--space-8);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.code-example:last-child {
  margin-bottom: 0;
}

.code-example-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.code-example-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.code-example-lang {
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-foundation);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
}

.code-block {
  padding: var(--space-6);
  overflow-x: auto;
}

.code-block pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.code-block code {
  font-family: inherit;
}

.code-explanation {
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.difference-section {
  margin-top: var(--space-12);
  padding: var(--space-8);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.difference-section h2 {
  margin-bottom: var(--space-6);
}

.difference-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .difference-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.difference-card {
  padding: var(--space-4);
  background-color: var(--color-bg-elevated);
  border-radius: var(--radius-md);
}

.difference-card-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.difference-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.real-example {
  margin-top: var(--space-12);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.real-example h2 {
  color: var(--color-foundation);
  margin-bottom: var(--space-4);
}

.example-flow {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.example-step {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.step-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-growth);
  color: var(--color-text-inverse);
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.step-content h4 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}

.step-content p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.outcome-badge {
  display: inline-block;
  margin-top: var(--space-6);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-impact);
  color: var(--color-text-inverse);
  font-weight: var(--font-bold);
  border-radius: var(--radius-md);
}

/* ========================================
   Case Studies Page
   ======================================== */

.case-study {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
}

.case-study:last-child {
  margin-bottom: 0;
}

.case-study-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
}

.case-study-title {
  font-size: var(--text-2xl);
  color: var(--color-foundation);
  margin-bottom: var(--space-2);
}

.case-study-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.case-study-section {
  margin-bottom: var(--space-6);
}

.case-study-section:last-child {
  margin-bottom: 0;
}

.case-study-section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.case-study-section-title::before {
  content: "";
  width: 4px;
  height: 1em;
  background-color: var(--color-growth);
  border-radius: 2px;
}

.outcome-highlight {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-impact);
  color: var(--color-text-inverse);
  font-weight: var(--font-bold);
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
}

.lessons-list {
  list-style: none;
}

.lessons-list li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
}

.lessons-list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--color-growth);
  font-weight: var(--font-bold);
}

.demonstrates-grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .demonstrates-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.demonstrates-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  padding: var(--space-3);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.demonstrates-check {
  color: var(--color-growth);
  flex-shrink: 0;
  margin-top: 2px;
}

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.tech-tag {
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
}

.meta-note {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background-color: var(--color-bg-alt);
  border-left: 4px solid var(--color-foundation);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.meta-note strong {
  color: var(--color-text);
}

.fieldstack-highlights {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .fieldstack-highlights {
    grid-template-columns: repeat(3, 1fr);
  }
}

.highlight-card {
  padding: var(--space-4);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
  text-align: center;
}

.highlight-number {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-impact);
}

.highlight-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ========================================
   Colophon Page
   ======================================== */

.colophon-intro {
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.colophon-intro p {
  margin-bottom: var(--space-3);
}

.colophon-intro p:last-child {
  margin-bottom: 0;
}

.resource-section {
  margin-bottom: var(--space-10);
}

.resource-section h2 {
  margin-bottom: var(--space-2);
  color: var(--color-foundation);
}

.resource-section > p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.resource-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .resource-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.resource-card {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.resource-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.resource-name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.resource-license {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}

.resource-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
}

.resource-link {
  font-size: var(--text-sm);
  color: var(--color-foundation);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.resource-link:hover {
  text-decoration: underline;
}

.resource-link svg {
  width: 14px;
  height: 14px;
}

.tradeoffs-section {
  margin-bottom: var(--space-10);
}

.tradeoffs-section h2 {
  margin-bottom: var(--space-2);
  color: var(--color-foundation);
}

.tradeoffs-section > p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.tradeoff-card {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.tradeoff-card:last-child {
  margin-bottom: 0;
}

.tradeoff-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.tradeoff-icon {
  width: 24px;
  height: 24px;
  color: var(--color-impact);
  flex-shrink: 0;
}

.tradeoff-name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.tradeoff-body {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .tradeoff-body {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.tradeoff-column h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.tradeoff-column p {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.tradeoff-column.concern h4 {
  color: var(--color-impact);
}

.tradeoff-column.solution h4 {
  color: var(--color-growth);
}

/* Shared with Contact page */
.philosophy-section {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-10);
}

.philosophy-section h2 {
  margin-bottom: var(--space-4);
}

.philosophy-list {
  list-style: none;
}

.philosophy-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.philosophy-item:last-child {
  border-bottom: none;
}

.philosophy-icon {
  width: 20px;
  height: 20px;
  color: var(--color-growth);
  flex-shrink: 0;
  margin-top: 2px;
}

.philosophy-text {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

.philosophy-text strong {
  color: var(--color-text);
}

.cta-section {
  text-align: center;
  padding: var(--space-8);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.cta-section h2 {
  margin-bottom: var(--space-3);
}

.cta-section p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.cta-section p:last-of-type {
  font-size: var(--text-sm);
}

.cost-callout {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-bg-elevated);
  border: 2px solid var(--color-growth);
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-growth);
}

/* ========================================
   Contact Page
   ======================================== */

.availability-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-growth);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin-bottom: var(--space-8);
}

.availability-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.availability-dot {
  width: 12px;
  height: 12px;
  background-color: var(--color-growth);
  border-radius: var(--radius-full);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.availability-status {
  font-weight: var(--font-bold);
  color: var(--color-growth);
}

.availability-details {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.contact-grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-card {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.contact-card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-foundation);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.contact-card-title svg {
  width: 20px;
  height: 20px;
}

.preference-list {
  list-style: none;
}

.preference-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.preference-item:last-child {
  border-bottom: none;
}

.preference-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.preference-icon.yes {
  color: var(--color-growth);
}

.preference-icon.no {
  color: var(--color-impact);
}

.preference-icon.neutral {
  color: var(--color-text-muted);
}

.preference-text {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.preference-note {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* CTA Grid - Get In Touch + Share side by side */
.cta-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .cta-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.cta-card {
  padding: var(--space-6);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}

.cta-card h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-foundation);
  margin-bottom: var(--space-4);
}

.cta-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-email-compact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-foundation);
  text-decoration: none;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-foundation);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  margin-bottom: var(--space-4);
}

.contact-email-compact:hover {
  background-color: var(--color-foundation);
  color: var(--color-text-inverse);
}

.contact-email-compact svg {
  width: 20px;
  height: 20px;
}

.cta-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.cta-note a {
  color: var(--color-foundation);
  text-decoration: none;
}

.cta-note a:hover {
  text-decoration: underline;
}

.cta-note-spaced {
  margin-bottom: var(--space-4);
}

.share-buttons-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
}

.share-buttons-vertical .share-button {
  justify-content: flex-start;
  width: 100%;
}

/* Legacy single contact-method (keeping for compatibility) */
.contact-method {
  margin-top: var(--space-8);
  padding: var(--space-8);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  text-align: center;
}

.contact-method h2 {
  margin-bottom: var(--space-4);
}

.contact-email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-foundation);
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border: 2px solid var(--color-foundation);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.contact-email:hover {
  background-color: var(--color-foundation);
  color: var(--color-text-inverse);
}

.contact-email svg {
  width: 24px;
  height: 24px;
}

.contact-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.downloads-section {
  margin-top: var(--space-12);
}

.downloads-section h2 {
  margin-bottom: var(--space-2);
}

.downloads-description {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.downloads-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .downloads-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.download-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.download-card:hover {
  border-color: var(--color-foundation);
  transform: translateY(-2px);
}

.download-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  color: var(--color-foundation);
}

.download-title {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
}

.download-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.download-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.download-card.disabled:hover {
  border-color: var(--color-border);
  transform: none;
}

.coming-soon {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.not-looking-section {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.not-looking-section h3 {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

.not-looking-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.not-looking-item {
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.share-section {
  margin-top: var(--space-12);
  text-align: center;
}

.share-section h2 {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.share-section > p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.share-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.share-button:hover {
  border-color: var(--color-foundation);
  color: var(--color-foundation);
}

.share-button svg {
  width: 18px;
  height: 18px;
}

.share-button.copied {
  border-color: var(--color-growth);
  color: var(--color-growth);
}

/* ========================================
   Experience Page
   ======================================== */

.timeline {
  position: relative;
  padding-left: var(--space-8);
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-foundation), var(--color-growth));
}

.experience-item {
  position: relative;
  padding-bottom: var(--space-12);
}

.experience-item:last-child {
  padding-bottom: 0;
}

.experience-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-8) - 5px);
  top: 6px;
  width: 12px;
  height: 12px;
  background-color: var(--color-foundation);
  border: 2px solid var(--color-bg);
  border-radius: var(--radius-full);
}

.experience-header {
  margin-bottom: var(--space-4);
}

.experience-title {
  font-size: var(--text-2xl);
  color: var(--color-foundation);
  margin-bottom: var(--space-1);
}

.experience-company {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.experience-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.experience-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.experience-summary {
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

.experience-section {
  margin-bottom: var(--space-6);
}

.experience-section:last-child {
  margin-bottom: 0;
}

.experience-section-title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.experience-section-title::before {
  content: "";
  width: 16px;
  height: 2px;
  background-color: var(--color-growth);
}

.accomplishment-list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .accomplishment-list.two-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

.accomplishment-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.accomplishment-check {
  color: var(--color-growth);
  flex-shrink: 0;
  margin-top: 2px;
}

.key-projects {
  list-style: none;
}

.key-projects li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
}

.key-projects li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--color-impact);
  font-weight: var(--font-bold);
}

.progression-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
}

.progression-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.progression-arrow {
  color: var(--color-growth);
}

.progression-current {
  font-weight: var(--font-bold);
  color: var(--color-foundation);
}

.education-section {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.education-section > h2 {
  margin-bottom: var(--space-6);
}

.education-grid {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .education-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.education-item {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.education-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.education-school {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.education-note {
  font-size: var(--text-sm);
  color: var(--color-growth);
  font-style: italic;
}

/* Professional Development subsection */
.professional-dev-section {
  margin-top: var(--space-2);
}

.professional-dev-section > h3 {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.professional-dev-section > h3::before {
  content: "";
  width: 16px;
  height: 2px;
  background-color: var(--color-growth);
}

.professional-dev-grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .professional-dev-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.professional-dev-item {
  padding: var(--space-4);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.professional-dev-item h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-foundation);
  margin-bottom: var(--space-2);
}

.professional-dev-item p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}