/* Écrans d'appli affichés dans le téléphone. Le cadre photoréaliste est dans css/tel.css (.tel, .tel-screen, .tel-frame). */
.phone-screen {
  background: #fff; color: var(--ink, #0B0B0F);
  font-family: "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, sans-serif;
}

/* ---------- Écrans de l'appli ---------- */
.ps {
  position: absolute; inset: 0; padding: calc(var(--tel-safe, 30px) + 6px) 16px 18px; display: flex; flex-direction: column; gap: 10px;
  opacity: 0; animation: ps-cycle 12s ease-in-out infinite;
}
.ps-1 { animation-delay: 0s; }
.ps-2 { animation-delay: -8s; }
.ps-3 { animation-delay: -4s; }
@keyframes ps-cycle {
  0% { opacity: 1; transform: none; }
  28% { opacity: 1; transform: none; }
  33% { opacity: 0; transform: translateY(6px); }
  95% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: none; }
}
.ps-bar { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; margin-top: 4px; }
.ps-bar .ps-brand { display: flex; align-items: center; gap: 6px; }
.ps-bar .ps-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--blue, #3A57E8); color: #fff; display: grid; place-items: center; font-size: 10px; }
.ps-bar i { width: 18px; height: 18px; border-radius: 50%; background: var(--grey, #F4F5F7); }
.ps-title { font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-top: 6px; }
.ps-sub { font-size: 11px; color: rgb(11 11 15 / .6); }
.ps-btn { margin-top: auto; padding: 11px; border-radius: 999px; background: var(--blue, #3A57E8); color: #fff; font-size: 12px; font-weight: 600; text-align: center; }
.ps-btn.ghost { background: var(--grey, #F4F5F7); color: var(--ink, #0B0B0F); margin-top: 0; }

/* Écran 1 : RDV */
.ps-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 10px; text-align: center; margin-top: 4px; }
.ps-cal span { padding: 5px 0; border-radius: 8px; }
.ps-cal .h { color: rgb(11 11 15 / .45); font-weight: 600; }
.ps-cal .off { color: rgb(11 11 15 / .25); }
.ps-cal .sel { background: var(--blue, #3A57E8); color: #fff; font-weight: 600; }
.ps-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ps-slots span { padding: 8px 0; border-radius: 10px; background: var(--grey, #F4F5F7); font-size: 11px; font-weight: 600; text-align: center; }
.ps-slots .sel { background: var(--ink, #0B0B0F); color: #fff; }

/* Écran 2 : fidélité */
.ps-card { padding: 14px; border-radius: 16px; background: var(--ink, #0B0B0F); color: #fff; margin-top: 4px; }
.ps-card small { display: block; font-size: 10px; opacity: .7; margin-bottom: 8px; }
.ps-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.ps-stamps span { aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .3); }
.ps-stamps .on { background: var(--blue, #3A57E8); border-color: var(--blue, #3A57E8); }
.ps-line { height: 8px; border-radius: 4px; background: var(--grey, #F4F5F7); }
.ps-line.short { width: 60%; }

/* Écran 3 : rappel */
.ps-notif { padding: 12px; border-radius: 14px; background: var(--grey, #F4F5F7); display: grid; gap: 4px; margin-top: 6px; }
.ps-notif b { font-size: 12px; }
.ps-notif span { font-size: 11px; color: rgb(11 11 15 / .65); }
.ps-notif small { font-size: 10px; color: rgb(11 11 15 / .45); }
.ps-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ps-row .ps-btn { margin-top: 0; padding: 9px; }

/* Indicateur des écrans */
.ps-dots { position: absolute; left: 0; right: 0; bottom: 7px; display: flex; justify-content: center; gap: 4px; z-index: 4; }
.ps-dots i { width: 4px; height: 4px; border-radius: 50%; background: rgb(11 11 15 / .2); animation: ps-dot 12s ease-in-out infinite; }
.ps-dots i:nth-child(1) { animation-delay: 0s; }
.ps-dots i:nth-child(2) { animation-delay: -8s; }
.ps-dots i:nth-child(3) { animation-delay: -4s; }
@keyframes ps-dot { 0%, 28% { background: var(--blue, #3A57E8); } 33%, 95% { background: rgb(11 11 15 / .2); } 100% { background: var(--blue, #3A57E8); } }

@media (prefers-reduced-motion: reduce) {
  .ps, .ps-dots i { animation: none; }
  .ps-1 { opacity: 1; }
  .ps-dots i:nth-child(1) { background: var(--blue, #3A57E8); }
}

/* Variante : un seul écran fixe, taille réduite */
.ps-static { opacity: 1; animation: none; }
.ps-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.ps-gallery span { aspect-ratio: 1; border-radius: 10px; background: linear-gradient(160deg, #2A2A31, #0B0B0F); }
.ps-gallery span:nth-child(2n) { background: linear-gradient(160deg, #3A57E8, #1C2A8A); }
.ps-dark { background: #0B0B0F; color: #fff; }
.ps-dark .ps-bar i { background: rgb(255 255 255 / .12); }
.ps-dark .ps-sub { color: rgb(255 255 255 / .6); }
.ps-dark .ps-btn { background: #fff; color: #0B0B0F; }

/* =====================================================================
   Écrans à l'échelle : --u vaut 1 % de la largeur de l'écran du téléphone.
   Toutes les tailles d'un écran .ps-u sont en --u : le contenu suit la taille du téléphone.
   ===================================================================== */
.phone-screen { container-type: inline-size; }
.ps-u { --u: 1.9px; }
@supports (width: 1cqw) { .ps-u { --u: 1cqw; } }

/* Téléphone des fiches Réalisations : vue de face */
.tel.phone-show { --tw: 172px; }
@media (min-width: 768px) { .tel.phone-show { --tw: 200px; } }

/* Base commune des écrans de fiche */
.sc { padding: calc(var(--u) * 14.5) calc(var(--u) * 7) calc(var(--u) * 7); gap: calc(var(--u) * 4.5); font-size: calc(var(--u) * 5); line-height: 1.35; }
.sc b { font-weight: 700; }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); }
.sc-logo { font-weight: 700; font-size: calc(var(--u) * 5.6); }
.sc-av { display: grid; place-items: center; width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; font-style: normal; font-weight: 700; font-size: calc(var(--u) * 5); }
.sc-title { font-size: calc(var(--u) * 9); line-height: 1.1; letter-spacing: -.02em; }
.sc-rows { display: grid; gap: calc(var(--u) * 2.5); }
.sc-rows span { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); padding: calc(var(--u) * 4.2) calc(var(--u) * 4.5); border-radius: calc(var(--u) * 5); font-weight: 600; font-size: calc(var(--u) * 4.8); }
.sc-rows em { font-style: normal; font-weight: 500; font-size: calc(var(--u) * 4.2); opacity: .7; white-space: nowrap; }
.sc-note { display: grid; gap: calc(var(--u) * 2); padding: calc(var(--u) * 4.5); border-radius: calc(var(--u) * 5); font-size: calc(var(--u) * 4.4); }
.sc-note b { font-size: calc(var(--u) * 4.8); }
.sc-btn { display: block; margin-top: auto; padding: calc(var(--u) * 4.6) calc(var(--u) * 4); border-radius: 999px; text-align: center; font-weight: 600; font-size: calc(var(--u) * 5); line-height: 1.2; }

/* --- Sifflitattoo : crème, brun, terracotta, titres en capitales espacées (son écran d'accueil) --- */
.sc-siff { background: #FAF1E4; color: #3A2118; font-family: "Tenor Sans", "Helvetica Neue", Arial, sans-serif; }
.sc-siff .sc { padding-left: 0; padding-right: 0; padding-bottom: 0; gap: 0; }
.sc-siff .sc-head { padding: 0 calc(var(--u) * 6) calc(var(--u) * 3.5); border-bottom: 1px solid rgb(205 179 154 / .5); }
.sc-siff .sc-logo { font-family: "Marcellus", Georgia, "Times New Roman", serif; font-weight: 400; font-size: calc(var(--u) * 4.6); letter-spacing: .1em; text-transform: uppercase; }
.sc-pill { padding: calc(var(--u) * 2) calc(var(--u) * 3.4); border-radius: 999px; background: #A34E2E; color: #fff; font-size: calc(var(--u) * 3.5); letter-spacing: .04em; white-space: nowrap; }
.sc-hero { display: grid; justify-items: center; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 11) calc(var(--u) * 7) calc(var(--u) * 10); text-align: center; }
.sc-over { font-size: calc(var(--u) * 3.6); letter-spacing: .3em; text-transform: uppercase; color: #6E5244; }
.sc-siff .sc-h1 { font-family: "Marcellus", Georgia, "Times New Roman", serif; font-weight: 400; font-size: calc(var(--u) * 10.5); line-height: 1.1; letter-spacing: .12em; text-transform: uppercase; }
.sc-orne { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 3); color: #C4673F; font-size: calc(var(--u) * 4.4); line-height: 1; }
.sc-orne::before, .sc-orne::after { content: ""; width: calc(var(--u) * 16); border-top: 1px solid rgb(110 82 68 / .55); }
.sc-hero p { color: #6E5244; font-size: calc(var(--u) * 4.7); line-height: 1.45; }
.sc-siff .sc-btn { margin-top: calc(var(--u) * 1.5); padding: calc(var(--u) * 4) calc(var(--u) * 8); background: #A34E2E; color: #fff; font-weight: 400; font-size: calc(var(--u) * 4.6); letter-spacing: .06em; }
.sc-siff .sc-btn.alt { margin-top: 0; background: none; color: #3A2118; box-shadow: inset 0 0 0 1px #3A2118; }
.sc-band { flex: 1; display: grid; align-content: start; justify-items: center; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 7) calc(var(--u) * 7) 0; background: #F2E3D0; }
.sc-band b { font-family: "Marcellus", Georgia, "Times New Roman", serif; font-weight: 400; font-size: calc(var(--u) * 6.4); letter-spacing: .04em; }
.sc-gal { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.5); margin-top: calc(var(--u) * 1.5); }
.sc-gal i { aspect-ratio: 4 / 5; border-radius: calc(var(--u) * 2.5); background: linear-gradient(160deg, #E6D0B8, #D9BC9E); }
.sc-gal i:nth-child(2n) { background: linear-gradient(200deg, #EAD6C0, #CDB39A); }

/* --- Glam Studio : blanc, encre, violet (d'après sa maquette) --- */
.sc-glam { background: #fff; color: #0F172A; }
.sc-glam .sc-pill { background: #6B3FD4; }
.sc-glam .sc-over { color: #6B3FD4; font-size: calc(var(--u) * 3.5); letter-spacing: .06em; font-weight: 600; }
.sc-glam .sc-title { font-size: calc(var(--u) * 11); }
.sc-p { margin: 0; color: #64748B; font-size: calc(var(--u) * 4.6); line-height: 1.4; }
.sc-tags { display: grid; justify-items: start; gap: calc(var(--u) * 1.8); }
.sc-tags span { padding: calc(var(--u) * 1.8) calc(var(--u) * 3.4); border-radius: 999px; background: #EFE9FB; color: #6B3FD4; font-size: calc(var(--u) * 3.7); font-weight: 600; }
.sc-glam .sc-btn { background: #6B3FD4; color: #fff; }
.sc-glam .sc-btn.alt { margin-top: 0; background: #F4F5F7; color: #0F172A; }
.sc-glam .sc-tabs span { box-shadow: inset 0 0 0 1px #E6E8EC; font-weight: 600; }
.sc-glam .sc-tabs .on { background: #6B3FD4; color: #fff; box-shadow: none; }
.sc-glam .sc-req { background: #fff; box-shadow: 0 0 0 1px #E6E8EC, 0 calc(var(--u) * 1.5) calc(var(--u) * 4) rgb(15 23 42 / .06); }
.sc-glam .sc-req b { font-weight: 700; }
.sc-glam .sc-req span, .sc-glam .sc-mini { color: #64748B; }
.sc-glam .sc-req em { background: #EFE9FB; color: #6B3FD4; font-weight: 600; }
.sc-glam .sc-req em.ok { background: #E1F5E8; color: #1E8A4C; }
.sc-glam .sc-req em.wait { background: #FFF1D6; color: #B96A00; }
.sc-glam .sc-mini { padding-left: 0; padding-right: 0; }
.sc-glam .sc-mini b { color: #0F172A; font-weight: 700; }

/* --- Démo coach sportif : sombre, accent bleu --- */
.sc-coach { background: #0B0B0F; color: #fff; }
.sc-coach .sc-av { background: var(--blue, #3A57E8); color: #fff; }
.sc-coach .sc-rows span { background: rgb(255 255 255 / .08); }
.sc-coach .sc-rows .on { background: var(--blue, #3A57E8); }
.sc-coach .sc-rows .on em { opacity: 1; }
.sc-coach .sc-note { background: rgb(255 255 255 / .08); }
.sc-bar { display: block; height: calc(var(--u) * 3); border-radius: 999px; background: rgb(255 255 255 / .16); overflow: hidden; }
.sc-bar i { display: block; width: 60%; height: 100%; border-radius: inherit; background: var(--blue, #3A57E8); }
.sc-coach .sc-btn { background: #fff; color: #0B0B0F; }

/* Côté pro des fiches : tableau de bord (Sifflitattoo ci-dessous, les autres reprennent ces pièces à leurs couleurs) */
.phone-screen[data-views] { cursor: pointer; }
.sc-siff .sc-view-pro { padding-left: 0; padding-right: 0; }
.sc-pro { flex: 1; display: grid; align-content: start; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 4) calc(var(--u) * 5) 0; background: #F2E3D0; }
.sc-tabs { display: flex; gap: calc(var(--u) * 1.5); }
.sc-tabs span { flex: 1; padding: calc(var(--u) * 2) 0; border-radius: 999px; text-align: center; font-size: calc(var(--u) * 3.6); box-shadow: inset 0 0 0 1px rgb(110 82 68 / .4); }
.sc-tabs .on { background: #A34E2E; color: #fff; box-shadow: none; }
.sc-req { display: grid; gap: calc(var(--u) * .8); padding: calc(var(--u) * 3.4) calc(var(--u) * 4); border-radius: calc(var(--u) * 3.5); background: #FAF1E4; font-size: calc(var(--u) * 3.6); }
.sc-req b { font-size: calc(var(--u) * 4.4); font-weight: 400; }
.sc-req span { color: #6E5244; }
.sc-req em { justify-self: start; padding: calc(var(--u) * .8) calc(var(--u) * 2.4); border-radius: 999px; background: #A34E2E; color: #fff; font-style: normal; font-size: calc(var(--u) * 3.2); }
.sc-req em.ok { background: #DDE8D3; color: #3C5A2A; }
.sc-req em.wait { background: #F6DFC9; color: #8A4B1F; }
.sc-mini { display: grid; gap: calc(var(--u) * .8); padding: calc(var(--u) * 3) calc(var(--u) * 4); font-size: calc(var(--u) * 3.5); color: #6E5244; }
.sc-mini b { color: #3A2118; font-weight: 400; font-size: calc(var(--u) * 4); }

.sc-lab { font-size: calc(var(--u) * 3.4); letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.sc-gal3 { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.sc-coach .sc-tabs span { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
.sc-coach .sc-tabs .on { background: var(--blue, #3A57E8); box-shadow: none; }

/* Brief. : gris bleuté, cartouches sombres pour les valeurs calculées, chiffres en chasse fixe (d'après la maquette) */
.sc-brief { background: #EEF1F6; color: #0E1726; }
.sc-brief .sc { gap: calc(var(--u) * 3.6); }
.sc-brief .sc-logo { font-size: calc(var(--u) * 6.4); letter-spacing: -.02em; }
.sc-brief .sc-logo i { font-style: normal; color: #2F5BE0; }
.sc-brief .sc-pill { background: #E4EAFF; color: #2F5BE0; font-weight: 600; }
.sc-legend { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5) calc(var(--u) * 4); font-size: calc(var(--u) * 3.3); color: #5E6C82; }
.sc-legend span { display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
.sc-legend span::before { content: ""; width: calc(var(--u) * 3); height: calc(var(--u) * 3); border-radius: calc(var(--u) * .8); background: #fff; box-shadow: inset 0 0 0 1px #A5AFC0; }
.sc-legend .fx::before { background: #101A2C; box-shadow: none; }
.sc-brief .sc-rows span { background: #fff; padding: calc(var(--u) * 3.4) calc(var(--u) * 4.5); box-shadow: 0 0 0 1px #E1E6EE; }
.sc-brief .sc-rows em { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #A5AFC0; opacity: 1; letter-spacing: .04em; }
.sc-brief .sc-rows em.ok, .sc-brief .sc-rows em.wait { padding: calc(var(--u) * .8) calc(var(--u) * 2.4); border-radius: 999px; font-family: inherit; font-weight: 600; letter-spacing: 0; font-size: calc(var(--u) * 3.4); }
.sc-brief .sc-rows em.ok { background: #E1F5E8; color: #1E8A4C; }
.sc-brief .sc-rows em.wait { background: #FFF1D6; color: #B96A00; }
.sc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.5); }
.sc-tiles span { display: grid; gap: calc(var(--u) * .6); padding: calc(var(--u) * 3.4) calc(var(--u) * 4); border-radius: calc(var(--u) * 4); background: #101A2C; color: #9FE1FF; font-weight: 600; font-size: calc(var(--u) * 3.7); }
.sc-tiles em { font-style: normal; font-weight: 500; font-size: calc(var(--u) * 3.3); color: #8A9BB8; }
.sc-new { padding: calc(var(--u) * 4) 0; border-radius: calc(var(--u) * 5); background: #2F5BE0; color: #fff; text-align: center; font-weight: 600; }
.sc-brief .sc-note { background: #fff; box-shadow: 0 0 0 1px #E1E6EE; }
.sc-brief .sc-bar { background: #E1E6EE; }
.sc-brief .sc-bar i { background: #2F5BE0; }
.sc-brief .sc-btn { background: #2F5BE0; color: #fff; }
.ps.sc[hidden] { display: none; }

/* Crisis Log : tableau de bord de montage, sombre, accent bleu */
.sc-crisis { background: #0E1018; color: #fff; }
.sc-crisis .sc { gap: calc(var(--u) * 3.6); }
.sc-ok { padding: calc(var(--u) * 1.6) calc(var(--u) * 3); border-radius: 999px; background: rgb(58 87 232 / .2); color: #AEBBFF; font-size: calc(var(--u) * 3.3); white-space: nowrap; }
.sc-crisis .sc-tabs span { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
.sc-crisis .sc-tabs .on { background: var(--blue, #3A57E8); }
.sc-crisis .sc-title { font-size: calc(var(--u) * 7.4); }
.sc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.4); }
.sc-steps i { padding: calc(var(--u) * 1.6) 0; border-radius: calc(var(--u) * 2); background: rgb(255 255 255 / .08); text-align: center; font-style: normal; font-size: calc(var(--u) * 3.3); color: rgb(255 255 255 / .6); }
.sc-steps .done { color: #AEBBFF; box-shadow: inset 0 0 0 1px rgb(58 87 232 / .6); }
.sc-steps .on { background: var(--blue, #3A57E8); color: #fff; font-weight: 600; }
.sc-crisis .sc-rows span { background: rgb(255 255 255 / .08); padding: calc(var(--u) * 3) calc(var(--u) * 4); font-size: calc(var(--u) * 4.2); }
.sc-crisis .sc-gal3 i { aspect-ratio: 16 / 9; background: linear-gradient(160deg, #2A2F45, #11131C); }
.sc-crisis .sc-gal3 i:nth-child(2) { background: linear-gradient(200deg, #3A57E8, #1C2A8A); }
.sc-crisis .sc-btn { background: var(--blue, #3A57E8); color: #fff; }

/* --- Glam Studio, côté pro : planning de la journée, une couleur par prestation (d'après la maquette) --- */
.sc-glam .t-pose { --c: #6B3FD4; } .sc-glam .t-gain { --c: #C2337A; } .sc-glam .t-rem { --c: #0E7C7E; } .sc-glam .t-dep { --c: #B45309; }
.sc-week { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * 1.4); }
.sc-week i { padding: calc(var(--u) * 2) 0; border-radius: calc(var(--u) * 3); background: #F4F5F7; text-align: center; font-style: normal; font-weight: 600; font-size: calc(var(--u) * 3.6); color: #64748B; }
.sc-week i.on { background: #6B3FD4; color: #fff; }
.sc-day { display: grid; gap: calc(var(--u) * 2); }
.sc-day span { display: grid; grid-template-columns: calc(var(--u) * 11) minmax(0, 1fr); column-gap: calc(var(--u) * 2.5); padding: calc(var(--u) * 2.6) calc(var(--u) * 3.4); border-radius: calc(var(--u) * 3.5); background: color-mix(in srgb, var(--c) 9%, #fff); box-shadow: inset calc(var(--u) * 1.2) 0 0 var(--c); }
.sc-day time { grid-row: 1 / span 2; font-weight: 700; font-size: calc(var(--u) * 3.6); color: var(--c); }
.sc-day b { font-size: calc(var(--u) * 4); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-day small { font-size: calc(var(--u) * 3.3); color: #64748B; }
.sc-presta { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.4); }
.sc-presta span { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.6); border-radius: 999px; background: #F4F5F7; font-size: calc(var(--u) * 3.3); font-weight: 600; }
.sc-presta span::before { content: ""; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); border-radius: 50%; background: var(--c); }
.sc-glam .sc-tabbar { margin-top: auto; }

/* --- Coaching sportif : tableau de bord noir et blanc, sans couleur d'état (d'après la maquette) --- */
.sc-coach { background: #050505; }
.sc-caps { font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.sc-coach .sc-av { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); font-size: calc(var(--u) * 4); letter-spacing: .05em; }
.sc-coach .sc-tabs .on { background: #F2F2F3; color: #050505; }
.sc-add { padding: calc(var(--u) * 3.8) 0; border-radius: calc(var(--u) * 4.5); background: #F2F2F3; color: #050505; text-align: center; font-weight: 700; font-size: calc(var(--u) * 4.4); }
.sc-list { display: grid; border-radius: calc(var(--u) * 4.5); background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); overflow: hidden; }
.sc-list span { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 3.4) calc(var(--u) * 4.5); font-weight: 600; font-size: calc(var(--u) * 4.4); }
.sc-list span + span { border-top: 1px solid rgb(255 255 255 / .1); }
.sc-list em { font-style: normal; color: #9CA3AF; font-size: calc(var(--u) * 5); line-height: 1; }
.sc-step { font-size: calc(var(--u) * 3.6); color: #9CA3AF; }
.sc-coach .sc-bar { height: calc(var(--u) * 1.6); }
.sc-coach .sc-bar i { width: 25%; background: #F2F2F3; }
.sc-coach .sc-title { font-size: calc(var(--u) * 8.4); }
.sc-coach .sc-p { color: #9CA3AF; }
.sc-opts { gap: calc(var(--u) * 2); background: none; box-shadow: none; }
.sc-opts span { border-radius: calc(var(--u) * 4); background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.sc-opts span + span { border-top: 0; }
.sc-opts .on { background: #F2F2F3; color: #050505; }
.sc-coach .sc-btn { background: #F2F2F3; color: #050505; }.sc-shot { padding: var(--tel-safe, 30px) 0 0; display: block; }
.sc-shot img { display: block; width: 100%; height: auto; }
.sc-siff .sc-shot { background: #FAF0E6; } .sc-glam .sc-shot { background: #111; }
.sc-shot[hidden] { display: none; }