/* ===== index.css — iOS-like стиль, центрирование и круглый блок ===== */

:root{
  --bg:#f6f7fb;
  --ink:#0e1116;
  --muted:#6b7280;

  --card-bg:#ffffff;
  --card-br:#e9edf5;
  --card-radius:18px;

  --shadow-1: 0 1px 0 rgba(20,24,40,.06);
  --shadow-2: 0 6px 14px rgba(20,24,40,.06);
  --shadow-3: 0 18px 32px rgba(20,24,40,.06);

  --orange-1:#FFB300;
  --orange-2:#FF6A00;
  --orange-1-d:#ff9900;
  --orange-2-d:#ff5a00;

  --ring: 0 0 0 6px rgba(255,138,0,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: Inter, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Заголовок */
.page-title{
  margin:32px 0 18px;
  text-align:center;
  font-size:44px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:.01em;
  text-transform:uppercase;
}

/* Сетка 3×3 */
.grid{
  width:1180px; max-width:calc(100vw - 64px);
  margin:0 auto 72px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:34px 44px; /* v/h */
}

/* Базовая карточка */
.card{
  background:var(--card-bg);
  border:1px solid var(--card-br);
  border-radius:var(--card-radius);
  box-shadow:var(--shadow-1),var(--shadow-2),var(--shadow-3);
  height:220px;
  display:flex;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
  will-change: transform;
}
.card:hover{ transform: translateY(-2px) }

/* Контент карточки — строго по центру */
.card__inner{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:22px;
  text-align:center;
}

/* Заголовок в первой карточке */
.card__title{
  margin:0 0 18px;
  font-size:20px;
  line-height:1.35;
  font-weight:700;
}

/* Кнопка НАЧАТЬ */
.btn-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #ffa726, #fb8c00);
  border: none;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(251, 140, 0, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-start__arrow {
  margin-left: 8px;
  font-size: 20px;
  line-height: 1;
}

.btn-start:hover {
  background: linear-gradient(135deg, #ff9800, #f57c00); /* чуть ярче при наведении */
  box-shadow: 0 6px 14px rgba(251, 140, 0, 0.5);
  transform: translateY(-2px);
}

.btn-start:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(251, 140, 0, 0.4);
}

/* ===== КРУГЛАЯ КАРТОЧКА С ЦИФРОЙ ===== */
.card--circle{
  border-radius:50%;
  width:220px;   /* ровно как высота */
  height:220px;  /* совпадает с высотой обычной карточки */
  justify-self:center; /* чтобы он в ячейке по центру стоял */
  display:flex;
  align-items:center;
  justify-content:center;
}

.card--circle .circle-number{
  font-size:56px;
  font-weight:800;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  text-align:center;
}

/* Адаптив */
@media (max-width: 1100px){
  .grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .page-title{font-size:32px}
  .grid{grid-template-columns:1fr; gap:22px}
  .card{height:200px}
}

/* Меньше анимаций при prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .card, .btn-start{transition:none}
}




/* надпись вместо кнопки, пока ждём ответ вебхука */
.loading-text{
  font-weight:700;
  color:#6b7280;
  background:#fff;
  border:1px dashed #e5e7eb;
  border-radius:999px;
  padding:14px 22px;
  box-shadow:0 4px 10px rgba(0,0,0,.04);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:.6; transform: translateY(0)}
  50%{opacity:1; transform: translateY(-1px)}
}





/* меньший заголовок на внутренних страницах */
.page-title--sm{
  font-size:34px;
  margin-top:26px;
  margin-bottom:14px;
}

/* таблица с сеткой */
.table-host{width:100%}
.table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
}
.table--grid{
  border:1px solid #c7ccd6; /* рамка таблицы темнее */
  box-shadow: var(--shadow-1), var(--shadow-2);
}

.table thead th{
  background:#f7f9fe;
  color:#0e1116;
  font-weight:800;
  font-size:14px;
  padding:10px 12px;
  text-align:center;
  border:1px solid #c7ccd6; /* тёмная граница */
}

.table td{
  padding:12px 12px;
  font-size:16px;
  text-align:center;
  border:1px solid #c7ccd6; /* тёмная граница */
}

.table td:first-child,
.table th:first-child{
  text-align:left;
  width:170px;
}

/* подпись "Кол-во недель" — меньше и приглушённая */
.cell-label{
  font-size:13px;
  color:#697386;
  font-weight:700;
}
/* === ЖЁСТКАЯ СЕТКА ДЛЯ ТАБЛИЦЫ ПРОДОЛЖИТЕЛЬНОСТИ === */
#durationTableHost .duration-table{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;   /* чтобы не схлопывались границы */
  border-spacing:0;
  background:#fff;
  border:2px solid #b8beca;   /* внешняя рамка темнее */
  border-radius:10px;
  overflow:hidden;            /* скругление углов */
}

#durationTableHost .duration-table thead th{
  background:#f2f5fb;
  font-weight:800;
  font-size:14px;
  text-align:center;
  padding:10px 8px;
  border-right:1px solid #b8beca;
  border-bottom:2px solid #b8beca;
}

#durationTableHost .duration-table tbody td{
  font-size:16px;
  text-align:center;
  padding:12px 8px;
  border-right:1px solid #b8beca;
  border-bottom:1px solid #b8beca;
}

#durationTableHost .duration-table th:first-child,
#durationTableHost .duration-table td:first-child{
  text-align:left;
  width:180px;
  padding-left:14px;
}

/* Убираем правую/нижнюю границы у крайних ячеек, чтоб не было двойных линий */
#durationTableHost .duration-table thead th:last-child,
#durationTableHost .duration-table tbody td:last-child{ border-right:0 }
#durationTableHost .duration-table tbody tr:last-child td{ border-bottom:0 }

/* подпись "Кол-во недель" — меньше и приглушённая */
#durationTableHost .cell-label{
  font-size:10px;
  color:#5e687a;
  font-weight:500;
}

/* (опционально) лёгкая подсветка строки при наведении — сразу видно ячейки */
#durationTableHost .duration-table tbody tr:hover td{
  background:#fafbfe;
}