/* Shared table styles for /compare/* pages. Compact scorecard layout —
 * feature label + mark + short note on one baseline.
 *
 * Each page linked this file AFTER its inline <style>, so later-in-source
 * rules win at equal specificity. We explicitly set flex-direction: row
 * because the inline CSS shipped with a column default; without this the
 * mark stacks above the note and long notes bleed into the next column.
 */

.compare-table{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:var(--bg-2);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.5);
}

.compare-row{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  border-bottom:1px solid var(--line);
}
.compare-row:last-child{border-bottom:none}

/* Column header row — "Возможность / ChatGPT / Agent Nine".
 * Bigger type than before so it reads as a caption, not fine print. */
.compare-row.header{background:rgba(0,0,0,.4)}
.compare-row.header .compare-cell{
  display:flex;
  align-items:center;
  font-family:var(--mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
  padding:20px 24px;
}
.compare-row.header .compare-cell.us{color:var(--amber)}

/* Category divider — "Доступ к окружению", "Интеграции" etc.
 * Visibly section-heading-sized, not a thin cap. */
.compare-row.category{
  background:rgba(255,184,77,.06);
  grid-template-columns:1fr;
}
.compare-row.category .compare-cell{
  padding:16px 24px;
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--amber);
  display:flex;
  align-items:center;
}

/* Data row — every cell shares the same rhythm. */
.compare-cell{
  padding:14px 22px;
  min-width:0;
  display:flex;
  flex-direction:row;          /* ← overrides inline column default */
  align-items:center;
  gap:12px;
}

.compare-cell.label{
  font-family:var(--mono);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--ink);
}

.compare-cell.them,
.compare-cell.us{
  border-left:1px solid var(--line);
  font-family:var(--serif);
  font-size:14px;
  line-height:1.4;
  color:var(--ink);
  letter-spacing:0;
}
.compare-cell.us{background:rgba(255,184,77,.035)}

/* Mark — tight 22px pill */
.compare-cell .mark{
  flex-shrink:0;
  width:22px;height:22px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  line-height:1;
}
.compare-cell .mark.yes{background:rgba(140,212,138,.16);color:var(--green)}
.compare-cell .mark.half{background:rgba(255,184,77,.18);color:var(--amber)}
.compare-cell .mark.no{background:rgba(255,107,92,.14);color:var(--red)}

/* Note — wraps freely up to two lines; the grid column clips runaway
 * content because we set flex:1 1 auto + min-width:0 on the flex item.
 * No ellipsis — user shouldn't have to guess the rest from "…". */
.compare-cell .note{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  font-family:var(--serif);
  font-size:13.5px;
  line-height:1.45;
  color:var(--ink-dim);
  letter-spacing:0;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  white-space:normal;
}

/* ── Technical-edge block — used on pages where we unambiguously
 * lead on technical merits (vs ChatGPT, vs Cursor). Shape is a 2-col
 * card grid with a numbered tag + headline + short explainer + a
 * single bold "fact" line so the reader's eye lands on the concrete
 * claim even at a skim.
 */
.edges{padding:90px 0;border-bottom:1px solid var(--line)}
.edges-head{max-width:800px;margin-bottom:44px}
.edges-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.015em;
  margin-bottom:14px;
}
.edges-head p{font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink-dim);max-width:62ch}
.edges-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:820px){.edges-grid{grid-template-columns:1fr}}
.edge-card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px 28px 24px;
  display:flex;flex-direction:column;gap:10px;
}
.edge-card .num{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.22em;color:var(--amber);
}
.edge-card h3{
  font-family:var(--serif);font-weight:400;
  font-size:22px;line-height:1.2;letter-spacing:-.01em;color:var(--ink);
}
.edge-card p{
  font-family:var(--serif);font-size:14.5px;line-height:1.6;color:var(--ink-dim);
}
.edge-card .fact{
  margin-top:auto;padding-top:14px;
  border-top:1px dashed var(--line-2);
  font-family:var(--mono);font-size:12px;color:var(--ink);
  letter-spacing:.04em;
}
.edge-card .fact strong{color:var(--amber);font-weight:700}

/* ── Modes block — shared across all three compare pages ────── */
.modes{padding:80px 0;border-bottom:1px solid var(--line)}
.modes-head{max-width:780px;margin-bottom:36px}
.modes-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.015em;
  margin-bottom:14px;
}
.modes-head p{font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink-dim);max-width:62ch}
.modes-head p strong{color:var(--amber);font-weight:500}
.modes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.modes-grid{grid-template-columns:1fr}}
.mode-card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:26px 24px;
  display:flex;flex-direction:column;gap:12px;
}
.mode-card.flagship{
  border-color:rgba(255,184,77,.32);
  background:linear-gradient(180deg, rgba(255,184,77,.04), rgba(255,184,77,.01));
}
.mode-card .tag{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);
}
.mode-card.flagship .tag{color:var(--amber)}
.mode-card h3{
  font-family:var(--serif);font-weight:400;
  font-size:20px;line-height:1.2;letter-spacing:-.01em;color:var(--ink);
}
.mode-card ul{list-style:none;margin:0;padding:0}
.mode-card li{
  font-family:var(--serif);font-size:14px;line-height:1.5;
  color:var(--ink-dim);
  padding:5px 0 5px 16px;position:relative;
}
.mode-card li::before{content:"—";position:absolute;left:0;color:var(--ink-mute);font-weight:600}
.mode-card.flagship li::before{color:var(--amber)}

/* ── Mobile — wrap freely, keep the same look-and-feel ───────── */
@media(max-width:820px){
  .compare-row{grid-template-columns:1fr}
  .compare-row.header{display:none}
  .compare-row.category .compare-cell{padding:12px 18px;font-size:12px;letter-spacing:.2em}
  .compare-cell{padding:12px 18px;gap:10px;flex-direction:row}
  .compare-cell.label{
    background:rgba(255,184,77,.05);
    padding:10px 18px;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--amber);
  }
  .compare-cell.them,
  .compare-cell.us{border-left:none;align-items:flex-start}
  .compare-cell .note{white-space:normal;overflow:visible;text-overflow:clip}
}