:root {
    --bg: #fcfcfc;
    --panel: #ffffff;
    --panel-2: #f7f7f8;
    --panel-3: #f0f0f1;
    --border: #ebebeb;
    --border-soft: #f2f2f3;
    --text: #09090b;
    --text-2: #3f3f46;
    --muted: #71717a;
    --muted-2: #a1a1aa;

    --brand: #5e6ad2;
    --brand-2: #8b92e0;
    --brand-bg: #f4f5fc;
    --green: #00b37a;
    --green-bg: #edfbf5;
    --amber: #f5a623;
    --amber-bg: #fef7e8;
    --red: #f04438;
    --red-bg: #fef2f2;
    --violet: #9f7aea;
    --violet-bg: #f5f0ff;
    --blue: #3b82f6;
    --blue-bg: #eff6ff;
    --pink: #ec4899;
    --cyan: #06b6d4;

    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --radius: 10px;
    --radius-sm: 6px;

    --shadow-sm: 0 1px 2px rgba(9,9,11,.04);
    --shadow:    0 1px 2px rgba(9,9,11,.05), 0 4px 16px -6px rgba(9,9,11,.08);
    --shadow-lg: 0 1px 2px rgba(9,9,11,.05), 0 18px 48px -18px rgba(9,9,11,.22);
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg); color: var(--text);
    font-size: 14px; line-height: 1.55;
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  .container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

  ::selection { background: var(--brand-bg); color: var(--brand); }

  /* ==== TOPBAR ==== */
  .topbar {
    position: sticky; top: 0; z-index: 40;
    background: rgba(252,252,252,.8);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .topbar-inner {
    display: flex; align-items: center; gap: 32px;
    height: 56px;
    max-width: 1200px; margin: 0 auto; padding: 0 28px;
  }
  .brand { display: inline-flex; align-items: center; gap: 9px; }
  .brand-mark {
    width: 24px; height: 24px; border-radius: 6px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff; display: grid; place-items: center;
    font-weight: 700; font-size: 12px;
  }
  .brand-name { font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; }
  .nav { display: flex; align-items: center; gap: 2px; }
  .nav a {
    padding: 6px 12px; border-radius: 6px;
    font-size: 13.5px; font-weight: 500; color: var(--text-2);
    transition: color .12s, background .12s;
  }
  .nav a:hover { color: var(--text); background: var(--panel-3); }
  .nav a.active {
    color: var(--brand); background: var(--brand-bg);
  }
  .nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

  /* ==== BUTTONS ==== */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px;
    font: inherit; font-size: 13.5px; font-weight: 500;
    border-radius: 6px; border: 1px solid transparent;
    cursor: pointer; white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s, transform .08s;
  }
  .btn:active { transform: translateY(0.5px); }
  .btn-primary { background: var(--text); color: #fff; border-color: var(--text); }
  .btn-primary:hover { background: #000; }
  .btn-outline { background: var(--panel); color: var(--text); border-color: var(--border); }
  .btn-outline:hover { background: var(--panel-2); border-color: #d4d4d8; }
  .btn-ghost { background: transparent; color: var(--text-2); }
  .btn-ghost:hover { background: var(--panel-3); color: var(--text); }
  .btn-lg { padding: 10px 18px; font-size: 14px; border-radius: 8px; }
  .btn svg { width: 14px; height: 14px; }

  /* ==== BREADCRUMB ==== */
  .crumbs {
    max-width: 1200px; margin: 0 auto;
    padding: 24px 28px 0;
    font-size: 12.5px; color: var(--muted);
    display: flex; align-items: center; gap: 6px;
  }
  .crumbs a { color: var(--muted); }
  .crumbs a:hover { color: var(--text); }
  .crumbs .sep { color: var(--muted-2); }
  .crumbs .here { color: var(--text); font-weight: 500; }

  /* ==== HERO ==== */
  .hero {
    padding: 32px 0 56px;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--border-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 800px 400px at 50% 0%, rgba(0,0,0,.35), transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 800px 400px at 50% 0%, rgba(0,0,0,.35), transparent 75%);
    pointer-events: none;
  }
  .hero-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; text-align: left; }

  .feature-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--brand);
    margin-bottom: 18px;
  }
  .feature-eyebrow .tk { width: 8px; height: 8px; border-radius: 2px; background: var(--brand); }
  .feature-eyebrow .sep { color: var(--muted-2); font-weight: 400; }

  h1.display {
    font-size: 54px; font-weight: 600;
    letter-spacing: -0.03em; line-height: 1.05;
    color: var(--text); margin: 0 0 20px; max-width: 560px;
  }
  h1.display em {
    font-style: normal;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .lead {
    font-size: 16px; color: var(--text-2); line-height: 1.6;
    margin: 0 0 28px; max-width: 520px;
  }

  .hero-ctas { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .hero-meta {
    margin-top: 24px;
    font-size: 12.5px; color: var(--muted);
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  }
  .hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }
  .hero-meta svg { width: 13px; height: 13px; color: var(--green); }

  /* ==== HERO VISUAL (changelog entry card) ==== */
  .hero-visual {
    position: relative;
  }
  .hero-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    max-width: 540px;
    margin-left: auto;
    text-align: left;
  }
  .hero-card .spotlight {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 20px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--border);
    font-size: 11px; font-weight: 600;
    color: var(--text-2); letter-spacing: 0.04em; text-transform: uppercase;
  }
  .hero-card .spotlight svg { width: 12px; height: 12px; }

  .hero-card-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px;
    background: linear-gradient(180deg, #fbfbfb, var(--panel));
    border-bottom: 1px solid var(--border);
    font-size: 12px; color: var(--muted);
  }
  .hero-card-head .left { display: flex; align-items: center; gap: 10px; }
  .hero-card-head .kind {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--green);
  }
  .hero-card-head .kind .tk { width: 8px; height: 8px; border-radius: 2px; background: var(--green); }
  .hero-card-head .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
  .hero-card-head .date { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 12.5px; }
  .hero-card-head .right { display: flex; align-items: center; gap: 8px; }
  .hero-card-head .ver, .hero-card-head .ref {
    font-family: var(--mono); font-size: 11px;
    padding: 2px 7px; border-radius: 4px;
    background: var(--panel-2); border: 1px solid var(--border);
    color: var(--text-2);
  }

  .hero-card-body { padding: 18px 20px 16px; text-align: left; }
  .hero-card-body h3 {
    font-size: 18px; font-weight: 600;
    letter-spacing: -0.015em; color: var(--text);
    line-height: 1.3; margin: 0 0 8px;
    text-align: left;
  }
  .hero-card-body p {
    font-size: 14px; color: var(--text-2); line-height: 1.6;
    margin: 0;
    text-align: left;
  }
  .hero-card-body code {
    font-family: var(--mono); font-size: 12.5px;
    padding: 1px 5px; border-radius: 4px;
    background: var(--panel-2); border: 1px solid var(--border);
    color: var(--text-2);
  }
  .hero-card-body ul {
    margin: 10px 0 0; padding-left: 18px;
    color: var(--text-2); font-size: 13.5px;
    text-align: left;
  }
  .hero-card-body ul li { margin-bottom: 3px; }
  .hero-card-body ul li::marker { color: var(--muted-2); }

  .hero-card-foot {
    margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }
  .hero-card-foot .reactions { display: inline-flex; gap: 5px; }
  .react {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 999px;
    background: var(--panel-2); border: 1px solid var(--border);
    font-size: 11.5px; color: var(--text-2);
  }
  .react.active { border-color: var(--brand); color: var(--brand); background: var(--brand-bg); }
  .hero-card-foot .comments {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--muted);
  }
  .hero-card-foot .comments svg { width: 13px; height: 13px; color: var(--muted-2); }

  /* ==== SECTION CHROME ==== */
  section.block { padding: 72px 0; }
  .section-head { text-align: center; max-width: 680px; margin: 0 auto 40px; }
  .section-eyebrow {
    font-size: 11px; color: var(--brand); font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 10px;
  }
  h2.section-title {
    font-size: 36px; font-weight: 600; letter-spacing: -0.025em;
    line-height: 1.15; margin: 0 0 12px;
  }
  .section-lead { font-size: 16px; color: var(--text-2); line-height: 1.55; margin: 0; }

  /* ==== CAPABILITY GRID ==== */
  .caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .cap {
    padding: 22px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color .12s, transform .12s, box-shadow .12s;
  }
  .cap:hover { border-color: #d4d4d8; box-shadow: var(--shadow); }
  .cap .icon {
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--brand-bg); color: var(--brand);
    display: grid; place-items: center; margin-bottom: 14px;
  }
  .cap .icon svg { width: 16px; height: 16px; }
  .cap.g .icon { background: var(--green-bg); color: var(--green); }
  .cap.a .icon { background: var(--amber-bg); color: var(--amber); }
  .cap.v .icon { background: var(--violet-bg); color: var(--violet); }
  .cap.c .icon { background: #ecfeff; color: var(--cyan); }
  .cap.p .icon { background: #fdf2f8; color: var(--pink); }
  .cap h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
  .cap p { font-size: 13.5px; color: var(--text-2); margin: 0; line-height: 1.6; }

  /* ==== DEEP-DIVE MODULE ==== */
  .deep {
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
    align-items: center;
  }
  .deep.reverse .deep-media { order: 2; }
  .deep-copy .section-eyebrow { text-align: left; margin-bottom: 14px; }
  .deep-copy h3 {
    font-size: 32px; font-weight: 600; letter-spacing: -0.02em;
    margin: 0 0 16px; line-height: 1.15;
  }
  .deep-copy p {
    font-size: 15px; color: var(--text-2); line-height: 1.65;
    margin: 0 0 18px;
  }
  .deep-copy .bullets { list-style: none; padding: 0; margin: 0; }
  .deep-copy .bullets li {
    display: flex; gap: 10px; padding: 6px 0;
    font-size: 13.5px; color: var(--text-2);
  }
  .deep-copy .bullets svg {
    width: 15px; height: 15px; color: var(--green);
    flex-shrink: 0; margin-top: 2px;
  }

  .deep-media {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    box-shadow: var(--shadow);
  }

  /* ==== EDITOR MOCK ==== */
  .editor {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }
  .editor-toolbar {
    display: flex; align-items: center; gap: 2px;
    padding: 8px 10px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--border);
  }
  .tb-btn {
    display: inline-flex; width: 28px; height: 28px;
    flex-shrink: 0;
    padding: 0; margin: 0; border: 0;
    background: transparent; font: inherit;
    border-radius: 5px; align-items: center; justify-content: center;
    color: var(--text-2); cursor: pointer;
  }
  .tb-btn:hover { background: var(--panel-3); color: var(--text); }
  .tb-btn.active { background: var(--panel); color: var(--brand); box-shadow: 0 1px 0 rgba(9,9,11,.04); }
  .tb-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
  .tb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
  .tb-right {
    margin-left: auto;
    font-size: 11px; color: var(--muted);
    display: flex; align-items: center; gap: 6px;
  }
  .tb-save-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--green);
    box-shadow: 0 0 0 3px rgba(0,179,122,.18);
  }

  .editor-doc { padding: 22px 22px 18px; min-height: 260px; position: relative; }
  .editor-doc h1 {
    font-size: 24px; font-weight: 600;
    letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.2;
  }
  .editor-doc .sub {
    font-size: 12.5px; color: var(--muted);
    margin-bottom: 18px;
  }
  .editor-doc p {
    font-size: 14px; color: var(--text-2); line-height: 1.7;
    margin: 0 0 10px;
  }
  .editor-doc code {
    font-family: var(--mono); font-size: 12.5px;
    background: var(--panel-2); border: 1px solid var(--border);
    padding: 1px 5px; border-radius: 4px; color: var(--text-2);
  }
  .editor-doc ul { margin: 8px 0 10px; padding-left: 20px; font-size: 13.5px; color: var(--text-2); }
  .editor-doc ul li { margin-bottom: 4px; }

  /* Slash command popover */
  .slash-pop {
    position: absolute;
    bottom: 18px; left: 22px;
    width: 260px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    font-size: 12.5px;
  }
  .slash-pop .sp-head {
    font-size: 10.5px; text-transform: uppercase;
    color: var(--muted); letter-spacing: 0.06em;
    padding: 6px 8px 4px;
  }
  .slash-pop .sp-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; border-radius: 5px;
    color: var(--text-2);
  }
  .slash-pop .sp-row.active { background: var(--brand-bg); color: var(--brand); }
  .slash-pop .sp-row .ico {
    width: 22px; height: 22px; border-radius: 4px;
    background: var(--panel-2); border: 1px solid var(--border);
    display: grid; place-items: center;
    color: var(--text-2);
  }
  .slash-pop .sp-row.active .ico { background: #fff; border-color: var(--brand-2); color: var(--brand); }
  .slash-pop .sp-row .ico svg { width: 12px; height: 12px; }
  .slash-pop .sp-row .n { flex: 1; font-weight: 500; }
  .slash-pop .sp-row .kb {
    font-family: var(--mono); font-size: 10px;
    padding: 1px 5px; border-radius: 3px;
    background: var(--panel-2); border: 1px solid var(--border);
    color: var(--muted);
  }

  /* ==== SCHEDULE MOCK ==== */
  .schedule-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .sch-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--panel-2);
  }
  .sch-head .t { font-size: 13.5px; font-weight: 600; }
  .sch-head .tab-group {
    display: flex; gap: 2px;
    padding: 2px; background: var(--panel);
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 11.5px;
  }
  .sch-head .tb-btn2 {
    padding: 3px 10px; border-radius: 4px;
    color: var(--muted); cursor: pointer; font-weight: 500;
  }
  .sch-head .tb-btn2.active { background: var(--panel-2); color: var(--text); box-shadow: 0 1px 0 rgba(9,9,11,.04); }

  .sch-body { padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .sch-form { display: flex; flex-direction: column; gap: 12px; }
  .sch-row label {
    display: block;
    font-size: 11px; font-weight: 500; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 4px;
  }
  .sch-row .inp {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--panel-2);
    font-size: 13px; color: var(--text);
  }
  .sch-row .inp svg { width: 13px; height: 13px; color: var(--muted); }
  .sch-row .inp .mono { font-family: var(--mono); font-size: 12px; }
  .sch-row .segment {
    display: flex; gap: 6px; flex-wrap: wrap;
  }
  .sch-row .segment .pill {
    padding: 4px 10px; border-radius: 999px;
    background: var(--panel-2); border: 1px solid var(--border);
    font-size: 11.5px; color: var(--text-2);
    display: inline-flex; align-items: center; gap: 5px;
  }
  .sch-row .segment .pill.active { background: var(--brand); color: #fff; border-color: var(--brand); }
  .sch-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-radius: 6px;
    background: var(--brand-bg); border: 1px solid #dbe0fa;
  }
  .sch-toggle .lbl { font-size: 12.5px; color: var(--brand); font-weight: 500; }
  .sch-toggle .tog {
    width: 28px; height: 16px; border-radius: 999px;
    background: var(--brand); position: relative;
  }
  .sch-toggle .tog::after {
    content: ""; position: absolute; right: 2px; top: 2px;
    width: 12px; height: 12px; border-radius: 50%; background: #fff;
  }

  .sch-cal {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
  }
  .sch-cal .cal-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
    font-size: 11.5px; font-weight: 600; color: var(--text);
  }
  .sch-cal .cal-head .arr { color: var(--muted); }
  .sch-cal .days {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
  }
  .sch-cal .d {
    text-align: center; padding: 5px 0;
    font-family: var(--mono); font-size: 11px;
    color: var(--text-2);
    border-radius: 4px;
  }
  .sch-cal .d.muted { color: var(--muted-2); }
  .sch-cal .d.head { color: var(--muted); font-size: 10px; padding: 3px 0; }
  .sch-cal .d.today {
    background: var(--brand); color: #fff; font-weight: 600;
  }
  .sch-cal .d.has-post {
    position: relative;
  }
  .sch-cal .d.has-post::after {
    content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--brand);
  }

  /* ==== REACH (email + rss) MOCK ==== */
  .reach-stack { display: flex; flex-direction: column; gap: 12px; }

  .email-preview {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .email-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-2);
    font-size: 11.5px;
  }
  .email-head .row { display: flex; gap: 8px; padding: 1px 0; }
  .email-head .k { color: var(--muted); min-width: 48px; }
  .email-head .v { color: var(--text-2); }
  .email-head .v strong { color: var(--text); font-weight: 600; }
  .email-body {
    padding: 18px 20px; font-size: 14px; color: var(--text-2);
    line-height: 1.6;
  }
  .email-body h4 {
    font-size: 17px; font-weight: 600; margin: 0 0 8px;
    letter-spacing: -0.01em; color: var(--text);
  }
  .email-body p { margin: 0 0 10px; }
  .email-body .email-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 6px;
    background: var(--text); color: #fff; font-size: 12.5px;
    text-decoration: none; margin-top: 8px; font-weight: 500;
  }
  .email-body .email-cta svg { width: 13px; height: 13px; flex-shrink: 0; }
  .email-foot {
    padding: 10px 16px;
    font-size: 11px; color: var(--muted);
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }
  .email-foot .logo {
    width: 16px; height: 16px; border-radius: 4px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    display: inline-block; vertical-align: -4px;
    margin-right: 6px;
  }

  .feed-pills {
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  .feed-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 8px;
    background: var(--panel); border: 1px solid var(--border);
    font-size: 12.5px;
  }
  .feed-pill .logo {
    width: 26px; height: 26px; border-radius: 6px;
    display: grid; place-items: center; flex-shrink: 0;
  }
  .feed-pill.rss .logo { background: #f26522; color: #fff; }
  .feed-pill.json .logo { background: #f9a826; color: #fff; }
  .feed-pill.email .logo { background: var(--brand-bg); color: var(--brand); border: 1px solid #dbe0fa; }
  .feed-pill .logo svg { width: 13px; height: 13px; }
  .feed-pill .meta .n { font-weight: 600; color: var(--text); }
  .feed-pill .meta .u {
    font-family: var(--mono); font-size: 10.5px; color: var(--muted);
    display: block; margin-top: 1px;
  }

  /* ==== "ALSO IN" STRIP ==== */
  .also {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px;
  }
  .also-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 32px;
  }
  .also-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0;
    font-size: 13.5px; color: var(--text-2);
  }
  .also-item svg {
    width: 15px; height: 15px; color: var(--brand);
    flex-shrink: 0; margin-top: 3px;
  }
  .also-item strong { color: var(--text); font-weight: 600; margin-right: 4px; }

  /* ==== PAIRS WITH ==== */
  .pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .pair {
    padding: 24px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color .12s, transform .12s, box-shadow .12s;
  }
  .pair:hover { border-color: #d4d4d8; box-shadow: var(--shadow); transform: translateY(-1px); }
  .pair-head {
    display: flex; align-items: center; gap: 10px;
  }
  .pair-head .icon {
    width: 32px; height: 32px; border-radius: 7px;
    display: grid; place-items: center;
  }
  .pair.feedback .icon { background: var(--violet-bg); color: var(--violet); }
  .pair.roadmap .icon { background: var(--green-bg); color: var(--green); }
  .pair.surveys .icon { background: var(--amber-bg); color: var(--amber); }
  .pair-head .icon svg { width: 15px; height: 15px; }
  .pair-head h4 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
  .pair p { font-size: 13px; color: var(--text-2); margin: 0; line-height: 1.55; }
  .pair .link {
    margin-top: auto; font-size: 12.5px; font-weight: 500; color: var(--brand);
    display: inline-flex; align-items: center; gap: 4px;
  }
  .pair .link svg { width: 12px; height: 12px; transition: transform .12s; }
  .pair:hover .link svg { transform: translateX(2px); }

  /* ==== CTA ==== */
  .cta-block {
    padding: 72px 0; text-align: center;
    background:
      radial-gradient(ellipse 600px 300px at 50% 0%, var(--brand-bg), transparent 70%),
      var(--bg);
  }
  .cta-block h2 {
    font-size: 40px; font-weight: 600; letter-spacing: -0.025em;
    margin: 0 0 16px; line-height: 1.1;
  }
  .cta-block h2 em {
    font-style: normal;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .cta-block p {
    font-size: 16px; color: var(--text-2); max-width: 520px;
    margin: 0 auto 28px;
  }
  .cta-row { display: inline-flex; gap: 10px; }

  /* ==== FOOTER ==== */
  footer.site {
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding: 56px 0 32px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 40px;
  }
  .footer-brand p {
    font-size: 13px; color: var(--muted);
    margin: 14px 0 0; line-height: 1.55; max-width: 260px;
  }
  .footer-col h4 {
    font-size: 11px; font-weight: 600;
    color: var(--text); text-transform: uppercase;
    letter-spacing: 0.06em; margin: 0 0 12px;
  }
  .footer-col a {
    display: block; padding: 4px 0;
    font-size: 13px; color: var(--muted);
    transition: color .12s;
  }
  .footer-col a:hover { color: var(--text); }
  .footer-col a.active { color: var(--brand); font-weight: 500; }
  .footer-bottom {
    margin-top: 40px; padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: var(--muted);
  }
  .footer-bottom .socials { display: flex; gap: 10px; }
  .footer-bottom .socials a {
    width: 28px; height: 28px; border-radius: 5px;
    background: var(--panel-2); color: var(--muted);
    display: grid; place-items: center;
    transition: background .12s, color .12s;
  }
  .footer-bottom .socials a:hover { background: var(--panel-3); color: var(--text); }
  .footer-bottom .socials svg { width: 13px; height: 13px; }

  /* ==== RESPONSIVE ==== */
  @media (max-width: 960px) {
    .nav { display: none; }
    h1.display { font-size: 38px; }
    h2.section-title, .cta-block h2 { font-size: 28px; }
    .hero-inner { grid-template-columns: 1fr; gap: 32px; }
    .caps { grid-template-columns: 1fr; }
    .deep, .deep.reverse { grid-template-columns: 1fr; gap: 32px; }
    .deep.reverse .deep-media { order: initial; }
    .also-grid { grid-template-columns: 1fr; }
    .pairs { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .sch-body { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {
    .cta-row { flex-direction: column; gap: 8px; }
  }