/* Services page (templates/courses/services.html): list of services, then one section per service. Site tokens only. */
.sv-page { max-width: 1040px; margin: 0 auto; }

.sv-hero { padding: clamp(24px, 6vh, 64px) 0 1.4rem; }
.sv-kicker { margin: 0; font: 700 .78rem/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.sv-hero h1 { margin: .6rem 0 .5rem; max-width: 24ch; font: 800 clamp(2.1rem, 5.5vw, 3.3rem)/1.05 var(--display); letter-spacing: -.02em; }
.sv-lede { margin: 0; max-width: 40rem; font-size: 1.1rem; color: var(--muted); }

/* The list of services at the top: one card per service, linking to its section. */
.sv-list { display: grid; gap: .8rem; margin: 1rem 0 2.6rem; }
.sv-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.1rem 1.25rem;
  border: 2px solid var(--fg); border-radius: 16px; background: var(--card); color: var(--fg); text-decoration: none;
  box-shadow: 5px 5px 0 var(--fg); transition: transform .15s cubic-bezier(.23, 1, .32, 1), box-shadow .15s cubic-bezier(.23, 1, .32, 1); }
.sv-card:hover, .sv-card:focus-visible { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--fg); }
.sv-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sv-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--accent); color: #fff; font-size: 1.5rem; }
.sv-ico .gi { margin: 0; }
.sv-card-text { display: grid; gap: .2rem; }
.sv-card-text b { font: 800 1.25rem/1.2 var(--display); }
.sv-card-text span { color: var(--muted); font-size: .95rem; }
.sv-card-go { font-weight: 700; color: var(--accent); white-space: nowrap; }

/* The premium label on cards and section heads. */
.sv-premium { justify-self: start; display: inline-flex; align-items: center; padding: .15rem .6rem; border: 1.5px solid var(--fg);
  border-radius: 999px; background: #fff4d6; color: var(--fg) !important; font-size: .72rem !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sv-service-head .sv-premium { margin-bottom: .6rem; }

/* One service. */
.sv-service { scroll-margin-top: 90px; padding-bottom: 1.6rem; }
.sv-service-head h2 { margin: 0 0 .5rem; font: 800 clamp(1.6rem, 3.6vw, 2.2rem)/1.15 var(--display); letter-spacing: -.02em; }
.sv-service-head > p { margin: 0; max-width: 46rem; line-height: 1.65; }
.sv-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.sv-facts li { display: inline-flex; align-items: center; padding: .35rem .75rem; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent-strong); font-size: .88rem; font-weight: 600; }

.sv-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 1.8rem 0; }
.sv-phase { padding: 1.4rem 1.5rem; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); }
.sv-phase > .sv-phase-tag { display: inline-block; margin: 0 0 .6rem; padding: .2rem .65rem; border-radius: 999px; background: var(--fg); color: #fff;
  font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sv-phase:nth-child(2) > .sv-phase-tag { background: var(--accent); }
.sv-phase h3 { margin: 0 0 .4rem; font: 800 1.4rem/1.2 var(--display); }
.sv-phase > p { margin: 0 0 1rem; color: var(--muted); line-height: 1.6; }
.sv-points { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.sv-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem; line-height: 1.6; }
.sv-points .gi { margin-top: .3em; color: var(--accent); }

.sv-how h3, .sv-faq h3 { margin: 0 0 .9rem; font: 800 1.4rem/1.2 var(--display); }
.sv-how ol { list-style: none; counter-reset: sv; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sv-how li { counter-increment: sv; display: grid; gap: .3rem; align-content: start; padding: 1rem 1.1rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); }
.sv-how li::before { content: counter(sv); width: 1.8rem; height: 1.8rem; display: grid; place-items: center; margin-bottom: .3rem;
  border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; }
.sv-how span { color: var(--muted); font-size: .93rem; line-height: 1.5; }

.sv-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; margin: 2rem 0;
  padding: 1.5rem 1.6rem; border: 2px solid var(--fg); border-radius: 18px; background: var(--accent-soft); box-shadow: 6px 6px 0 var(--fg); }
.sv-cta h3 { margin: 0 0 .3rem; font: 800 1.5rem/1.2 var(--display); }
.sv-cta p { margin: 0; color: var(--muted); }
.sv-cta .sv-mail { margin-top: .6rem; color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }
.sv-cta .sv-mail .gi { color: var(--accent); }

.sv-faq { margin: 0 0 2rem; }
.sv-faq details { border-bottom: 1px solid var(--line); }
.sv-faq summary { padding: .85rem 0; font-weight: 700; cursor: pointer; }
.sv-faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sv-faq details p { margin: 0 0 1rem; color: var(--muted); line-height: 1.6; }

@media (max-width: 980px) {
  .sv-phases { grid-template-columns: minmax(0, 1fr); }
  .sv-how ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .sv-card { grid-template-columns: auto minmax(0, 1fr); }
  .sv-card-go { display: none; }
  .sv-how ol { grid-template-columns: minmax(0, 1fr); }
  .sv-phase, .sv-cta { padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .sv-card { transition: none; } .sv-card:hover { transform: none; } }