/* Дизайн-система сайта 24freeweb.ru.
   Палитра унаследована от правовых страниц (docs.py) и темы Happ в worker.js —
   лайм на тёмном; это фирменные цвета сервиса, а не свободный выбор.
   Правило: лайм используется ТОЛЬКО функционально (действие, фокус, статус),
   никогда как декор. Метафора бренда «NOTE» — заметка: линовка, точечный
   лидер в прайсе, узкая колонка текста. */

:root{
  --ink:#0F1115;        /* фон страницы */
  --panel:#171A1F;      /* карточка, поле ввода */
  --panel-2:#1C2028;    /* наведение/активное */
  --rule:#242A34;       /* линии и рамки */
  --text:#E8EAED;
  --muted:#9AA0A6;
  --marker:#D4F500;     /* действие */
  --marker-ink:#101208; /* текст на лайме */
  --ok:#7BD88F;
  --warn:#FFC454;
  --danger:#FF6B5A;
  --col:620px;          /* ширина колонки — «страница заметки» */
  --r:14px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font:400 17px/1.62 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--text); text-underline-offset:3px; text-decoration-color:var(--rule)}
a:hover{text-decoration-color:var(--marker)}

/* Поле тетради: весь контент отступает от вертикальной линии, которая идёт
   через всю страницу. Единственный «фирменный» элемент оформления. */
.wrap{max-width:var(--col); margin:0 auto; padding:0 20px 0 38px}
body{
  background-image:linear-gradient(rgba(212,245,0,.28), rgba(212,245,0,.28));
  background-repeat:no-repeat;
  background-size:1px 100%;
  background-position:max(20px, calc(50% - var(--col)/2 + 20px)) 0;
}

/* ── шапка ───────────────────────────────────────────────────────────── */
/* Все горизонтальные линии живут внутри .wrap, а не во всю ширину экрана:
   на большом мониторе страница должна читаться как лист, а не как полосы. */
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:60px;
  border-bottom:1px solid var(--rule)}
.brand{font-weight:800; font-size:17px; letter-spacing:-.01em; text-decoration:none; color:var(--text)}
.brand i{font-style:normal; color:var(--marker)}
.top a.plain{font-size:15px; color:var(--muted); text-decoration:none}
.top a.plain:hover{color:var(--text)}

/* ── герой: линованный лист ──────────────────────────────────────────── */
.hero > .wrap{
  padding-top:54px; padding-bottom:46px;
  border-bottom:1px solid var(--rule);
  background-image:repeating-linear-gradient(
    to bottom, transparent 0, transparent 31px, rgba(255,255,255,.06) 31px, rgba(255,255,255,.06) 32px);
}
h1{
  margin:0 0 18px; font-weight:800; letter-spacing:-.035em; line-height:1.06;
  font-size:clamp(38px, 9.5vw, 58px);
}
.lede{margin:0 0 26px; font-size:19px; color:var(--muted); max-width:34em}

/* ── форма входа ─────────────────────────────────────────────────────── */
.form{display:flex; flex-direction:column; gap:10px; max-width:420px}
.field{
  width:100%; height:54px; padding:0 16px; font:inherit; font-size:17px;
  color:var(--text); background:var(--panel); border:1px solid var(--rule); border-radius:var(--r);
}
.field::placeholder{color:#6C737E}
.field:focus{outline:2px solid var(--marker); outline-offset:1px; border-color:transparent}
.field.code{letter-spacing:.4em; font-weight:700; font-size:26px; text-align:center; padding:0}

.btn{
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:54px; padding:0 22px; border:0; border-radius:var(--r); cursor:pointer;
  font:inherit; font-size:17px; font-weight:700; color:var(--marker-ink); background:var(--marker);
  transition:filter .15s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{filter:brightness(.94)}
.btn[disabled]{opacity:.45; cursor:default; filter:none}
.btn:focus-visible{outline:2px solid var(--text); outline-offset:2px}
.btn.wide{width:100%}
.btn.quiet{background:var(--panel); color:var(--text); border:1px solid var(--rule)}
.btn.quiet:hover{background:var(--panel-2); filter:none}

.note{font-size:14px; color:var(--muted); margin:0}
.note a{color:var(--muted)}
.err{font-size:15px; color:var(--danger); margin:0}

/* ── секции ──────────────────────────────────────────────────────────── */
section > .wrap{padding-top:44px; padding-bottom:44px; border-bottom:1px solid var(--rule)}
h2{margin:0 0 22px; font-size:26px; font-weight:800; letter-spacing:-.025em}
h3{margin:0 0 6px; font-size:17px; font-weight:700}
p{margin:0 0 14px; max-width:34em}
p:last-child{margin-bottom:0}

/* шаги — реальная последовательность, поэтому нумерованы */
.steps{list-style:none; margin:0; padding:0; counter-reset:s}
.steps li{
  counter-increment:s; display:grid; grid-template-columns:38px 1fr; gap:16px;
  padding:16px 0; border-top:1px solid var(--rule);
}
.steps li:first-child{border-top:0; padding-top:0}
.steps li::before{
  content:counter(s); font-size:26px; font-weight:800; line-height:1.1;
  color:var(--marker); letter-spacing:-.03em;
}
.steps p{margin:0; color:var(--muted); font-size:16px}

/* прайс — строки с точечным лидером, как в оглавлении */
.price{list-style:none; margin:0 0 18px; padding:0}
.price li{display:flex; align-items:baseline; gap:12px; padding:11px 0}
.price li + li{border-top:1px solid var(--rule)}
.price .what{font-weight:600}
.price .dots{flex:1; border-bottom:1px dotted #39404C; transform:translateY(-5px)}
.price .rub{font-weight:800; font-size:19px; white-space:nowrap}
.price .free .rub{color:var(--marker)}
.price .per{display:block; font-size:14px; font-weight:400; color:var(--muted); margin-top:2px}

/* устройства */
.devices{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding:0; list-style:none}
.devices li{
  padding:8px 14px; border:1px solid var(--rule); border-radius:999px;
  font-size:15px; color:var(--muted);
}

/* вопросы */
.qa{border-top:1px solid var(--rule)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{
  padding:15px 0; cursor:pointer; font-weight:600; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+'; color:var(--marker); font-size:22px; font-weight:400; line-height:1}
.qa details[open] summary::after{content:'–'}
.qa summary:focus-visible{outline:2px solid var(--marker); outline-offset:2px}
.qa .ans{padding:0 0 16px; color:var(--muted); font-size:16px}

/* ── подвал ──────────────────────────────────────────────────────────── */
footer{color:var(--muted); font-size:14px}
footer > .wrap{padding-top:28px; padding-bottom:44px}
footer nav{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:14px}
footer a{color:var(--muted)}

/* ── общие мелочи ────────────────────────────────────────────────────── */
.center{max-width:420px}
.stack{display:flex; flex-direction:column; gap:14px}
.row{display:flex; gap:10px; align-items:center}
.grow{flex:1; min-width:0}
.hide{display:none !important}
.trunc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* ── кабинет ─────────────────────────────────────────────────────────── */
.tabs{display:flex; gap:20px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs > .wrap{padding:0}
.tab{
  padding:14px 0; font-size:16px; color:var(--muted); text-decoration:none;
  border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer;
  background:none; border-top:0; border-left:0; border-right:0; font-family:inherit;
}
.tab.on{color:var(--text); border-bottom-color:var(--marker); font-weight:600}
.tab:focus-visible{outline:2px solid var(--marker); outline-offset:2px}

.state{display:flex; align-items:baseline; gap:10px; margin-bottom:4px}
.dot{width:9px; height:9px; border-radius:50%; background:var(--ok); flex:none; align-self:center}
.dot.warn{background:var(--warn)} .dot.off{background:var(--danger)}
.big{font-size:clamp(28px,7vw,38px); font-weight:800; letter-spacing:-.03em; line-height:1.1; margin:0}

/* мера: срок и трафик — две одинаковые строки с полосой */
.meters{margin:22px 0 0}
.meter + .meter{margin-top:18px}
.meter .cap{display:flex; justify-content:space-between; gap:12px; font-size:15px; margin-bottom:7px}
.meter .cap b{font-weight:600}
.meter .cap span{color:var(--muted)}
.bar{height:6px; border-radius:3px; background:var(--rule); overflow:hidden}
.bar i{display:block; height:100%; background:var(--marker); border-radius:3px}
.bar.warn i{background:var(--warn)} .bar.off i{background:var(--danger)}

/* ссылка подписки */
.sub{margin-top:26px}
.sub .val{
  display:block; background:var(--panel); border:1px solid var(--rule); border-radius:var(--r);
  padding:13px 15px; font-size:14px; color:var(--muted); word-break:break-all; line-height:1.45;
}
.acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.acts .btn{height:44px; font-size:15px; padding:0 16px}

/* строки-факты (почта, устройства, Telegram) */
.facts{list-style:none; margin:26px 0 0; padding:0}
.facts li{display:flex; align-items:baseline; gap:12px; padding:13px 0; border-top:1px solid var(--rule)}
.facts .k{color:var(--muted); font-size:15px}
.facts .dots{flex:1; border-bottom:1px dotted #39404C; transform:translateY(-5px)}
.facts .v{font-weight:600; text-align:right}
.facts .v a, .facts .v button{color:var(--marker); background:none; border:0; padding:0;
  font:inherit; font-weight:600; cursor:pointer; text-decoration:none}

/* выбор приложения / тарифа */
.pick{list-style:none; margin:0; padding:0}
.pick li{
  display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer;
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--r); margin-bottom:8px;
}
.pick li.on{border-color:var(--marker); background:var(--panel-2)}
.pick li:focus-visible{outline:2px solid var(--marker); outline-offset:2px}
.pick .ic{width:38px; height:38px; border-radius:10px; flex:none; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:14px; overflow:hidden}
.pick .ic img{width:100%; height:100%; object-fit:cover}
.pick .grow{min-width:0}
.pick .nm{display:block; font-weight:600}
.pick .sub2{display:block; font-size:14px; color:var(--muted); margin-top:2px}
.pick .rd{width:20px; height:20px; border-radius:50%; border:2px solid var(--rule); flex:none; position:relative}
.pick li.on .rd{border-color:var(--marker)}
.pick li.on .rd::after{content:''; position:absolute; inset:3px; border-radius:50%; background:var(--marker)}
.pick .tag{font-size:12px; font-weight:700; color:var(--marker-ink); background:var(--marker);
  border-radius:999px; padding:2px 8px; margin-left:8px}

.qr{background:#fff; border-radius:var(--r); padding:14px; margin-top:12px; max-width:260px}
.qr svg{display:block; width:100%; height:auto}

.friends{list-style:none; margin:0; padding:0}
.friends li{display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--rule)}
.friends .av{width:36px; height:36px; border-radius:50%; background:var(--panel-2); flex:none;
  display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--muted)}
.friends .st{margin-left:auto; font-size:14px; color:var(--muted)}
.friends .st.paid{color:var(--ok)}

.ta{width:100%; min-height:130px; padding:14px 16px; font:inherit; font-size:16px; resize:vertical;
  color:var(--text); background:var(--panel); border:1px solid var(--rule); border-radius:var(--r)}
.ta:focus{outline:2px solid var(--marker); outline-offset:1px; border-color:transparent}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--marker); color:var(--marker-ink); font-weight:700; font-size:15px;
  padding:12px 20px; border-radius:999px; z-index:9; box-shadow:0 6px 24px rgba(0,0,0,.4);
}

/* вложения в тикете поддержки */
.files{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.files:empty{display:none}
.file{display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--panel);
  border:1px solid var(--rule); border-radius:12px; font-size:15px}
.file .fname{flex:1; min-width:0}
.file .fsize{color:var(--muted); font-size:13px; white-space:nowrap}
.file .fdel{flex:none; width:28px; height:28px; border:0; border-radius:8px; cursor:pointer;
  background:var(--panel-2); color:var(--muted); font-size:18px; line-height:1}
.file .fdel:hover{color:var(--danger)}