/* What is specific to services.lexxika.com. The look (menu, footer, hero, section titles, buttons) is the one of textes.lexxika.com:
   css/site.css is a copy of it (tools/sync_shared.py), so this file only adds the rest. Names start with sv- to never collide with it. */
/* A model's page */
.sv-intro { max-width: 960px; margin-left: auto; margin-right: auto; padding: 36px 16px 0; }
.sv-narrow { max-width: 620px; }
.sv-crumbs { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.sv-crumbs a { color: var(--link); }
.sv-intro h1 { margin: 0 0 12px; font: 700 clamp(28px, 4vw, 40px)/1.15 var(--display); color: var(--ink); }
.sv-lead { font-size: 19px; margin: 0 0 22px; }

.sv-note { max-width: 760px; margin: 26px auto 0; text-align: center; font-size: 15px; color: var(--muted); }

/* Order */
.sv-form { display: grid; gap: 16px; margin-top: 18px; }
.sv-form label { display: grid; gap: 6px; font-weight: 600; }
.sv-form input { padding: 11px 12px; border: 1px solid #c9ced4; border-radius: 6px; font: 400 17px var(--body); }
.sv-form input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.sv-form .button { justify-self: start; }
.sv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sv-error, .sv-ok, .sv-wait { padding: 14px 16px; border-radius: 6px; margin: 16px 0; }
.sv-error { background: #fdecea; color: #8a1c13; }
.sv-ok { background: #e8f5ea; color: #1d5a2a; }
.sv-wait { background: var(--cream); color: var(--ink); }
.sv-wait .button { margin-left: 8px; }

/* spacing under the hero, and ticks instead of bullets in the tiers */

/* Services is aimed at the general public: rounded buttons everywhere (the other sites keep the 2px corners of site.css) */
.button { border-radius: 999px; padding-left: 24px; padding-right: 24px; }

/* Steps of the order */
.sv-steps { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; color: var(--muted); }
.sv-steps li { display: inline-flex; align-items: center; gap: 8px; }
.sv-steps span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e1ebf2; color: var(--muted); font: 700 13px var(--display); }
.sv-steps small { font-size: 12.5px; padding: 1px 8px; border-radius: 999px; background: var(--grey); }
.sv-steps .is-now { color: var(--ink); font-weight: 600; }
.sv-steps .is-now span { background: var(--blue-surface); color: #fff; }
.sv-tiers { margin: 0 0 6px; }