/* ============================================================
   App-landing additions — phone frame, app screens, new sections
   Builds on colors_and_type.css + kit.css
   ============================================================ */

/* density scale (driven by Tweaks via [data-density]) */
:root { --secpad: var(--sp-9); }
[data-density="compact"] { --secpad: var(--sp-8); }
[data-density="comfy"]   { --secpad: 120px; }

.sec { padding: var(--secpad) 0; }

/* store badges */
.stores { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.store-badge{
  display:inline-flex; align-items:center; gap:11px; padding:11px 18px 11px 16px;
  border-radius:14px; background:#000; color:#fff; border:1px solid rgba(255,255,255,.16);
  cursor:default; transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s;
  position:relative;
}
.store-badge:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.28); }
.store-badge .lic{ font-size:26px; }
.store-badge .sb-txt{ display:flex; flex-direction:column; line-height:1.05; text-align:left; }
.store-badge .sb-txt small{ font-size:10px; letter-spacing:.04em; opacity:.72; font-weight:500; }
.store-badge .sb-txt b{ font-size:17px; font-weight:700; font-family:var(--font-display); }
.store-badge.light{ background:#fff; color:var(--fg1); border-color:var(--border-strong); }
.store-soon{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--fg3); align-self:center; padding-left:4px;
}
.on-dark .store-soon{ color:rgba(255,255,255,.5); }
/* бейдж стора + «Скоро» держатся вместе (в т.ч. при переносе на мобилке) */
.store-item{ display:inline-flex; align-items:center; gap:10px; }
/* на десктопе «Скоро» — под кнопкой стора */
@media(min-width:601px){
  .store-item{ flex-direction:column; align-items:center; gap:6px; }
  .store-item .store-soon{ padding-left:0; }
}

/* ============================================================
   iPhone frame
   ============================================================ */
.phone{
  --pw: 300px;
  width:var(--pw); position:relative; flex:none;
  border-radius:42px; padding:6px;
  background:linear-gradient(150deg,#3a3c41,#0c0d10 52%,#26282d);
  box-shadow:
    0 1px 1px rgba(255,255,255,.22) inset,
    0 -1px 2px rgba(0,0,0,.55) inset,
    var(--shadow-lg);
}
.phone.android{ border-radius:36px; }
.phone-screen{
  position:relative; border-radius:36px; overflow:hidden; background:var(--app-bg,#fff);
  aspect-ratio:390/844; display:flex; flex-direction:column;
}
.phone.android .phone-screen{ border-radius:30px; }
.phone-screen.bz-screen{ background:linear-gradient(180deg,#FBF4E8 0%,#F4E9D7 100%); }
/* dynamic island — small, with breathing room from the frame */
.phone .island{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:80px; height:23px; background:#000; border-radius:999px; z-index:30;
}
.phone.android .island{ width:11px; height:11px; top:10px; }
/* status bar — time + battery sit level with the dynamic island */
.statusbar{
  height:38px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; font-family:var(--font-display); font-weight:700; font-size:14px;
  color:var(--app-fg,#070707); z-index:20;
}
.statusbar .sb-right{ display:flex; align-items:center; gap:6px; }
.statusbar .sb-right .lic{ font-size:15px; }
.phone.android .statusbar{ padding:0 18px; font-weight:600; }

/* app shell */
.app-bg-ink .phone-screen{ background:#0d0e11; }
.appscreen{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.app-scroll{ flex:1; min-height:0; overflow:hidden; padding:4px 16px 14px; }
.app-fg{ color:var(--app-fg,#0d0e11); }

/* app tab bar */
.tabbar{
  flex:none; height:60px; display:flex; align-items:flex-start; justify-content:space-around;
  padding-top:9px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-top:1px solid var(--border);
}
.tabbar .tab{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--slate-400); font-size:10px; font-weight:600; }
.tabbar .tab.on{ color:var(--app-accent,var(--primary)); }
.tabbar .tab .lic{ font-size:21px; }

/* app top bar */
.app-top{ display:flex; align-items:center; justify-content:space-between; padding:8px 16px 12px; }
.app-top h4{ font-family:var(--font-display); font-weight:800; font-size:19px; margin:0; color:var(--app-fg,#0d0e11); letter-spacing:-.01em; }
.app-greet{ font-size:12px; color:var(--slate-500); margin:0 0 1px; font-weight:600; }
.app-avatar{ width:36px; height:36px; border-radius:50%; background:var(--app-accent,var(--primary)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; font-family:var(--font-display); }

/* continue card */
.continue-card{
  background:linear-gradient(135deg,var(--app-accent,var(--primary)),var(--app-accent-2,var(--magenta-700)));
  border-radius:20px; padding:16px; color:#fff; margin-bottom:18px; position:relative; overflow:hidden;
}
.continue-card .cc-label{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.continue-card .cc-title{ font-family:var(--font-display); font-weight:700; font-size:15px; margin:7px 0 3px; }
.continue-card .cc-sub{ font-size:11.5px; opacity:.85; }
.continue-card .cc-btn{ margin-top:13px; display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.96); color:var(--app-accent,var(--primary)); font-weight:700; font-size:12px; padding:9px 14px; border-radius:999px; }
.continue-card .cc-bar{ height:5px; border-radius:3px; background:rgba(255,255,255,.3); margin-top:13px; overflow:hidden; }
.continue-card .cc-bar i{ display:block; height:100%; background:#fff; border-radius:3px; }

/* section label inside app */
.app-h5{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--app-fg,#0d0e11); margin:0 0 11px; display:flex; align-items:center; justify-content:space-between; }
.app-h5 span{ font-size:11px; color:var(--app-accent,var(--primary)); font-weight:600; }

/* course card (app) */
.crs{ display:flex; gap:12px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:11px; margin-bottom:11px; }
.crs .cov{ width:54px; height:54px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; }
.crs .ci{ flex:1; min-width:0; }
.crs .cat{ font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--slate-400); }
.crs .cnm{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--fg1); margin:2px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crs .cbar{ height:5px; border-radius:3px; background:var(--bg-sunken); margin-top:9px; overflow:hidden; }
.crs .cbar i{ display:block; height:100%; border-radius:3px; }
.crs .cpct{ font-size:9.5px; color:var(--slate-500); margin-top:5px; font-weight:600; }

/* lesson rows (course content) */
.lrow{ display:flex; align-items:center; gap:11px; padding:11px 2px; border-bottom:1px solid var(--slate-100); }
.lrow:last-child{ border-bottom:none; }
.lrow .ln{ width:30px; height:30px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center; font-size:15px; background:var(--app-soft,var(--magenta-50)); color:var(--app-accent,var(--primary)); }
.lrow.locked .ln{ background:var(--slate-100); color:var(--slate-400); }
.lrow.done .ln{ background:var(--green-50); color:var(--green-500); }
.lrow .li{ flex:1; min-width:0; }
.lrow .lt{ font-size:12.5px; font-weight:600; color:var(--fg1); }
.lrow.locked .lt{ color:var(--slate-400); }
.lrow .lm{ font-size:10px; color:var(--slate-400); margin-top:2px; }

/* lesson player */
.player{ border-radius:16px; overflow:hidden; background:#0d0e11; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:14px; }
.player .play{ width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; color:var(--app-accent,var(--primary)); }
.player .ptime{ position:absolute; bottom:9px; left:11px; right:11px; display:flex; align-items:center; gap:8px; color:#fff; font-size:9.5px; font-weight:600; }
.player .ptrack{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.3); overflow:hidden; }
.player .ptrack i{ display:block; height:100%; width:38%; background:var(--app-accent,var(--primary)); }
.lesson-chip{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; padding:5px 10px; border-radius:999px; background:var(--app-soft,var(--magenta-50)); color:var(--app-accent,var(--primary)); }
.task-row{ display:flex; align-items:center; gap:10px; padding:11px; border:1px solid var(--border); border-radius:13px; margin-top:10px; }
.task-row .tk{ width:30px; height:30px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; }
.task-row .tn{ flex:1; }
.task-row .tn b{ font-size:12px; font-weight:700; color:var(--fg1); display:block; }
.task-row .tn small{ font-size:10px; color:var(--slate-400); }
.app-cta{ display:flex; align-items:center; justify-content:center; gap:7px; background:var(--app-accent,var(--primary)); color:#fff; font-weight:700; font-size:12.5px; padding:13px; border-radius:13px; margin-top:14px; }

/* orders / segmented tabs */
.seg{ display:flex; gap:5px; background:var(--bg-sunken); border-radius:12px; padding:4px; margin-bottom:14px; }
.seg div{ flex:1; text-align:center; font-size:11.5px; font-weight:700; padding:8px; border-radius:9px; color:var(--slate-500); }
.seg div.on{ background:#fff; color:var(--fg1); box-shadow:var(--shadow-xs); }
.order{ background:#fff; border:1px solid var(--border); border-radius:15px; padding:14px; margin-bottom:11px; }
.order .otop{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.order .ott{ font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--fg1); }
.badge-pill{ font-size:9px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:4px 8px; border-radius:6px; white-space:nowrap; }
.bp-green{ background:var(--green-50); color:var(--green-600); }
.bp-orange{ background:var(--orange-50); color:var(--orange-600); }
.bp-gray{ background:var(--slate-100); color:var(--slate-500); }
.installment{ margin-top:11px; }
.installment .iline{ display:flex; justify-content:space-between; font-size:10.5px; margin-bottom:7px; }
.installment .iline b{ font-weight:700; color:var(--fg1); }
.installment .iline span{ color:var(--slate-500); }
.installment .ibar{ height:6px; border-radius:3px; background:var(--bg-sunken); overflow:hidden; }
.installment .ibar i{ display:block; height:100%; background:var(--app-accent,var(--primary)); border-radius:3px; }
.installment .inext{ font-size:10px; color:var(--slate-500); margin-top:8px; display:flex; align-items:center; gap:5px; }

/* chats */
.chat-item{ display:flex; gap:11px; align-items:center; padding:11px 2px; border-bottom:1px solid var(--slate-100); }
.chat-item .cav{ width:42px; height:42px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; font-family:var(--font-display); }
.chat-item .cmeta{ flex:1; min-width:0; }
.chat-item .cnm{ font-size:12.5px; font-weight:700; color:var(--fg1); display:flex; justify-content:space-between; }
.chat-item .cnm small{ font-size:10px; color:var(--slate-400); font-weight:500; }
.chat-item .cpre{ font-size:11px; color:var(--slate-500); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:5px; }
.chat-item .unread{ width:18px; height:18px; border-radius:50%; background:var(--app-accent,var(--primary)); color:#fff; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
.voice-msg{ display:inline-flex; align-items:center; gap:7px; background:var(--app-accent,var(--primary)); color:#fff; padding:8px 12px; border-radius:14px 14px 14px 4px; font-size:10px; font-weight:600; }
.voice-msg .bars{ display:flex; align-items:center; gap:2px; height:14px; }
.voice-msg .bars i{ width:2px; border-radius:1px; background:rgba(255,255,255,.85); }

/* white-label login screen */
.wl-login{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 26px; text-align:center; background:var(--app-bg,#fff); }
.wl-logo{ width:62px; height:62px; border-radius:18px; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:800; font-size:26px; margin-bottom:18px; box-shadow:var(--shadow-md); }
.wl-login h3{ font-family:var(--font-display); font-weight:800; font-size:18px; margin:0 0 4px; color:var(--fg1); }
.wl-login p{ font-size:11.5px; color:var(--slate-500); margin:0 0 22px; }
.wl-field{ width:100%; height:42px; border-radius:12px; border:1px solid var(--border); background:var(--slate-25); margin-bottom:10px; display:flex; align-items:center; padding:0 13px; gap:9px; color:var(--slate-400); font-size:11.5px; }
.wl-submit{ width:100%; height:44px; border-radius:12px; background:var(--app-accent,var(--primary)); color:#fff; font-weight:700; font-size:12.5px; display:flex; align-items:center; justify-content:center; margin-top:6px; }

/* curator / dashboard rows */
.metric{ background:#fff; border:1px solid var(--border); border-radius:15px; padding:13px; }
.metric .mv{ font-family:var(--font-display); font-weight:800; font-size:21px; color:var(--fg1); letter-spacing:-.01em; }
.metric .mv small{ font-size:11px; color:var(--green-500); font-weight:700; margin-left:4px; }
.metric .ml{ font-size:10px; color:var(--slate-500); margin-top:3px; font-weight:600; }
.student-row{ display:flex; align-items:center; gap:11px; padding:10px 2px; border-bottom:1px solid var(--slate-100); }
.student-row .sav{ width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px; font-family:var(--font-display); }
.student-row .si{ flex:1; min-width:0; }
.student-row .sn{ font-size:12px; font-weight:700; color:var(--fg1); }
.student-row .sm{ font-size:10px; color:var(--slate-400); margin-top:2px; }
.mini-spark{ display:flex; align-items:flex-end; gap:3px; height:30px; }
.mini-spark i{ flex:1; border-radius:2px 2px 0 0; background:var(--app-accent,var(--primary)); opacity:.85; }

/* push composer screen */
.push-preview{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:11px 13px; display:flex; gap:10px; box-shadow:var(--shadow-sm); }
.push-preview .pa{ width:30px; height:30px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; }
.push-preview .pt b{ font-size:11.5px; font-weight:700; color:var(--fg1); display:block; }
.push-preview .pt small{ font-size:10.5px; color:var(--slate-500); }
.seg-chip{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; padding:7px 11px; border-radius:999px; border:1px solid var(--border); color:var(--fg2); margin:0 7px 7px 0; }
.seg-chip.on{ background:var(--app-soft,var(--magenta-50)); border-color:transparent; color:var(--app-accent,var(--primary)); }

/* ============================================================
   LANDING SECTIONS
   ============================================================ */
/* feature row: copy + illustration zebra. Default = text LEFT, phone RIGHT. */
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.frow + .frow{ margin-top:var(--secpad); }
.frow .fr-media{ display:flex; flex-direction:column; align-items:center; gap:0; }
.frow.flip .fr-copy{ order:2; }      /* flipped row = text RIGHT, phone LEFT */
.frow .fr-copy{ max-width:30em; }
.frow .fr-num{ font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--app-accent,var(--primary)); letter-spacing:.04em; }
.frow .fr-copy h3{ font-family:var(--font-display); font-weight:800; font-size:var(--t-h2); letter-spacing:-.01em; margin:14px 0 0; line-height:1.12; }
.frow .fr-copy p{ font-size:var(--t-lead); line-height:1.55; color:var(--fg2); margin:18px 0 0; }
.frow .fr-list{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.frow .fr-list li{ display:flex; align-items:flex-start; gap:11px; font-size:15.5px; color:var(--fg2); line-height:1.45; }
.frow .fr-list .lic{ color:var(--accent-green); font-size:20px; flex:none; margin-top:1px; }
.fr-note{ font-size:13px; color:var(--fg3); margin-top:18px; display:flex; align-items:center; gap:8px; font-style:italic; }
@media(max-width:860px){ .frow{ grid-template-columns:1fr; gap:40px } .frow.flip .fr-copy{ order:0 } .frow .fr-copy{ max-width:none } }

/* "Что получит ученик" — единый кремовый фон, без карточек (Apple/Linear-стиль) */
#features{ background:radial-gradient(ellipse at top, #FCF7EF 0%, #F8F0E3 100%); }
#features .frow + .frow{ margin-top:110px; }
#features .frow .fr-copy h3{ color:#1A1A1A; }
/* мягкий тёплый ореол под каждым скриншотом (не малиновый) */
#features .fr-media{ position:relative; }
#features .fr-media::before{
  content:""; position:absolute; z-index:0; top:50%; left:50%; transform:translate(-50%,-50%);
  width:calc(100% + 360px); height:calc(100% + 360px); pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(160,110,60,0.18) 0%, rgba(160,110,60,0.08) 40%, transparent 75%);
  filter:blur(60px);
}
#features .fr-media .phone{ position:relative; z-index:1; }

/* eyebrow block (left aligned, for section intros) */
.sec-lead{ max-width:600px; margin-bottom:56px; }
.sec-lead.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-lead .eyebrow{ display:block; margin-bottom:14px; }
.sec-lead h2{ font-family:var(--font-display); font-weight:800; font-size:var(--t-h2); letter-spacing:-.01em; margin:0; line-height:1.12; }
.sec-lead p{ font-size:var(--t-lead); color:var(--fg2); margin:18px 0 0; line-height:1.55; }

/* white-label section (dark) */
.wl-sec{ background:radial-gradient(ellipse at top left, #1A0D1A 0%, #070707 60%); color:#fff; position:relative; overflow:hidden; padding:160px 0; }

/* ===== Push web-admin interface (free-form) + incoming toast ===== */
.pushui{ position:relative; width:100%; max-width:440px; margin:0 auto; }
.push-toast{ display:flex; gap:12px; align-items:flex-start; padding:13px 15px; border-radius:18px; margin:0 18px 18px; position:relative; z-index:2;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 18px 50px rgba(0,0,0,.45); animation:pushIn .6s cubic-bezier(.22,1,.36,1) both; }
@media(prefers-reduced-motion: no-preference){ [data-deck-active] .push-toast{} }
@keyframes pushIn{ from{ opacity:0; transform:translateY(-14px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes pushOut{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(-12px) scale(.98); } }
/* редактируемые поля админ-формы пушей (интерактив) */
input.pw-input, textarea.pw-textarea{ width:100%; box-sizing:border-box; display:block; -webkit-appearance:none; appearance:none; outline:none; }
textarea.pw-textarea{ resize:none; }
input.pw-input:focus, textarea.pw-textarea:focus{ border-color:#DB1F90; background:#fff; box-shadow:0 0 0 3px rgba(219,31,144,.12); }
.pw-recip b{ white-space:nowrap; }
.push-toast .pt-icon{ width:38px; height:38px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(140deg,#E4459E,#DB1F90); box-shadow:0 4px 14px rgba(219,31,144,.5); }
.push-toast .pt-body{ flex:1; min-width:0; }
.push-toast .pt-top{ display:flex; align-items:center; gap:8px; }
.push-toast .pt-app{ font:700 11px/1 'Inter',sans-serif; letter-spacing:.02em; color:rgba(255,255,255,.92); text-transform:uppercase; }
.push-toast .pt-time{ margin-left:auto; font:500 11px/1 'Inter',sans-serif; color:rgba(255,255,255,.55); }
.push-toast .pt-title{ font:700 14px/1.3 'Inter',sans-serif; color:#fff; margin-top:6px; }
.push-toast .pt-text{ font:400 12.5px/1.45 'Inter',sans-serif; color:rgba(255,255,255,.7); margin-top:3px; }

.push-win{ border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 30px 70px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.1); position:relative; z-index:1; }
.pw-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:#F1ECE3; border-bottom:1px solid rgba(120,90,55,.14); }
.pw-dot{ width:11px; height:11px; border-radius:50%; flex:none; }
.pw-dot.r{ background:#ED6A5E; } .pw-dot.y{ background:#F4BF4F; } .pw-dot.g{ background:#61C554; }
.pw-url{ margin-left:10px; flex:1; display:flex; align-items:center; gap:6px; font:500 11.5px/1 'Inter',sans-serif; color:#8A7A63; background:#fff; border:1px solid rgba(120,90,55,.14); border-radius:8px; padding:7px 11px; }
.pw-body{ padding:22px; }
.pw-h{ font:800 18px/1.1 'Inter',sans-serif; color:#2E2517; letter-spacing:-.01em; margin-bottom:18px; }
.pw-label{ display:block; font:600 11px/1 'Inter',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#A6957A; margin:16px 0 8px; }
.pw-label:first-of-type{ margin-top:0; }
.pw-input{ font:500 14px/1.4 'Inter',sans-serif; color:#2E2517; padding:12px 14px; border-radius:11px; border:1px solid rgba(120,90,55,.18); background:#FBF8F2; }
.pw-textarea{ font:400 13.5px/1.55 'Inter',sans-serif; color:#5A4A36; padding:12px 14px; border-radius:11px; border:1px solid rgba(120,90,55,.18); background:#FBF8F2; min-height:62px; }
.pw-input::after, .pw-textarea-cursor{}
.pw-segs{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.pw-seg{ display:flex; align-items:center; gap:9px; padding:11px 12px; border-radius:12px; cursor:pointer; text-align:left; background:#FBF8F2; border:1.5px solid rgba(120,90,55,.16); transition:.15s; }
.pw-seg .pw-seg-ic{ width:28px; height:28px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(120,90,55,.09); color:#8A7A63; }
.pw-seg .pw-seg-nm{ flex:1; min-width:0; font:600 12.5px/1.2 'Inter',sans-serif; color:#2E2517; }
.pw-seg .pw-seg-cnt{ font:700 11px/1 'Inter',sans-serif; color:#A6957A; }
.pw-seg.on{ border-color:#DB1F90; background:#FDEAF5; }
.pw-seg.on .pw-seg-ic{ background:#DB1F90; color:#fff; }
.pw-seg.on .pw-seg-cnt{ color:#DB1F90; }
.pw-foot{ display:flex; align-items:center; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(120,90,55,.14); }
.pw-recip{ display:flex; align-items:center; gap:7px; font:500 13px/1.3 'Inter',sans-serif; color:#7C6A52; }
.pw-recip b{ color:#2E2517; font-weight:700; }
.pw-send{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; border:0; cursor:pointer; font:700 13.5px/1 'Inter',sans-serif; color:#fff; padding:12px 18px; border-radius:11px; background:linear-gradient(135deg,#DB1F90,#E91E63); box-shadow:0 8px 22px rgba(219,31,144,.4); transition:transform .15s; }
.pw-send:hover{ transform:translateY(-2px); }
@media(max-width:520px){ .pw-segs{ grid-template-columns:1fr; } }
.wl-sec .eyebrow{ color:var(--magenta-400); }
.wl-sec h2{ color:#fff; }
.wl-sec p{ color:var(--fg-on-dark-2); }
.wl-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:8px; }
@media(max-width:760px){ .wl-grid{ grid-template-columns:1fr } }
.wl-card{ background:rgba(255,255,255,.04); border:1px solid var(--border-on-dark); border-radius:var(--r-xl); padding:28px; transition:all .2s cubic-bezier(.22,1,.36,1); }
.wl-card:hover{ background:rgba(255,255,255,.07); transform:translateY(-3px); }
.wl-card .wt{ width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:18px; }
.wl-card h4{ font-family:var(--font-display); font-weight:700; font-size:18px; margin:0 0 8px; color:#fff; }
.wl-card p{ font-size:14.5px; line-height:1.55; color:var(--fg-on-dark-2); margin:0; }
.wl-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; margin-bottom:64px; }
@media(max-width:860px){ .wl-hero{ grid-template-columns:1fr; gap:40px } }
.wl-badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid var(--border-on-dark); padding:8px 15px; border-radius:999px; font-size:12.5px; font-weight:600; margin-bottom:20px; }
.wl-badge .lic{ color:var(--magenta-400); font-size:16px; }

/* ===== White-label PREMIUM — zebra rows on dark, glowing phones ===== */
.wl-sec{ border-top:1px solid rgba(255,255,255,.06); }
.wl-lead{ margin-bottom:80px; }
.wl-lead .wl-badge{ margin-bottom:22px; background:linear-gradient(135deg, rgba(219,31,144,0.2) 0%, rgba(124,58,237,0.15) 100%); border:1px solid rgba(219,31,144,0.4); box-shadow:0 0 40px rgba(219,31,144,0.4); white-space:nowrap; }
.wl-lead h2{ font-family:var(--font-display); font-weight:800; font-size:var(--t-h1); letter-spacing:-.02em; line-height:1.08; margin:0; color:#fff; }
.wl-lead p{ font-size:var(--t-lead); color:var(--fg-on-dark-2); margin:20px auto 0; line-height:1.55; max-width:36em; }
/* dark text for zebra rows inside the premium section */
.wl-sec .frow .fr-num{ color:var(--magenta-400); }
.wl-sec .frow .fr-copy h3{ color:#fff; }
.wl-sec .frow .fr-copy p{ color:var(--fg-on-dark-2); }
.wl-sec .frow .fr-list li{ color:rgba(255,255,255,.86); }
.wl-sec .frow .fr-note{ color:var(--fg-on-dark-2); }
.wl-sec .frow + .frow{ margin-top:104px; }
/* premium kicker tag above each row title — светлый, читаемый на тёмном */
.wl-kick{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#F472B6; background:rgba(219,31,144,.12); border:1px solid rgba(244,114,182,.4); padding:6px 14px; border-radius:999px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
/* glow aura behind white-label phones — сильнее и шире */
.fr-glow{ position:relative; display:flex; justify-content:center; align-items:center; }
.fr-glow::before{ content:""; position:absolute; z-index:0; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(100% + 700px); height:calc(100% + 700px); border-radius:50%; background:radial-gradient(circle at center, rgba(219,31,144,0.5) 0%, rgba(219,31,144,0.25) 20%, rgba(219,31,144,0.1) 50%, transparent 75%); filter:blur(100px); }
.fr-glow::after{ content:""; position:absolute; width:54%; height:42%; bottom:6%; z-index:0; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.12), transparent 70%); filter:blur(30px); }
.fr-glow .phone{ position:relative; z-index:1; }

/* ===== White-label демо-экраны — тёмная роскошь с золотом ===== */
.phone-screen.wl-lux{
  background:#0F172A;
  --app-accent:#F59E0B; --app-accent-2:#E2E8F0; --app-soft:rgba(245,158,11,0.16);
  --app-fg:#F1F5F9; --app-bg:#0F172A;
  --fg1:#F1F5F9; --fg2:#94A3B8; --fg3:#64748B;
  --slate-700:#334155; --slate-500:#94A3B8; --slate-400:#94A3B8; --slate-300:#475569; --slate-100:rgba(245,158,11,0.16); --slate-25:#1E293B;
  --bg-subtle:#1E293B; --bg-sunken:#0B1220; --border:rgba(245,158,11,0.2);
}
.phone-screen.wl-lux .metric{ background:#1E293B; }
.phone-screen.wl-lux .push-preview{ background:#1E293B; }
.phone-screen.wl-lux .wl-login{ background:#0F172A; }
.phone-screen.wl-lux .wl-logo{ background:linear-gradient(140deg,#F59E0B,#E2E8F0)!important; color:#0F172A; }
.phone-screen.wl-lux .wl-submit{ color:#0F172A!important; font-weight:800; }
.phone-screen.wl-lux .app-avatar{ color:#0F172A; }
.phone-screen.wl-lux .badge-pill.bp-orange{ background:rgba(245,158,11,0.18); color:#F59E0B; }

/* pricing */
.pricing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:920px; margin:0 auto; align-items:stretch; }
@media(max-width:760px){ .pricing-grid{ grid-template-columns:1fr } }
.tier{ background:#fff; border:1px solid var(--border); border-radius:var(--r-2xl); padding:36px; display:flex; flex-direction:column; position:relative; }
.tier.feat{ background:var(--surface-ink); color:#fff; border-color:transparent; box-shadow:var(--shadow-lg); overflow:hidden; }
.tier.feat .glow{ background:radial-gradient(70% 60% at 50% 0%,rgba(219,31,144,.32),transparent 70%); }
.tier .tier-in{ position:relative; z-index:1; display:flex; flex-direction:column; height:100%; }
.tier .tier-name{ font-family:var(--font-display); font-weight:800; font-size:21px; letter-spacing:-.01em; }
.tier.feat .tier-name{ color:#fff; }
.tier .tier-tag{ position:absolute; top:26px; right:26px; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:var(--accent-orange); color:#fff; padding:5px 11px; border-radius:7px; z-index:2; text-align:right; line-height:1.32; }
.tier .tier-desc{ font-size:14px; color:var(--fg2); margin:8px 0 0; line-height:1.5; min-height:42px; }
.tier.feat .tier-desc{ color:var(--fg-on-dark-2); }
.tier .price{ margin:24px 0 4px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.tier .price b{ font-family:var(--font-display); font-weight:800; font-size:42px; letter-spacing:-.02em; line-height:1; }
.tier .price .per{ font-size:15px; color:var(--fg3); font-weight:600; }
.tier.feat .price .per{ color:var(--fg-on-dark-2); }
.tier .price .strike{ font-size:20px; color:var(--fg3); text-decoration:line-through; font-weight:600; }
.tier .price .strike.on-dark-strike{ color:rgba(255,255,255,.45); }
.tier .price-note{ font-size:12.5px; color:var(--accent-green); font-weight:700; margin-top:4px; }
.tier.feat .price-note{ color:var(--green-300); }
.tier ul{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; flex:1; }
.tier ul li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.4; color:var(--fg2); }
.tier.feat ul li{ color:rgba(255,255,255,.88); }
.tier ul .lic{ color:var(--accent-green); font-size:18px; flex:none; margin-top:1px; }
.tier.feat ul .lic{ color:var(--green-300); }
.tier .tier-foot{ margin-top:28px; }
.tier . tier-foot{}
.tier .prep{ font-size:12px; color:var(--fg3); margin-top:14px; line-height:1.5; }
.tier.feat .prep{ color:var(--fg-on-dark-2); }
.btn-block{ width:100%; justify-content:center; }
.btn-disabled{ opacity:.55; cursor:not-allowed; pointer-events:none; }
.tier.feat .btn-secondary{ background:rgba(255,255,255,.1); color:#fff; border-color:var(--border-on-dark); }

/* comparison table */
.cmp{ max-width:920px; margin:0 auto; border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); }
.cmp table{ width:100%; border-collapse:collapse; }
.cmp th, .cmp td{ text-align:left; padding:15px 22px; font-size:14.5px; border-bottom:1px solid var(--slate-100); }
.cmp thead th{ background:var(--bg-subtle); font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--fg1); position:sticky; top:0; }
.cmp thead th.col{ text-align:center; width:160px; }
.cmp thead th.col .ch{ display:flex; flex-direction:column; gap:2px; align-items:center; }
.cmp thead th.col .ch small{ font-weight:600; font-size:11px; color:var(--fg3); }
.cmp thead th.col.feat{ color:var(--primary); }
.cmp td.rowname{ color:var(--fg2); font-weight:500; }
.cmp td.val{ text-align:center; }
.cmp tbody tr:last-child td{ border-bottom:none; }
.cmp tbody tr:hover td{ background:var(--slate-25); }
.cmp td.val .yes{ color:var(--accent-green); }
.cmp td.val .no{ color:var(--slate-300); }
.cmp td.val .txt{ font-size:12.5px; color:var(--fg2); font-weight:600; }
.cmp td.val.feat-col .txt{ color:var(--primary); }
.cmp tr.price-row td{ background:var(--bg-subtle); font-weight:700; color:var(--fg1); }
.cmp tr.price-row td .txt{ color:var(--fg1); font-weight:800; font-family:var(--font-display); }
@media(max-width:760px){ .cmp{ overflow-x:auto } .cmp table{ min-width:560px } }

/* timeline */
.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; row-gap:40px; max-width:1040px; margin:0 auto; }
@media(max-width:860px){ .timeline{ grid-template-columns:1fr 1fr } }
@media(max-width:520px){ .timeline{ grid-template-columns:1fr } }
.tl-step{ position:relative; padding:0 22px; }
.tl-step:not(:last-child)::after{ content:''; position:absolute; top:13px; left:36px; right:-36px; height:2px; background:var(--border); }
@media(max-width:860px){ .tl-step:nth-child(2)::after,.tl-step:last-child::after{ display:none } }
@media(max-width:520px){ .tl-step::after{ display:none } }
.tl-dot{ width:28px; height:28px; border-radius:50%; background:var(--app-accent,var(--primary)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:12px; position:relative; z-index:1; box-shadow:0 0 0 5px var(--app-soft,var(--magenta-50)); }
.tl-week{ font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--app-accent,var(--primary)); margin:18px 0 7px; letter-spacing:.02em; }
.tl-step h4{ font-family:var(--font-display); font-weight:700; font-size:16px; margin:0 0 8px; color:var(--fg1); }
.tl-step p{ font-size:13.5px; line-height:1.55; color:var(--fg2); margin:0; }
.pricing-req{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:36px; font:500 13.5px/1.4 'Inter',system-ui,sans-serif; color:var(--fg3); }
.pricing-req .lic{ color:var(--primary); }

/* FAQ */
.faq{ max-width:780px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:24px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--fg1); }
.faq-q .lic{ flex:none; color:var(--primary); transition:transform .25s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-q .lic{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a-in{ padding:0 4px 24px; font-size:15.5px; line-height:1.65; color:var(--fg2); max-width:64ch; }
.faq-a-in p{ margin:0 0 10px; }
.faq-a-in p:last-child{ margin:0; }
.faq-a-in b{ color:var(--fg1); font-weight:700; }

/* closing / contact — dark premium, magenta only as accent (no magenta fill) */
.closing{ background:radial-gradient(ellipse at center top, #1A0D1A 0%, #070707 70%); color:#fff; position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.1); }
.closing .glow{ background:radial-gradient(46% 52% at 50% 0%,rgba(219,31,144,.20),transparent 72%); }
.closing .inner{ position:relative; z-index:1; text-align:center; max-width:680px; margin:0 auto; }
.closing h2{ font-family:var(--font-display); font-weight:800; font-size:var(--t-h2); letter-spacing:-.02em; margin:0; line-height:1.1; color:#fff; }
.closing p{ font-size:var(--t-lead); margin:18px 0 0; color:rgba(255,255,255,.7); line-height:1.5; }
.closing .cbtns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.closing .btn-primary{ background:var(--primary); color:#fff; box-shadow:0 0 30px rgba(219,31,144,.4); }
.closing .btn-primary:hover{ background:var(--primary-hover); box-shadow:0 0 38px rgba(219,31,144,.5); transform:translateY(-2px); }
.closing .btn-secondary{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.28); }
.closing .btn-secondary:hover{ background:rgba(219,31,144,.12); border-color:rgba(219,31,144,.55); color:#fff; }
.closing .contact-row{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; margin-top:34px; font-size:15px; font-weight:600; }
.closing .contact-row a{ display:inline-flex; align-items:center; gap:9px; color:rgba(255,255,255,.85); transition:color .18s; }
.closing .contact-row a:hover{ color:#fff; }
.closing .contact-row .lic{ font-size:19px; color:#fff; }

/* phone wrapper utility (for sizing in different contexts) */
.phone-sm{ --pw:312px; }
.phone-xs{ --pw:230px; }
.phone-pair{ display:flex; gap:0; align-items:center; }
.phone-pair .phone:first-child{ transform:translateX(22px) rotate(-4deg) scale(.9); z-index:1; }
.phone-pair .phone:last-child{ transform:translateX(-22px) rotate(4deg); z-index:2; box-shadow:0 30px 70px rgba(0,0,0,.4); }

/* white-label showcase responsive */
@media(max-width:760px){ .wl-showcase{ grid-template-columns:1fr !important; gap:40px !important } }

/* ============================================================
   МОИ КУРСЫ (universal / warm beige) — faithful reproduction.
   Rendered at native 390×844, scaled by JS to fit any phone width.
   ============================================================ */
.mk-host{
  position:absolute; top:0; left:0; width:390px; height:844px; transform-origin:top left;
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif; color:#2E2517;
  -webkit-font-smoothing:antialiased;
  --bg:linear-gradient(180deg,#FBF4E8 0%,#F4E9D7 100%);
  --text-1:#2E2517; --text-2:#7C6A52; --text-3:#A6957A;
  --surface:rgba(255,255,255,0.72); --surface-line:rgba(120,90,55,0.13);
  --accent:#C2683D; --accent-2:#E0962F; --accent-soft:rgba(194,104,61,0.12);
  --prog:linear-gradient(90deg,#E0962F,#C2683D);
  --shadow:0 6px 20px rgba(120,90,55,0.13);
  --green:#2E9E63; --green-soft:rgba(46,158,99,0.13); --due:#C9543E;
  --sb:#2E2517; --tab-on-bg:rgba(194,104,61,0.13); --tab-on:#C2683D;
  --hero-grad:linear-gradient(135deg,#FBE4C6 0%,#F4CB97 60%,#EBB678 100%);
  --hero-ink:#3B2A14;
  background:var(--bg);
}
.mk-statusbar{ position:absolute; top:0; left:0; right:0; height:54px; z-index:40; display:flex; align-items:flex-end; justify-content:space-between; padding:0 30px 8px; pointer-events:none; color:var(--sb); }
.mk-statusbar .t{ font:700 16px/1 'Montserrat',sans-serif; }
.mk-statusbar .r{ display:flex; align-items:center; gap:7px; }
.mk-scroll{ position:absolute; inset:0; z-index:20; overflow-y:auto; overflow-x:hidden; padding:0 0 110px; -webkit-overflow-scrolling:touch; }
.mk-scroll::-webkit-scrollbar{ display:none; }
.mk-scroll{ scrollbar-width:none; }
.mk-body{ padding:0 20px; }
.mk-hero{ position:relative; padding:76px 22px 24px; overflow:hidden; background:var(--hero-grad); }
.mk-hero::after{ content:""; position:absolute; right:-50px; top:-40px; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.5),transparent 70%); }
.mk-hero::before{ content:""; position:absolute; left:-40px; bottom:-70px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(194,104,61,.3),transparent 70%); }
.mk-hero .top{ position:relative; z-index:1; display:flex; align-items:center; gap:13px; }
.mk-hero .nm{ flex:1; min-width:0; }
.mk-hero .nm .l{ font:600 10.5px/1 'Montserrat',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:rgba(59,42,20,.58); }
.mk-hero .nm .t{ font:700 22px/1.15 'Montserrat',sans-serif; color:var(--hero-ink); margin-top:5px; }
.mk-hero .ava{ width:42px; height:42px; border-radius:50%; flex:none; background:linear-gradient(140deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; color:#fff; font:700 16px/1 'Montserrat',sans-serif; border:2px solid rgba(255,255,255,0.85); box-shadow:0 4px 12px rgba(150,90,40,0.25); }
.mk-hero .greet{ position:relative; z-index:1; margin-top:18px; font:600 16px/1.3 'Montserrat',sans-serif; color:rgba(59,42,20,.82); }
.mk-heading{ margin:28px 2px 16px; }
.mk-heading h2{ font:700 24px/1.15 'Montserrat',sans-serif; color:var(--text-1); letter-spacing:-0.01em; }
.mk-heading h2 .gt{ color:var(--accent); }
.mk-heading p{ font:500 13px/1.45 'Montserrat',sans-serif; color:var(--text-2); margin-top:6px; }
.mk-list{ display:flex; flex-direction:column; gap:14px; }
.mk-course{ display:flex; align-items:center; gap:15px; padding:14px; border-radius:22px; background:var(--surface); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--surface-line); box-shadow:var(--shadow); }
.mk-thumb{ width:66px; height:66px; border-radius:18px; flex:none; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff; }
.mk-thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(255,255,255,0.28),transparent 60%); }
.mk-thumb svg{ position:relative; z-index:1; }
.mk-thumb .play{ position:absolute; z-index:2; right:5px; bottom:5px; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.25); }
.mk-thumb.u-terra{ background:linear-gradient(140deg,#D07A4A,#B85A33); }
.mk-thumb.u-amber{ background:linear-gradient(140deg,#E5A93C,#D08A28); }
.mk-thumb.u-olive{ background:linear-gradient(140deg,#A89A4E,#857C36); }
.mk-thumb.u-rose{ background:linear-gradient(140deg,#C97A6E,#B25E52); }
.mk-cbody{ flex:1; min-width:0; }
.mk-ccat{ font:700 10px/1 'Montserrat',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.mk-ctitle{ font:700 15.5px/1.28 'Montserrat',sans-serif; color:var(--text-1); margin-top:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mk-cmeta{ display:flex; align-items:center; gap:7px; margin-top:6px; font:500 12px/1 'Montserrat',sans-serif; color:var(--text-3); }
.mk-cmeta .sep{ width:3px; height:3px; border-radius:50%; background:var(--text-3); }
.mk-cprog{ display:flex; align-items:center; gap:10px; margin-top:11px; }
.mk-ptrack{ flex:1; height:7px; border-radius:9999px; background:rgba(60,40,20,0.10); overflow:hidden; }
.mk-pfill{ height:100%; border-radius:9999px; background:var(--prog); }
.mk-ppct{ font:700 12px/1 'Montserrat',sans-serif; color:var(--text-1); font-variant-numeric:tabular-nums; min-width:34px; text-align:right; }
/* Bottom tab bar — floating oval island (эскиз), no border; content scrolls visible in the side gaps */
.mk-tabbar{ position:absolute; bottom:18px; left:16px; right:16px; z-index:35; height:68px; display:flex; align-items:center; justify-content:space-around; padding:0 6px; border-radius:30px; background:rgba(255,255,255,0.82); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%); box-shadow:0 10px 30px rgba(120,90,55,0.18), inset 0 1px 0 rgba(255,255,255,0.75); }
.mk-tab{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; flex:1; height:54px; border-radius:16px; color:var(--text-3); }
.mk-tab svg{ width:24px; height:24px; }
.mk-tab .lab{ font:600 10px/1 'Montserrat',sans-serif; }
.mk-tab.on{ color:var(--tab-on); background:var(--tab-on-bg); }

/* бирка непрочитанных на пункте «Чаты» (во всех нижних меню приложения) */
.tabbadge{ position:absolute; top:3px; left:calc(50% + 5px); min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; border-radius:999px; background:#FF3B30; color:#fff; font:700 9.5px/16px 'Inter',-apple-system,sans-serif; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,0.28); pointer-events:none; }

/* нижнее меню телефонов кликабельно: Курсы/Чаты/Заказы → якоря к секциям */
.mk-tab[data-nav], .cp-tab[data-nav], .ls-host .tab[data-nav]{ cursor:pointer; transition:background .15s ease, transform .12s ease; }
.mk-tab[data-nav]:not(.on):hover, .cp-tab[data-nav]:not(.on):hover, .ls-host .tab[data-nav]:not(.on):hover{ background:rgba(120,90,55,.08); }
.mk-tab[data-nav]:active, .cp-tab[data-nav]:active, .ls-host .tab[data-nav]:active{ transform:scale(.9); }

/* ===== Мои заказы (interactive — Покупки / Подписки) ===== */
.mo-head{ position:absolute; top:0; left:0; right:0; z-index:30; padding:74px 18px 14px; overflow:hidden; background:var(--hero-grad); box-shadow:0 6px 20px rgba(150,90,40,0.12); }
.mo-head::after{ content:""; position:absolute; right:-50px; top:-50px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.5),transparent 70%); }
.mo-headrow{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; }
.mo-iconbtn{ width:42px; height:42px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.8); color:var(--hero-ink); box-shadow:0 3px 10px rgba(150,90,40,0.16); }
.mo-headtt{ flex:1; min-width:0; }
.mo-headtt .l{ font:600 10.5px/1 'Montserrat',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:rgba(59,42,20,.56); }
.mo-headtt .t{ font:800 22px/1.1 'Montserrat',sans-serif; color:var(--hero-ink); margin-top:5px; letter-spacing:-0.01em; }
.mo-segs{ position:relative; z-index:1; display:flex; gap:4px; margin-top:16px; padding:4px; border-radius:14px; background:rgba(120,70,30,0.12); }
.mo-segs button{ flex:1; border:0; background:transparent; cursor:pointer; font:600 13px/1 'Montserrat',sans-serif; color:rgba(59,42,20,.64); padding:11px 0; border-radius:10px; transition:.2s; }
.mo-segs button.on{ background:#fff; color:var(--accent); box-shadow:0 2px 8px rgba(120,90,55,0.18); }
.mo-scroll{ position:absolute; left:0; right:0; top:204px; bottom:0; z-index:20; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.mo-scroll::-webkit-scrollbar{ display:none; }
.mo-scroll{ scrollbar-width:none; }
.mo-body{ padding:18px 16px 104px; display:flex; flex-direction:column; gap:14px; }
.mo-card{ border-radius:22px; background:var(--surface); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--surface-line); box-shadow:var(--shadow); padding:16px; }
.mo-pur{ display:flex; gap:14px; }
.mo-ic{ width:48px; height:48px; border-radius:15px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(140deg,var(--accent-2),var(--accent)); position:relative; overflow:hidden; }
.mo-ic::after{ content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(255,255,255,0.28),transparent 60%); }
.mo-ic svg{ position:relative; z-index:1; }
.mo-bd{ flex:1; min-width:0; }
.mo-tt{ font:700 15.5px/1.3 'Montserrat',sans-serif; color:var(--text-1); }
.mo-mt{ display:flex; align-items:center; gap:7px; margin-top:6px; font:500 12px/1 'Montserrat',sans-serif; color:var(--text-3); }
.mo-mt .sep{ width:3px; height:3px; border-radius:50%; background:var(--text-3); }
.mo-ft{ display:flex; align-items:center; gap:10px; margin-top:13px; padding-top:13px; border-top:1px solid var(--surface-line); }
.mo-price{ font:800 16px/1 'Montserrat',sans-serif; color:var(--text-1); font-variant-numeric:tabular-nums; }
.mo-badge{ display:inline-flex; align-items:center; gap:5px; font:700 11px/1 'Montserrat',sans-serif; padding:6px 10px; border-radius:8px; margin-left:auto; }
.mo-badge.paid{ background:var(--green-soft); color:var(--green); margin-left:auto; }
.mo-badge.active{ background:var(--green); color:#fff; }
.mo-badge.expired{ background:rgba(120,90,55,0.12); color:var(--text-2); }
.mo-ins-top{ display:flex; align-items:flex-start; gap:12px; }
.mo-ins-hd{ flex:1; min-width:0; }
.mo-ins-tt{ font:700 15.5px/1.25 'Montserrat',sans-serif; color:var(--text-1); }
.mo-ins-sub{ margin-top:5px; font:500 12px/1 'Montserrat',sans-serif; color:var(--text-3); }
.mo-ins-tag{ font:700 10px/1 'Montserrat',sans-serif; letter-spacing:.04em; text-transform:uppercase; padding:5px 9px; border-radius:7px; flex:none; background:var(--accent-soft); color:var(--accent); }
.mo-pay-prog{ margin-top:14px; }
.mo-pay-dots{ display:flex; gap:5px; }
.mo-pay-dots i{ flex:1; height:7px; border-radius:9999px; background:rgba(60,40,20,0.12); }
.mo-pay-dots i.done{ background:var(--prog); }
.mo-pay-lbl{ display:flex; justify-content:space-between; margin-top:8px; font:600 11.5px/1 'Montserrat',sans-serif; color:var(--text-2); }
.mo-amts{ display:flex; gap:10px; margin-top:14px; }
.mo-amt{ flex:1; border-radius:13px; padding:11px 12px; background:rgba(255,255,255,0.6); border:1px solid var(--surface-line); }
.mo-amt .al{ font:600 10.5px/1.2 'Montserrat',sans-serif; letter-spacing:.03em; text-transform:uppercase; color:var(--text-3); }
.mo-amt .av{ font:800 15px/1 'Montserrat',sans-serif; color:var(--text-1); margin-top:6px; font-variant-numeric:tabular-nums; }
.mo-amt .ad{ font:500 11px/1 'Montserrat',sans-serif; margin-top:4px; }
.mo-amt.next .ad{ color:var(--due); font-weight:600; }
.mo-amt.paid .ad{ color:var(--green); font-weight:600; }
.mo-sub{ display:flex; align-items:center; gap:14px; }
.mo-sub-ic{ width:48px; height:48px; border-radius:15px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(140deg,#4FA3C9,#2F7FB0); position:relative; overflow:hidden; }
.mo-sub-ic.exp{ background:linear-gradient(140deg,#C9BBA6,#A6957A); }
.mo-sub-ic::after{ content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(255,255,255,0.28),transparent 60%); }
.mo-sub-ic svg{ position:relative; z-index:1; }
.mo-sub-bd{ flex:1; min-width:0; }
.mo-sub-tt{ font:700 15px/1.3 'Montserrat',sans-serif; color:var(--text-1); }
.mo-sub-mt{ margin-top:6px; font:500 12px/1.35 'Montserrat',sans-serif; color:var(--text-3); }
.mo-sub-mt b{ color:var(--text-2); font-weight:600; }

/* ===== Merged header — transparent over hero, frosted-light on scroll ===== */
.hdr-merge{ position:fixed; top:0; left:0; right:0; z-index:100; background:transparent; border-bottom:1px solid transparent; backdrop-filter:none; -webkit-backdrop-filter:none; transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, border-color .3s ease; }
.hdr-merge .hdr-in{ position:relative; height:auto; display:flex; align-items:center; justify-content:space-between; gap:28px; padding-top:20px; padding-bottom:20px; }
.hdr-merge .hdr-logo{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.hdr-merge .logo{ height:40px; width:auto; display:block; }
.hdr-merge .logo-dark{ display:none; }
.hdr-merge .hdr-tag{ font:500 10.5px/1 'Inter',system-ui,sans-serif; letter-spacing:.01em; color:rgba(255,255,255,.6); }
/* nav truly centered regardless of side widths */
.hdr-merge .nav{ position:absolute; left:50%; transform:translateX(-50%); margin:0; display:flex; gap:32px; white-space:nowrap; }
.hdr-merge .nav a{ color:rgba(255,255,255,.85); font-family:'Inter',system-ui,sans-serif; font-weight:500; transition:color .18s, text-shadow .18s; }
.hdr-merge .nav a:hover{ color:#fff; text-shadow:0 0 14px rgba(219,31,144,.55); }
.hdr-merge .hdr-right{ margin-left:0; }
.hdr-merge .hdr-phone{ color:#fff; font-weight:500; }
.hdr-merge .btn-primary{ box-shadow:0 0 24px rgba(219,31,144,.3); }
/* scrolled → frosted glass light bar with dark text */
.hdr-merge.scrolled{ background:rgba(255,255,255,.75); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); border-bottom:1px solid rgba(0,0,0,.06); box-shadow:0 6px 24px rgba(20,22,26,.05); }
.hdr-merge.scrolled .logo-white{ display:none; }
.hdr-merge.scrolled .logo-dark{ display:block; }
.hdr-merge.scrolled .hdr-tag{ color:var(--fg3); }
.hdr-merge.scrolled .nav a{ color:#1A1A1A; text-shadow:none; }
.hdr-merge.scrolled .nav a:hover{ color:var(--primary); text-shadow:none; }
.hdr-merge.scrolled .hdr-phone{ color:#1A1A1A; }
@media(max-width:900px){ .hdr-merge .nav{ display:none; } }
/* clear the fixed header */
section.hero{ padding-top:130px; }
html{ scroll-padding-top:88px; }

/* hero phone float */
.hero-phones{ display:flex; justify-content:center; position:relative; z-index:1; }
.phone{ --pw:320px; }
.hero-split .phone, .hero-dark .phone{ --pw:330px; }
.hero-split .grid, .hero-dark .grid{ align-items:center; }
.hero-dark .eyebrow{ color:var(--magenta-400); }
.hero-center .phone-pair .phone{ box-shadow:var(--shadow-lg); }
/* keep a soft drop under hero phones on light bg */
.hero-split .hero-phones .phone{ box-shadow:0 30px 70px rgba(20,22,26,.16); }
@media(max-width:860px){
  .hero-split .phone, .hero-dark .phone{ --pw:260px; }
  .hero-center .phone-pair{ transform:scale(.82); }
}

/* ===== Type: Inter везде на лендинге (Manrope не используется) ===== */
body{ font-family:'Inter', system-ui, -apple-system, sans-serif; }
/* телефоны-макеты остаются на Montserrat (продуктовый UI) */
.phone-screen{ font-family:'Montserrat', system-ui, sans-serif; }

/* крупные заголовки */
.hero h1,
.sec-lead h2, .wl-lead h2, .closing h2,
.frow .fr-copy h3{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  letter-spacing:-0.02em;
}
.hero h1, .sec-lead h2, .wl-lead h2, .closing h2{ font-weight:800; }
.frow .fr-copy h3{ font-weight:700; }

/* цены — Manrope, крупно */
.tier .price b{ font-family:'Inter', system-ui, sans-serif; font-weight:800; font-size:50px; letter-spacing:-0.02em; line-height:1; }
.tier.feat .price b{ font-size:60px; }
.tier .price .strike, .tier .price .strike.on-dark-strike{ font-family:'Inter', system-ui, sans-serif; font-weight:600; font-size:24px; color:#94A3B8; }
.tier .price b.grad{ background:linear-gradient(135deg,#DB1F90 0%,#E91E63 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@media(max-width:480px){ .tier .price b{ font-size:42px; } .tier.feat .price b{ font-size:48px; } }

/* подписи CAPS, кнопки, навигация, табличные шапки, мелкий текст */
.eyebrow, .hdr-phone, .nav a, .btn,
.frow .fr-num, .wl-kick,
.tier .tier-name, .tier .tier-tag,
.cmp thead th, .cmp tr.price-row td .txt,
.tl-week, .tl-step h4, .faq-q,
.store-badge .sb-txt b{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
}
.eyebrow, .frow .fr-num, .wl-kick{ letter-spacing:0.1em; }
/* White-label exclusive features — filled gold star instead of check */
.tier.feat ul li.wl-excl{ color:#fff; }
.tier.feat ul li.wl-excl .lic svg{ fill:currentColor; filter:drop-shadow(0 0 6px rgba(245,158,11,0.5)); }

/* группы в карточке White-label + выделение фичер-карты */
.tier-group-label{ display:block; font:600 12px/1 'Inter', system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#DB1F90; margin:24px 0 16px; }
.tier-group-label + ul{ margin-top:0; flex:none; }
.tier-body{ flex:1; }
.tier-divider{ height:1px; margin:24px 0; }
.tier:not(.feat) .tier-divider{ background:rgba(0,0,0,0.08); }
.tier.feat .tier-divider{ background:rgba(255,255,255,0.1); }
.pricing-grid{ align-items:flex-start; }
/* Standard foot note */
.tier-foot-note{ font:400 13px/1.5 'Inter', system-ui, sans-serif; color:#6B6B6B; text-align:center; margin-top:12px; }
/* White-label extra prep lines */
.prep-annual{ font:500 13px/1.5 'Inter', system-ui, sans-serif; color:#94A3B8; margin-top:12px; }
.prep-stores{ font:400 12px/1.5 'Inter', system-ui, sans-serif; color:#6B7280; margin-top:8px; }

/* ============================================================
   Мобильные исправления (телефоны): шапка, лид White-label, футер
   ============================================================ */
@media(max-width:600px){
  /* Шапка: логотип задан инлайном 250×54 — ужимаем, чтобы влезала кнопка
     (запас и для узких экранов ~320px: iPhone SE и т.п.) */
  .hdr-merge .hdr-in{ gap:8px; padding-left:18px; padding-right:18px; }
  .hdr-merge .logo-white, .hdr-merge .logo-dark{ height:28px !important; width:auto !important; }
  .hdr-merge .hdr-right .btn{ padding:10px 14px; font-size:11.5px; letter-spacing:.01em; gap:6px; }
}
@media(max-width:760px){
  /* Лид-абзац White-label имел жёсткую width:700px и обрезался на узких экранах */
  .wl-lead p{ width:auto !important; }
}
@media(max-width:560px){
  /* Футер: на телефоне в одну колонку (иначе логотип распирает сетку) */
  .ftr-grid{ grid-template-columns:1fr; gap:30px; }
  .ftr .logo{ height:36px; }
}

/* ============================================================
   Набор мест White-label (живой виджет, данные из spots.php)
   ============================================================ */
.wl-spots{ margin:18px 0 4px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11); }
.wl-spots-head{ display:flex; align-items:center; gap:7px; font:700 13px/1.25 'Inter',system-ui,sans-serif; color:#fff; margin-bottom:13px; }
.wl-spots-head .lic{ color:var(--accent-orange); }
.wl-spots-row{ display:flex; align-items:center; gap:10px; min-height:22px; }
.wl-spots-row + .wl-spots-row{ margin-top:10px; }
.wl-spots-cap{ font:500 11.5px/1.25 'Inter',system-ui,sans-serif; color:rgba(255,255,255,.62); flex:0 0 94px; }
.wl-spots-dots{ display:flex; gap:5px; flex-wrap:wrap; flex:1; min-width:0; align-items:center; }
.wl-dot{ width:11px; height:11px; border-radius:50%; flex:none; transition:background .4s ease, box-shadow .4s ease; }
.wl-dot.spot{ background:var(--accent-orange); box-shadow:0 0 9px rgba(223,127,7,.55); }
.wl-dot.spot.off{ background:rgba(255,255,255,.14); box-shadow:none; }
.wl-dot.invoice{ background:var(--primary); box-shadow:0 0 9px rgba(219,31,144,.6); animation:wlPop .32s cubic-bezier(.22,1,.36,1) both; }
@keyframes wlPop{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }
.wl-spots-num{ font:800 15px/1 'Inter',system-ui,sans-serif; color:var(--accent-orange); flex:none; min-width:18px; text-align:right; }
.wl-spots-hint{ font:700 9.5px/1 'Inter',system-ui,sans-serif; text-transform:uppercase; letter-spacing:.04em; color:#fff; background:var(--primary); padding:4px 8px; border-radius:6px; flex:none; white-space:nowrap;
  opacity:0; transform:scale(.8); transition:opacity .25s ease, transform .25s ease; }
.wl-spots.has-invoices .wl-spots-hint{ opacity:1; transform:scale(1); }

/* ============================================================
   Видео-обзор реального приложения (конец блока White-label)
   ============================================================ */
.wl-video .fr-media{ display:flex; justify-content:center; align-items:center; }
/* Скругление/тень/рамка — на обёртке, чтобы само <video> оставалось «чистым»
   (иначе border-radius на видео даёт мыло на retina). Пропорции 1170×2532 (9:19.5). */
.wl-video-frame{ width:250px; max-width:74vw; aspect-ratio:1170 / 2532; border-radius:26px; overflow:hidden;
  background:#0b0b0e; border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 70px rgba(0,0,0,.55); margin:0 auto; }
/* object-fit:contain — в т.ч. в полноэкранном режиме показывает кадр целиком,
   не масштабирует по ширине и не режет середину. Внутри рамки поля не видны (пропорции совпадают). */
.wl-video-player{ display:block; width:100%; height:100%; object-fit:contain; background:#0b0b0e; }
.wl-video-player:fullscreen{ object-fit:contain; width:100%; height:100%; }