/* Shared page-level patterns */

/* Page hero — top padding clears the fixed header */
.page-hero {
  padding-top: 8rem;
  padding-bottom: 4rem;
  position: relative;
  overflow: hidden;
}
.page-hero__inner { position: relative; z-index: 10; max-width: 48rem; margin: 0 auto; text-align: center; }
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.page-hero p { color: hsl(var(--muted-foreground)); max-width: 36rem; margin: 0 auto 1.5rem; font-size: 1.0625rem; }

/* Generic card */
.card {
  background: hsl(var(--card));
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s, transform 0.3s;
}
.card:hover { box-shadow: var(--shadow-card-hover); }
.card--top-primary { border-top: 4px solid hsl(var(--primary)); }
.card--top-orange { border-top: 4px solid hsl(var(--orange)); }
.card--top-teal { border-top: 4px solid hsl(var(--teal)); }
.card--left-primary { border-left: 4px solid hsl(var(--primary)); }
.card--left-orange { border-left: 4px solid hsl(var(--orange)); }
.card--left-teal { border-left: 4px solid hsl(var(--teal)); }
.card--xl { padding: 2rem; }
@media (min-width: 768px) { .card--xl { padding: 3rem; } }

/* Icon square */
.icon-sq {
  width: 3rem; height: 3rem;
  border-radius: var(--radius-lg);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-sq--lg { width: 3.5rem; height: 3.5rem; }
.icon-sq--xl { width: 4rem; height: 4rem; }
.icon-sq--primary { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }
.icon-sq--orange  { background: hsl(var(--orange) / 0.1);  color: hsl(var(--orange)); }
.icon-sq--teal    { background: hsl(var(--teal) / 0.1);    color: hsl(var(--teal)); }

/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Process steps (vertical timeline with numbered circles) */
.process-list { display: flex; flex-direction: column; gap: 2rem; max-width: 56rem; margin: 0 auto; position: relative; }
.process-list::before {
  content: ''; position: absolute; left: 2rem; top: 0; bottom: 0; width: 2px;
  background: hsl(var(--primary) / 0.3);
  display: none;
}
@media (min-width: 768px) { .process-list::before { display: block; } }
.process-step { position: relative; }
@media (min-width: 768px) { .process-step { padding-left: 5rem; } }
.process-step__num {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
}
@media (min-width: 768px) {
  .process-step__num {
    position: absolute; left: 0; top: 0;
    width: 4rem; height: 4rem; font-size: 1.25rem;
  }
}
.process-step--orange .process-step__num { background: hsl(var(--orange)); color: white; }
.process-step--teal .process-step__num   { background: hsl(var(--teal));   color: white; }

/* Pricing strip / banner */
.pill-banner {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-full);
  background: hsl(var(--primary) / 0.1);
  border: 1px solid hsl(var(--primary) / 0.2);
  font-weight: 500;
}
.pill-banner--orange { background: hsl(var(--orange) / 0.1); border-color: hsl(var(--orange) / 0.2); }
.pill-banner--teal   { background: hsl(var(--teal) / 0.1);   border-color: hsl(var(--teal) / 0.2); }

/* Tag/chip */
.chip {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius);
  font-size: 0.75rem; font-weight: 500;
}
.chip--orange { background: hsl(var(--orange) / 0.1); color: hsl(var(--orange)); }
.chip--primary { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }
.chip--teal { background: hsl(var(--teal) / 0.1); color: hsl(var(--teal)); }

/* Section CTA card */
.cta-card {
  max-width: 36rem; margin: 0 auto;
  background: hsl(var(--card) / 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid hsl(var(--primary) / 0.2);
  border-radius: var(--radius-2xl);
  padding: 2rem; text-align: center;
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) { .cta-card { padding: 3rem; } }

/* Legal pages */
.legal-card { padding: 2rem; }
@media (min-width: 768px) { .legal-card { padding: 3rem; } }
.legal-card h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.legal-card p { color: hsl(var(--muted-foreground)); line-height: 1.7; margin-bottom: 1rem; }
.legal-card ul { color: hsl(var(--muted-foreground)); line-height: 1.7; margin-left: 1.5rem; list-style: disc; margin-bottom: 1rem; }
.legal-card ul li { margin-bottom: 0.25rem; }
.legal-card strong { color: hsl(var(--foreground)); font-weight: 600; }
.legal-card a { color: hsl(var(--primary)); }
.legal-card a:hover { text-decoration: underline; }
.legal-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }

/* Bullet check list */
.check-list { display: flex; flex-direction: column; gap: 0.75rem; }
.check-list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.check-list li svg { color: hsl(var(--primary)); flex-shrink: 0; margin-top: 0.125rem; }
.check-list--orange li svg { color: hsl(var(--orange)); }
.check-list--teal   li svg { color: hsl(var(--teal)); }

/* Prose for blog markdown */
.prose-custom h2 { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; margin: 2.5rem 0 1rem; }
.prose-custom h3 { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 700; margin: 2rem 0 0.75rem; }
.prose-custom p  { color: hsl(var(--muted-foreground)); line-height: 1.8; margin-bottom: 1rem; }
.prose-custom ul, .prose-custom ol { color: hsl(var(--muted-foreground)); line-height: 1.8; margin: 1rem 0 1rem 1.5rem; }
.prose-custom ul { list-style: disc; }
.prose-custom ol { list-style: decimal; }
.prose-custom a  { color: hsl(var(--primary)); text-decoration: underline; }
.prose-custom a:hover { text-decoration: none; }
.prose-custom strong { color: hsl(var(--foreground)); font-weight: 600; }
.prose-custom hr { margin: 2rem 0; border: 0; border-top: 1px solid hsl(var(--border)); }
.prose-custom blockquote { border-left: 4px solid hsl(var(--primary)); padding-left: 1rem; font-style: italic; margin: 1.5rem 0; color: hsl(var(--muted-foreground)); }
.prose-custom code { background: hsl(var(--muted)); padding: 0.125rem 0.375rem; border-radius: var(--radius); font-size: 0.875em; }