/* Векторные макеты экранов приложения Supermoms 5.0 (разметка — _app_phones.php).
   Внутри экрана всё в em: 1em = 16 px эталонного экрана 528×1147,
   поэтому телефон масштабируется целиком. */

/* ---------- корпус ---------- */
.sph{--plum:#2A1530;--berry:#B0124F;--cream:#FFF7F2;--peach:#FFE3D3;--mint:#D8F1E4;--butter:#FFF1C9;--line:#F1DCD3;--muted:#6B4E5C;
  position:relative;aspect-ratio:100/211.8;border-radius:15%/7.1%;background:#15161b;container-type:inline-size;text-align:left;flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 12px 30px rgba(42,21,48,.25),0 30px 60px -20px rgba(42,21,48,.35)}
.sph-s{position:absolute;inset:2.4cqw;overflow:hidden;border-radius:13.4%/6.2%;background:var(--cream);color:var(--plum);
  font:400 2.885cqw/1.35 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;pointer-events:none}
.sph-s *{box-sizing:border-box}
.sph-s i,.sph-s em{font-style:normal}
.sph-s b{font-weight:800}
.sph-s small{font-size:1em}
.sph-s img{display:block}
.sph-i{display:block;flex:none;width:1.4em;height:1.4em}
.sph-pf{font-family:"Playfair Display",Georgia,serif}

/* ---------- статус-бар, вкладки, шапка ---------- */
.sph-sb{position:relative;flex:none;height:4.4em;display:flex;align-items:center;justify-content:space-between;padding:0 2.5em 0 3.4em}
.sph-sb b{font-size:1.375em;font-weight:700}
.sph-isl{position:absolute;left:50%;top:.9em;width:10.2em;height:3em;margin-left:-5.1em;background:#000;border-radius:1.5em}
.sph-sb span{display:flex;align-items:center;gap:.4em}
.sph-sb svg{display:block;height:1em;fill:currentColor}
.sph-s--dark .sph-sb{color:#fff}

.sph-tab{position:relative;flex:none;margin-top:auto;height:7.3em;padding-top:.9em;background:#FFFAF7;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr)}
.sph-tab span{display:flex;flex-direction:column;align-items:center;gap:.3em;font-size:.82em;font-weight:600;color:var(--muted);white-space:nowrap}
.sph-tab i{width:4.9em;height:2.6em;border-radius:1.3em;display:flex;align-items:center;justify-content:center}
.sph-tab .sph-i{width:1.7em;height:1.7em}
.sph-tab .on{color:var(--plum);font-weight:800}
.sph-tab .on i{background:#FFE0D6;color:var(--berry)}
.sph-tab::after,.sph-s--notab::after{content:"";position:absolute;left:33%;right:33%;bottom:.55em;height:.32em;border-radius:.2em;background:var(--plum);z-index:3}

.sph-hd{flex:none;display:flex;align-items:center;gap:.7em;min-height:4.6em;padding:.3em 1.4em .8em}
.sph-hd h5{flex:1;min-width:0;margin:0;font:600 1.65em/1.2 "Playfair Display",Georgia,serif;color:var(--plum);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sph-hd i{flex:none;width:2.9em;height:2.9em;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.sph-hd .sph-i{width:1.35em;height:1.35em}

.sph-body{position:relative;flex:1;min-height:0;overflow:hidden}
.sph-pad{display:flex;flex-direction:column;gap:.9em;padding:0 1.3em}
.sph-pad>*,.sph-ch>*{flex:none}

/* ---------- общие детали ---------- */
.sph-card{background:#fff;border:1px solid var(--line);border-radius:1.6em}
.sph-tile{flex:none;width:2.6em;height:2.6em;border-radius:.85em;display:flex;align-items:center;justify-content:center;color:var(--plum)}
.sph-tile .sph-i{width:1.3em;height:1.3em}
.sph-tile--r{border-radius:50%}
.sph-peach{background:var(--peach)}
.sph-mint{background:var(--mint)}
.sph-butter{background:var(--butter)}
.sph-h6{margin:.15em 0 0;font:600 1.35em/1.2 "Playfair Display",Georgia,serif;color:var(--plum)}
.sph-ai{flex:none;display:block;width:2.3em;height:2.3em;border-radius:50%;
  background:radial-gradient(circle,#FFF7F2 0 21%,#B0124F 23% 45%,#F5D0DC 47%)}
.sph-av{flex:none;width:2.6em;height:2.6em;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--plum)}
.sph-corn{flex:none;width:7.5em;height:7.5em;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sph-corn img{width:80%;height:80%;object-fit:contain}
.sph-corn--w{width:7.3em;height:7.3em}

/* ---------- главная ---------- */
.sph-hm-top{flex:none;background:var(--plum);color:#fff;border-radius:0 0 2.5em 2.5em;padding-bottom:1.15em}
.sph-hm-hello{display:flex;align-items:center;justify-content:space-between;height:4.3em;padding:0 1.6em}
.sph-hm-hello span{font-size:1.06em;font-weight:600;color:rgba(255,255,255,.72)}
.sph-hm-hello i{width:2.7em;height:2.7em;border-radius:50%;background:var(--peach);color:var(--plum);font-size:1.15em;font-weight:800;display:flex;align-items:center;justify-content:center}
.sph-hm-hero{display:grid;grid-template-columns:1fr 7.5em;gap:1em;align-items:center;padding:0 1.6em}
.sph-hm-wk{display:flex;align-items:baseline;gap:.3em;line-height:1}
.sph-hm-wk b{font:600 5em/1 "Playfair Display",Georgia,serif}
.sph-hm-wk em{font:italic 500 1.65em/1 "Playfair Display",Georgia,serif}
.sph-hm-hero p{margin:.5em 0 0;font-size:1.06em;line-height:1.53;color:rgba(255,255,255,.86)}
.sph-hm-pill{display:inline-flex;align-items:center;gap:.45em;margin:.8em 0 0 1.7em;padding:.5em .95em;border-radius:2em;background:rgba(255,255,255,.12);font-size:.94em;font-weight:700}
.sph-hm-pill .sph-i{width:1.1em;height:1.1em;color:#FF9DBB}
.sph-prog{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;margin:.9em 1.6em 0}
.sph-prog i{display:block;height:.38em;border-radius:.2em;background:rgba(255,255,255,.18);overflow:hidden}
.sph-prog b{display:block;height:100%;background:var(--peach);border-radius:inherit}
.sph-hm-tri{margin:.5em 0 0 1.8em;font-size:.88em;font-weight:600;color:rgba(255,255,255,.6)}
.sph-s--home .sph-pad{padding-top:1em;gap:.75em}

.sph-warm{position:relative;overflow:hidden;border-radius:1.6em;background:linear-gradient(135deg,#FCD5E0,#FFE6DA);padding:1em 1.4em 1.1em}
.sph-warm__h{position:relative;display:flex;align-items:center;gap:.45em;font-size:.94em;font-weight:800;color:var(--berry)}
.sph-warm__h span{flex:1}
.sph-warm__h .sph-i{width:1.15em;height:1.15em}
.sph-warm p{position:relative;margin:.45em 0 0;font:italic 500 1.5em/1.3 "Playfair Display",Georgia,serif;color:var(--plum)}
.sph-warm .sph-warm__deco{position:absolute;right:-1em;bottom:-1.3em;width:6.5em;height:6.5em;color:var(--berry);opacity:.07}

.sph-aic{border-radius:1.6em;background:var(--peach);padding:1em 1.3em 1.1em}
.sph-aic__h{display:flex;align-items:center;gap:.6em;font-size:.88em;font-weight:800;color:var(--berry)}
.sph-aic p{margin:.5em 0 .75em;font-size:1.12em;line-height:1.45;font-weight:600}
.sph-aic__b{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.sph-aic__b span{height:3.2em;border-radius:1.6em;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:.94em;font-weight:800}
.sph-aic__b .sph-pick{background:var(--plum);color:#fff}

.sph-met{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}
.sph-met>div{background:#fff;border:1px solid var(--line);border-radius:1.3em;padding:.7em .75em .75em}
.sph-met .sph-tile{width:2.3em;height:2.3em;border-radius:.75em}
.sph-met small{display:block;margin-top:.45em;font-size:.82em;font-weight:600;color:var(--muted)}
.sph-met b{display:block;margin-top:.1em;font-size:1.1em;white-space:nowrap}
.sph-met .sph-sm{font-size:.86em;line-height:1.25;white-space:normal}

.sph-ask{position:absolute;left:1.2em;right:1.2em;bottom:7.85em;z-index:2;height:4.1em;border-radius:2.05em;background:#fff;color:var(--muted);
  box-shadow:0 .4em 1.4em rgba(42,21,48,.14);display:flex;align-items:center;gap:.8em;padding:0 .4em 0 1.3em}
.sph-ask span{flex:1;min-width:0;font-size:.98em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sph-ask i{flex:none;width:3.3em;height:3.3em;border-radius:50%;background:#E2A3BB;color:#fff;display:flex;align-items:center;justify-content:center}

/* ---------- чат с ИИ ---------- */
.sph-ch-hd{flex:none;display:flex;align-items:center;gap:.7em;padding:.3em 1.2em .9em;border-bottom:1px solid var(--line)}
.sph-ch-hd>.sph-i{width:1.6em;height:1.6em}
.sph-ch-hd .sph-ai--l{width:2.6em;height:2.6em}
.sph-ch-hd b{display:block;font-size:1.06em}
.sph-ch-hd small{display:block;margin-top:.1em;font-size:.78em;color:var(--muted)}
.sph-ch{display:flex;flex-direction:column;gap:.8em;padding:1.1em 1.2em 0}
.sph-u{align-self:flex-end;max-width:80%;padding:.7em 1em;border-radius:1.5em 1.5em .45em 1.5em;background:var(--berry);color:#fff;font-size:1.04em;line-height:1.42;font-weight:600}
.sph-b{display:flex;align-items:flex-start;gap:.55em;max-width:91%}
.sph-b .sph-ai{width:2em;height:2em;margin-top:.1em}
.sph-b p{margin:0;padding:.7em 1em;border-radius:.45em 1.5em 1.5em 1.5em;background:#fff;border:1px solid var(--line);font-size:.98em;line-height:1.45}
.sph-logged{margin-left:2.55em;padding:.9em 1.1em;border-radius:1.3em;background:var(--mint);color:#1F5B3F}
.sph-logged__h{display:flex;align-items:center;gap:.6em;font-size:.72em;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.sph-logged__h i{width:2em;height:2em;border-radius:50%;background:#1F6B45;color:#fff;display:flex;align-items:center;justify-content:center}
.sph-logged__h .sph-i{width:1.25em;height:1.25em;stroke-width:3}
.sph-logged__v{display:flex;align-items:baseline;gap:.35em;margin-top:.3em;color:var(--plum)}
.sph-logged__v b{font:600 2.6em/1.05 "Playfair Display",Georgia,serif}
.sph-logged__v span{font-size:1.1em;font-weight:700}
.sph-logged__v em{margin-left:auto;align-self:center;padding:.35em .8em;border-radius:2em;background:#fff;color:#1F5B3F;font-size:.82em;font-weight:800}
.sph-askmoms{display:flex;align-items:center;gap:.8em;padding:.8em 1em;border-radius:1.4em;background:#fff;border:1px solid var(--line)}
.sph-askmoms div{flex:1;min-width:0}
.sph-askmoms b{display:block}
.sph-askmoms small{display:block;margin-top:.1em;font-size:.8em;line-height:1.3;color:var(--muted)}
.sph-askmoms>.sph-i{width:1.2em;height:1.2em;color:var(--muted)}
.sph-disc{margin:0;font-size:.76em;line-height:1.35;text-align:center;color:var(--muted)}
.sph-ch-in{flex:none;display:flex;align-items:center;gap:.6em;padding:.8em 1.2em 2.6em;background:var(--cream)}
.sph-ch-in div{flex:1;min-width:0;height:4em;border-radius:2em;background:#fff;border:1px solid var(--line);display:flex;align-items:center;gap:.6em;padding:0 1.1em;color:var(--muted)}
.sph-ch-in span{flex:1;min-width:0;font-size:.96em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sph-ch-in i{flex:none;width:3.5em;height:3.5em;border-radius:50%;background:var(--berry);color:#fff;display:flex;align-items:center;justify-content:center}

/* ---------- мой срок ---------- */
.sph-wk-chips{display:flex;gap:.5em;height:5.3em;padding-left:1.3em}
.sph-wk-chips span{position:relative;flex:none;width:2.6em;height:2.6em;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font:600 1.25em/1 "Playfair Display",Georgia,serif}
.sph-wk-chips .past{background:var(--peach);border-color:var(--peach)}
.sph-wk-chips .now{background:var(--berry);border-color:var(--berry);color:#fff}
.sph-wk-chips em{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:.35em;font:800 .56em/1 Nunito,sans-serif;color:var(--berry);white-space:nowrap}
.sph-wk-card{margin:0 1.3em;padding:1.2em 1.4em 1.3em;border-radius:1.6em;background:var(--berry);color:#fff}
.sph-wk-card small{display:block;font-size:.72em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.sph-wk-row{display:grid;grid-template-columns:1fr 7.3em;gap:1em;align-items:center;margin-top:.2em}
.sph-wk-card .sph-hm-wk b{font-size:5.4em}
.sph-wk-card .sph-hm-wk em{font-size:2em}
.sph-dots{display:grid;grid-template-columns:repeat(40,1fr);gap:.12em;margin-top:1em}
.sph-dots i{display:block;height:.62em;border-radius:.2em;background:rgba(255,255,255,.35)}
.sph-dots .on{background:#fff}
.sph-wk-card p{margin:.6em 0 0;font:600 1.6em/1.25 "Playfair Display",Georgia,serif}
.sph-wk-pill{display:inline-flex;align-items:center;gap:.4em;margin-top:.9em;padding:.45em .9em;border-radius:2em;background:rgba(255,255,255,.16);font-size:.88em;font-weight:800}
.sph-wk-pill .sph-i{width:1.1em;height:1.1em}
.sph-wk-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;margin:1em 1.3em 0}
.sph-wk-tiles>div{min-height:5.6em;padding:.9em .9em 1em;border-radius:1.3em}
.sph-wk-tiles small{display:block;font-size:.68em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sph-wk-tiles b{display:block;margin-top:.35em;font-size:1.02em;line-height:1.25}
.sph-wk-baby{margin:1em 1.3em 0;padding:1.1em 1.3em}
.sph-wk-baby h6{margin:0 0 .3em;font:600 1.35em/1.2 "Playfair Display",Georgia,serif}
.sph-wk-baby p{margin:0;font-size:.96em;line-height:1.45;color:#4A3340}

/* ---------- лента «Мамы» ---------- */
.sph-fd-chips{display:flex;gap:.5em;padding:0 1.3em .9em;white-space:nowrap}
.sph-fd-chips span{padding:.55em 1em;border-radius:2em;background:#fff;border:1px solid var(--line);font-size:.88em;font-weight:800}
.sph-fd-chips .on{background:var(--plum);border-color:var(--plum);color:#fff}
.sph-post{margin:0 1.2em .9em;padding:1.1em 1.2em;border-radius:1.6em;background:#fff;border:1px solid var(--line)}
.sph-post__a{display:flex;align-items:center;gap:.7em}
.sph-post__a div{flex:1;min-width:0}
.sph-post__a b{display:block;font-size:.98em}
.sph-post__a small{display:block;font-size:.78em;color:var(--muted)}
.sph-post__a>.sph-i{color:var(--muted)}
.sph-post>p{margin:.65em 0 .7em;font-size:1em;line-height:1.45}
.sph-reply{display:flex;gap:.55em;padding:.65em .8em;border-radius:1.1em;background:#FFF3EC}
.sph-reply .sph-av{width:2.1em;height:2.1em;font-size:.85em}
.sph-reply b{display:block;font-size:.8em}
.sph-reply span{display:block;font-size:.86em;line-height:1.38}
.sph-reac{display:flex;gap:.45em;margin-top:.7em}
.sph-reac span{display:inline-flex;align-items:center;gap:.35em;padding:.35em .75em;border-radius:2em;border:1px solid var(--line);font-size:.8em;font-weight:800;white-space:nowrap}
.sph-reac .on{background:#FFE0D6;border-color:#FFE0D6;color:var(--berry)}
.sph-reac .sph-i{width:1.25em;height:1.25em}
.sph-post__f{display:flex;gap:1.2em;margin-top:.75em;font-size:.88em;font-weight:800;color:var(--muted)}
.sph-post__f span{display:inline-flex;align-items:center;gap:.35em}
.sph-post__f .sph-i{width:1.3em;height:1.3em}
.sph-post__f .sph-like{color:var(--berry)}
.sph-poll{padding:.8em .9em;border-radius:1.2em;border:1px solid var(--line)}
.sph-poll small{display:flex;align-items:center;gap:.35em;font-size:.72em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--berry)}
.sph-poll small .sph-i{width:1.3em;height:1.3em}
.sph-poll b{display:block;margin:.3em 0 .5em}
.sph-poll__o{position:relative;display:flex;align-items:center;height:2.7em;margin-top:.4em;padding:0 .9em;border-radius:.9em;background:#FFF6F1;overflow:hidden;font-size:.9em;font-weight:700}
.sph-poll__o .sph-fill{position:absolute;left:0;top:0;bottom:0;background:var(--peach)}
.sph-poll__o span,.sph-poll__o em{position:relative}
.sph-poll__o span{flex:1}
.sph-poll__o em{font-weight:800}
.sph-fab{position:absolute;right:1.3em;bottom:1.1em;z-index:2;height:3.6em;padding:0 1.3em;border-radius:1.8em;background:var(--berry);color:#fff;
  display:flex;align-items:center;gap:.5em;font-size:.94em;font-weight:800;box-shadow:0 .5em 1.2em rgba(176,18,79,.35)}
.sph-fab .sph-i{width:1.2em;height:1.2em}

/* ---------- поиск по сообществу ---------- */
.sph-field{display:flex;align-items:center;gap:.6em;height:3.7em;padding:0 1em;border-radius:1.4em;background:#fff;border:1px solid var(--line)}
.sph-field .sph-i{width:1.3em;height:1.3em;color:var(--berry)}
.sph-field span{flex:1;min-width:0;font-size:.98em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sph-field--ph span{font-weight:400;color:var(--muted)}
.sph-field--ph .sph-i{color:var(--muted)}
.sph-sr{padding:1.1em 1.2em 1.2em}
.sph-sr__h{display:flex;align-items:center;gap:.7em}
.sph-sr__h b{display:block;font-size:1.04em}
.sph-sr__h small{display:block;font-size:.78em;color:var(--muted)}
.sph-sr>p{margin:.7em 0 .6em;font-size:.94em;line-height:1.45}
.sph-sr ol{list-style:none;display:flex;flex-direction:column;gap:.5em;counter-reset:sph}
.sph-sr li{display:flex;align-items:flex-start;gap:.55em;font-size:.86em;line-height:1.38;counter-increment:sph}
.sph-sr li::before{content:counter(sph);flex:none;width:1.8em;height:1.8em;border-radius:50%;background:var(--mint);color:#1F5B3F;font-size:.88em;font-weight:800;display:flex;align-items:center;justify-content:center}
.sph-sr li span{flex:1}
.sph-sr li em{flex:none;margin-top:.1em;padding:.1em .55em;border-radius:1em;border:1px solid var(--line);font-size:.82em;font-weight:800;color:var(--muted);white-space:nowrap}
.sph-doc{display:flex;align-items:flex-start;gap:.5em;margin-top:.8em;padding:.6em .8em;border-radius:.9em;background:#FAE3E3;color:#8E1446;font-size:.8em;line-height:1.35;font-weight:600}
.sph-doc .sph-i{width:1.3em;height:1.3em}
.sph-docs{display:inline-flex;align-items:center;gap:.4em;margin-top:.7em;padding:.4em .85em;border-radius:2em;background:var(--peach);font-size:.8em;font-weight:800}
.sph-docs .sph-i{width:1.3em;height:1.3em;color:var(--berry)}
.sph-sim{display:flex;align-items:baseline;justify-content:space-between;margin-top:.1em}
.sph-sim h6{margin:0;font:600 1.25em/1.2 "Playfair Display",Georgia,serif}
.sph-sim span{font-size:.82em;font-weight:700;color:var(--muted)}
.sph-story{padding:.9em 1.1em}
.sph-story__m{display:flex;align-items:center;gap:.5em;font-size:.78em;font-weight:700;color:var(--muted)}
.sph-story__m em{padding:.15em .6em;border-radius:1em;background:var(--mint);color:#1F5B3F;font-weight:800}
.sph-story p{margin:.35em 0 .4em;font-size:.94em;line-height:1.4}
.sph-story__c{display:inline-flex;align-items:center;gap:.35em;font-size:.82em;font-weight:800;color:var(--muted)}
.sph-story__c .sph-i{width:1.3em;height:1.3em}

/* ---------- журналы ---------- */
.sph-diary{display:flex;align-items:center;gap:.9em;padding:1.2em;border-radius:1.6em;background:linear-gradient(120deg,#FFDCCB,#FFF0C8)}
.sph-diary>i{flex:none;width:3.2em;height:3.2em;border-radius:1em;background:#fff;color:var(--berry);display:flex;align-items:center;justify-content:center}
.sph-diary div{flex:1;min-width:0}
.sph-diary b{display:block;font:600 1.5em/1.2 "Playfair Display",Georgia,serif}
.sph-diary small{display:block;margin-top:.15em;font-size:.86em;line-height:1.35;color:var(--muted)}
.sph-diary>.sph-i{color:var(--berry)}
.sph-jrow{display:flex;align-items:center;gap:.9em;height:5.4em;padding:0 1.1em;border-radius:1.6em;background:#fff;border:1px solid var(--line)}
.sph-jrow div{flex:1;min-width:0}
.sph-jrow b{display:block}
.sph-jrow small{display:block;font-size:.82em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sph-jrow>.sph-i{width:1.2em;height:1.2em;color:var(--muted)}
.sph-tip{display:flex;align-items:flex-start;gap:.6em;padding:.85em 1em;border-radius:1.3em;background:var(--butter);font-size:.86em;line-height:1.4}
.sph-tip .sph-i{color:#B07A00}

/* ---------- вес и живот ---------- */
.sph-jsum{padding:1.1em 1.2em 1em}
.sph-jsum__v{display:flex;align-items:baseline;gap:.35em}
.sph-jsum__v b{font:600 2.5em/1.05 "Playfair Display",Georgia,serif}
.sph-jsum__v span{font-size:1.1em;font-weight:700}
.sph-jsum__v em{margin-left:auto;align-self:center;padding:.35em .8em;border-radius:2em;background:#DDF2E6;color:#1F6B45;font-size:.82em;font-weight:800;white-space:nowrap}
.sph-norm{margin-top:.8em;padding:.75em .95em;border-radius:1.1em;background:var(--mint);color:#1F5B3F}
.sph-norm b{display:block;font-size:.86em}
.sph-norm span{display:block;margin-top:.2em;font-size:.76em;line-height:1.38}
.sph-chart{display:block;width:100%;height:auto;margin-top:.8em;overflow:visible}
.sph-chart text{font:700 15px Nunito,sans-serif;fill:#6B4E5C}
.sph-jlist{padding:.2em 1.2em}
.sph-jlist>div{display:flex;align-items:center;justify-content:space-between;height:3.2em;border-top:1px solid var(--line)}
.sph-jlist>div:first-child{border-top:0}
.sph-jlist b{font-size:1.02em}
.sph-jlist b small{font-size:.85em;font-weight:700;color:var(--muted)}
.sph-jlist span{font-size:.82em;font-weight:600;color:var(--muted)}
.sph-add{position:absolute;left:1.3em;right:1.3em;bottom:2.4em;z-index:2;height:3.9em;border-radius:1.95em;background:var(--berry);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:.4em;font-weight:800;box-shadow:0 .5em 1.2em rgba(176,18,79,.3)}
.sph-add .sph-i{width:1.25em;height:1.25em}
.sph-video{padding:.9em 1em 1em}
.sph-video__h{display:flex;align-items:center;gap:.6em}
.sph-video__p{position:relative;height:12.5em;margin-top:.7em;border-radius:1.2em;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#D9708F,#B0124F 55%,#8E1446)}
.sph-video__p>svg{position:absolute;inset:0;width:100%;height:100%}
.sph-video__p circle{fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.2;transform-box:view-box;transform-origin:100px 60px}
.sph-video__p span{position:relative;font:600 1.6em/1 "Playfair Display",Georgia,serif;color:#fff}
.sph-video__p i{position:absolute;right:.9em;bottom:.9em;width:3em;height:3em;border-radius:50%;background:#fff;color:var(--berry);display:flex;align-items:center;justify-content:center}
.sph-video__p i .sph-i{width:1.3em;height:1.3em;margin-left:.15em}
.sph-video>small{display:block;margin-top:.6em;font-size:.78em;font-weight:600;color:var(--muted)}
.sph-video__b{display:flex;align-items:center;gap:1em;margin-top:.7em}
.sph-video__b span{display:inline-flex;align-items:center;gap:.4em;height:3em;padding:0 1.2em;border-radius:1.5em;background:var(--berry);color:#fff;font-size:.94em;font-weight:800}
.sph-video__b span .sph-i{width:1.2em;height:1.2em}
.sph-video__b em{font-size:.94em;font-weight:800;color:var(--berry)}
.sph-brow{display:flex;align-items:center;gap:.8em;padding:.7em .9em}
.sph-brow i{flex:none;width:3em;height:3em;border-radius:.8em;background:linear-gradient(150deg,#F7C6D3,#E79AB3)}
.sph-brow span{margin-left:auto;font-size:.82em;font-weight:600;color:var(--muted)}

/* ---------- «Можно ли?» ---------- */
.sph-lv--s{--c:#1F6B45;--b:#DDF2E6;--d:#2E9E62}
.sph-lv--c{--c:#7A5A00;--b:#FFF0C2;--d:#E0A800}
.sph-lv--a{--c:#B3263A;--b:#FBDCDC;--d:#D93A52}
.sph-lv{display:flex;gap:.4em}
.sph-lv span{display:inline-flex;align-items:center;gap:.4em;padding:.45em .8em;border-radius:2em;background:var(--b);color:var(--c);font-size:.8em;font-weight:800;white-space:nowrap}
.sph-lv span i{width:.6em;height:.6em;border-radius:50%;background:var(--d)}
.sph-safe{padding:0 1.1em}
.sph-safe>div{display:flex;align-items:center;gap:.7em;height:3.4em;border-top:1px solid var(--line)}
.sph-safe>div:first-child{border-top:0}
.sph-safe i{flex:none;width:.75em;height:.75em;margin:0 .15em;border-radius:50%;background:var(--d);box-shadow:0 0 0 .28em var(--b)}
.sph-safe b{flex:1;min-width:0;font-size:.96em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sph-safe em{font-size:.76em;font-weight:800;color:var(--c);white-space:nowrap}
.sph-safe .sph-i{width:1.1em;height:1.1em;color:var(--muted)}

/* ================== расстановка на главной ================== */
.sph-lazy{position:relative;width:100%;height:100%}
.sph-g .sph{position:absolute}

/* первый экран: три телефона веером */
.heading__img.sph-hero{position:relative;container-type:size}
.sph-hero .sph--c{width:calc(100cqh * .4722);top:0;left:calc(50% - 23.61cqh);z-index:2}
.sph-hero .sph--l,.sph-hero .sph--r{width:calc(84cqh * .4722);top:8cqh}
.sph-hero .sph--l{left:calc(50% - 50.3cqh);rotate:-6deg}
.sph-hero .sph--r{left:calc(50% + 10.6cqh);rotate:6deg}
/* рядом с текстом блок заходит за правый край окна — прижимаем веер к его левому краю */
@media (min-width:1001px){
  .sph-hero .sph--l{left:6cqh}
  .sph-hero .sph--c{left:32.7cqh}
  .sph-hero .sph--r{left:66.9cqh}
}

/* блоки «о приложении»: пара телефонов */
.about__img.sph-duo{position:relative;container-type:size}
.sph-duo .sph--f{width:calc(100cqh * .4722);top:0;left:0;z-index:2}
.sph-duo .sph--b{width:calc(86cqh * .4722);top:7cqh;right:0}
.sph-duo--r .sph--f{left:auto;right:0}
.sph-duo--r .sph--b{right:auto;left:0}

/* «Инструменты»: шесть телефонов наклонной сеткой */
.instruments__img.sph-fan{container-type:size}
.sph-fan .sph-lazy{position:absolute;inset:0;rotate:14deg}
.sph-fan .sph{width:calc(46cqh * .4722)}
.sph-fan .sph--a1,.sph-fan .sph--a2{left:calc(50% - 36.2cqh)}
.sph-fan .sph--b1,.sph-fan .sph--b2{left:calc(50% - 10.85cqh)}
.sph-fan .sph--c1,.sph-fan .sph--c2{left:calc(50% + 14.5cqh)}
.sph-fan .sph--a1{top:4cqh}
.sph-fan .sph--a2{top:54cqh}
.sph-fan .sph--b1{top:-10cqh}
.sph-fan .sph--b2{top:40cqh}
.sph-fan .sph--c1{top:16cqh}
.sph-fan .sph--c2{top:66cqh}

/* карусель «Приложение»: по телефону в слайде */
.app-swiper__slide.sph-g{container-type:size}
.app-swiper__slide .sph{width:min(92cqw, calc(92cqh * .4722));left:0;right:0;top:0;bottom:0;margin:auto}

/* ================== анимации ==================
   Класс sph-js ставит скрипт в <head>, если анимации уместны (есть
   IntersectionObserver и не включено «уменьшить движение»). Без него
   все экраны сразу в итоговом виде. Переходы описаны только для .play,
   поэтому снятие .play мгновенно возвращает исходное состояние. */
.sph-js .sph-g:not(.play) .sph{opacity:0;transform:translateY(24px)}
.sph-js .sph-g.play .sph{transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--p,0) * 140ms)}

.sph-js .sph-g:not(.play) .sph-a{opacity:0;transform:translateY(.9em)}
.sph-js .sph-g:not(.play) .sph-a--x{transform:translateX(1.6em)}
.sph-js .sph-g.play .sph-a{transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(.35s + var(--p,0) * 140ms + var(--i,0) * 90ms)}

.sph-js .sph-g:not(.play) .sph-pop{opacity:0;transform:scale(.6)}
.sph-js .sph-g.play .sph-pop{transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(.5s + var(--p,0) * 140ms + var(--i,0) * 90ms)}

.sph-fill{transform-origin:left center}
.sph-js .sph-g:not(.play) .sph-fill{transform:scaleX(0)}
.sph-js .sph-g.play .sph-fill{transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.6s + var(--p,0) * 140ms + var(--i,0) * 150ms)}

.sph-draw{stroke-dasharray:1}
.sph-js .sph-g:not(.play) .sph-draw{stroke-dashoffset:1}
.sph-js .sph-g.play .sph-draw{transition:stroke-dashoffset 1.4s ease-in-out;transition-delay:calc(.6s + var(--p,0) * 140ms)}
.sph-js .sph-g:not(.play) .sph-area{opacity:0}
.sph-js .sph-g.play .sph-area{transition:opacity .8s ease;transition-delay:calc(1.6s + var(--p,0) * 140ms)}
.sph-pt{transform-box:fill-box;transform-origin:center}
.sph-js .sph-g:not(.play) .sph-pt{opacity:0;transform:scale(0)}
.sph-js .sph-g.play .sph-pt{transition:opacity .2s ease,transform .35s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(.6s + var(--p,0) * 140ms + var(--i,0) * 170ms)}

.sph-js .sph-g:not(.play) .sph-type{clip-path:inset(0 100% 0 0)}
.sph-js .sph-g.play .sph-type{transition:clip-path 1.5s steps(28,end);transition-delay:calc(.45s + var(--p,0) * 140ms)}

.sph-js .sph-g:not(.play) .sph-msg{opacity:0;transform:translateY(.8em) scale(.98)}
.sph-js .sph-g.play .sph-msg{transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(.4s + var(--p,0) * 140ms + var(--i,0) * 450ms)}

.sph-js .sph-g:not(.play) .sph-dots .on{background:rgba(255,255,255,.35)}
.sph-js .sph-g.play .sph-dots .on{transition:background-color .25s ease;transition-delay:calc(.6s + var(--p,0) * 140ms + var(--i,0) * 30ms)}

.sph-js .sph-g:not(.play) .sph-pick{background:var(--cream);color:var(--plum)}
.sph-js .sph-g.play .sph-pick{transition:background-color .3s ease,color .3s ease;transition-delay:calc(2.3s + var(--p,0) * 140ms)}

/* ролик живота: круги мягко «дышат» несколько раз и останавливаются */
.sph-js .sph-g.play .sph-video__p circle{animation:sph-breathe 2.4s ease-in-out 3}
.sph-js .sph-g.play .sph-video__p circle:nth-child(2){animation-delay:.2s}
.sph-js .sph-g.play .sph-video__p circle:nth-child(3){animation-delay:.4s}
.sph-js .sph-g.play .sph-video__p circle:nth-child(4){animation-delay:.6s}
@keyframes sph-breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.35}}

@media (prefers-reduced-motion:reduce){
  .sph-js .sph-g .sph,.sph-js .sph-g .sph *{transition:none!important;animation:none!important}
}