/* ---- check-option grid ---- */
  .check-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .check-opt {
    position: relative; cursor: pointer;
    border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-sm);
    padding: 14px 14px 14px 46px;
    transition: border-color .15s, background .15s;
  }
  .check-opt:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.03); }
  .check-opt input { position: absolute; opacity: 0; pointer-events: none; }
  .check-opt .cbox {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; border-radius: 5px;
    border: 1px solid rgba(255,255,255,.28);
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
  }
  .check-opt:has(input:checked) { border-color: var(--brand-600); background: linear-gradient(180deg, rgba(224,64,16,.1), transparent); }
  .check-opt:has(input:checked) .cbox { background: var(--brand-600); border-color: var(--brand-600); }
  .check-opt:has(input:checked) .cbox::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 700; }
  .check-opt .ct { font-weight: 600; font-size: 14.5px; color: var(--paper); display: block; line-height: 1.3; }
  .check-opt .cd { font-size: 12px; color: var(--ink-400); margin-top: 2px; line-height: 1.3; }

  /* ---- aside index ---- */
  .aside-index { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
  .aside-index-item { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .aside-index-item:last-child { border-bottom: none; }
  .aside-idx-num {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    font-family: var(--font-mono); font-size: 13px; font-weight: 700;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: var(--ink-500);
    display: flex; align-items: center; justify-content: center;
    transition: all .25s;
  }
  .aside-idx-num.is-active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; box-shadow: var(--shadow-brand); }
  .aside-idx-num.is-done   { background: rgba(224,64,16,.15); border-color: var(--brand-700); color: var(--brand-400); }
  .aside-idx-label { font-size: 14px; font-weight: 600; color: var(--ink-500); transition: color .25s; }
  .aside-idx-label.is-active { color: var(--paper); }
  .aside-idx-label.is-done   { color: var(--ink-300); }

  /* ---- autosave ---- */
  .autosave-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-500); font-family: var(--font-mono); }
  .autosave-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-green); flex-shrink: 0; }

  /* ---- progress ---- */
  .progress-bar-wrap { height: 3px; background: rgba(255,255,255,.08); border-radius: 99px; margin-bottom: 36px; overflow: hidden; }
  .progress-bar-fill { height: 100%; background: var(--brand-600); border-radius: 99px; transition: width .4s ease; }

  /* ---- step counter nav ---- */
  .step-counter { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); }

  /* ---- reassurance box ---- */
  .reassure {
    display: flex; gap: 14px; align-items: flex-start;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 32px;
  }
  .reassure-icon { font-size: 22px; flex-shrink: 0; line-height: 1.3; }
  .reassure p { font-size: 14.5px; color: var(--ink-300); line-height: 1.55; }
  .reassure strong { color: var(--paper); }

  @media (max-width: 540px) {
    .check-grid { grid-template-columns: 1fr; }
  }