/* nonolingo blog visuals, on the cocoa system (ink ground, paper text, accent #D4956A).
 * Every animation has a static end state for prefers-reduced-motion. */

.prose .lede { font-size: 19px; color: rgba(255,255,255,.72); }
.prose blockquote {
  margin: 18px 0 22px; padding: 14px 18px; border: 0; border-radius: 18px 18px 18px 4px;
  background: rgba(255,255,255,.07); max-width: 560px;
}
.prose blockquote p { margin: 0; color: #fff; font-size: 16px; }

/* ── hero: an animated nonolingo popup over a chat ─────────────────────── */
.bx-hero {
  position: relative; margin: 28px 0 40px; padding: 18px; border-radius: 22px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(212,149,106,.16), transparent 55%), rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09); overflow: hidden;
}
.bx-win { border-radius: 14px; background: #121212; border: 1px solid rgba(255,255,255,.08); }
.bx-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.bx-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); display: inline-block; }
.bx-bar span { margin-left: 8px; font: 500 12px/1 "Geist Mono", ui-monospace, monospace; color: rgba(255,255,255,.45); }
.bx-body { padding: 16px 16px 18px; position: relative; }
.bx-them { font-size: 14px; color: rgba(255,255,255,.55); margin-bottom: 14px; }
.bx-them b { color: rgba(255,255,255,.8); font-weight: 500; }
.bx-input { position: relative; display: grid; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 15.5px; line-height: 1.45; }
.bx-input .d, .bx-input .n { display: block; grid-area: 1 / 1; }
.bx-input .d { color: rgba(255,255,255,.85); position: relative; width: fit-content; max-width: 100%; }
.bx-input .d::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; border-radius: 2px;
  background: #D4956A; transform-origin: left center; transform: scaleX(0);
  animation: bx-strike 8s cubic-bezier(.22,.8,.32,1) infinite;
}
.bx-input .n { color: #fff; opacity: 0; animation: bx-swap-in 8s ease infinite; }
.bx-input .d { animation: bx-swap-out 8s ease infinite; }
.bx-pop {
  position: relative; margin-top: 12px; padding: 10px 12px; border-radius: 14px;
  background: rgba(28,28,28,.96); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 40px -20px rgba(0,0,0,.9);
  transform: translateY(20px); opacity: 0; animation: bx-pop 8s cubic-bezier(.2,.9,.3,1.2) infinite;
}
.bx-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 9px; font-size: 14px; color: rgba(255,255,255,.9); }
.bx-row.on { background: rgba(212,149,106,.16); }
.bx-row em { font: 500 11px/1 "Geist Mono", ui-monospace, monospace; font-style: normal; color: #D4956A; min-width: 46px; }
.bx-row kbd { margin-left: auto; animation: bx-key 8s ease infinite; }
.bx-cap { margin-top: 12px; font: 500 12px/1.4 "Geist Mono", ui-monospace, monospace; color: rgba(255,255,255,.45); }
@keyframes bx-strike { 0%,18% { transform: scaleX(0); } 28%,62% { transform: scaleX(1); } 70%,100% { transform: scaleX(1); } }
@keyframes bx-pop { 0%,24% { opacity: 0; transform: translateY(20px); } 32%,60% { opacity: 1; transform: translateY(0); } 68%,100% { opacity: 0; transform: translateY(12px); } }
@keyframes bx-key { 0%,44% { background: rgba(255,255,255,.08); } 50%,56% { background: #D4956A; color: #0A0A0A; } 62%,100% { background: rgba(255,255,255,.08); } }
@keyframes bx-swap-out { 0%,62% { opacity: 1; } 68%,96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bx-swap-in { 0%,62% { opacity: 0; } 68%,94% { opacity: 1; } 100% { opacity: 0; } }

/* ── swap cards: before → after, red pen draws when scrolled into view ─── */
.bx-swaps { list-style: none; margin: 18px 0 26px !important; padding: 0; display: grid; gap: 12px; }
.bx-swap {
  margin: 0 !important; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center;
}
.bx-swap .b { position: relative; color: rgba(255,255,255,.5); font-size: 15px; width: fit-content; }
.bx-swap .b::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px; border-radius: 2px; background: #D4956A;
  transform: scaleX(0); transform-origin: left center; transition: transform .6s cubic-bezier(.22,.8,.32,1);
}
.bx-swap .arr { color: #D4956A; font-size: 18px; opacity: .3; transition: opacity .4s ease .35s; }
.bx-swap .a { color: #fff; font-weight: 500; font-size: 15.5px; opacity: 0; transform: translateY(6px); transition: opacity .5s ease .45s, transform .5s ease .45s; }
.bx-swap .why { grid-column: 1 / -1; font: 500 12px/1.4 "Geist Mono", ui-monospace, monospace; color: rgba(255,255,255,.42); margin-top: -4px; }
.bx-swap.in .b::after { transform: scaleX(1); }
.bx-swap.in .arr { opacity: 1; }
.bx-swap.in .a { opacity: 1; transform: none; }
@media (max-width: 640px) {
  .bx-swap { grid-template-columns: 1fr; gap: 6px; }
  .bx-swap .arr { transform: rotate(90deg); width: fit-content; }
}

/* ── real recording ─────────────────────────────────────────────────── */
.bx-clip { margin: 30px 0 34px; }
.bx-clip video { width: 100%; height: auto; display: block; border-radius: 16px; border: 1px solid rgba(255,255,255,.09); background: #111; }
.bx-clip figcaption { margin-top: 10px; font: 500 12px/1.4 "Geist Mono", ui-monospace, monospace; color: rgba(255,255,255,.45); }
.bx-clip figcaption b { color: #D4956A; font-weight: 500; }

/* ── workflow steps: the usual way vs in the box ────────────────────── */
.bx-steps { margin: 26px 0 32px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.bx-lane + .bx-lane { margin-top: 16px; }
.bx-lane .lbl { display: flex; justify-content: space-between; font: 500 12px/1 "Geist Mono", ui-monospace, monospace; color: rgba(255,255,255,.5); margin-bottom: 10px; }
.bx-lane .lbl b { color: #fff; font-weight: 500; }
.bx-lane.us .lbl b { color: #D4956A; }
.bx-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.bx-pills span {
  padding: 6px 11px; border-radius: 999px; font-size: 13px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.35);
  transition: background .3s ease, color .3s ease;
}
.bx-steps.in .bx-pills span { color: rgba(255,255,255,.85); background: rgba(255,255,255,.1); }
.bx-steps.in .us .bx-pills span { background: rgba(212,149,106,.2); color: #fff; }

/* ── comparison table ───────────────────────────────────────────────── */
.bx-table-wrap { margin: 22px 0 30px; overflow-x: auto; border-radius: 16px; border: 1px solid rgba(255,255,255,.09); }
.bx-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.bx-table th, .bx-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: top; }
.bx-table th { font: 500 12px/1.3 "Geist Mono", ui-monospace, monospace; color: rgba(255,255,255,.5); background: rgba(255,255,255,.03); }
.bx-table th.us { color: #D4956A; }
.bx-table td { color: rgba(255,255,255,.8); }
.bx-table td:first-child { color: rgba(255,255,255,.55); }
.bx-table tr:last-child td { border-bottom: 0; }
.bx-y { color: #D4956A; } .bx-n { color: rgba(255,255,255,.35); }

/* ── verdict cards ──────────────────────────────────────────────────── */
.bx-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 28px; }
.bx-pick > div { padding: 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.bx-pick > div.us { border-color: rgba(212,149,106,.45); background: rgba(212,149,106,.08); }
.bx-pick h3 { margin: 0 0 8px !important; font-size: 15px; }
.bx-pick ul { margin: 0 0 0 18px !important; }
.bx-pick li { font-size: 14.5px; }
@media (max-width: 640px) { .bx-pick { grid-template-columns: 1fr; } }

.bx-src { font-size: 13.5px; color: rgba(255,255,255,.45); }
.bx-src a { color: rgba(255,255,255,.65) !important; }

/* ── blog index cards ───────────────────────────────────────────────── */
.bx-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 22px; }
.bx-filter button { font: 500 13px var(--font-body, inherit); padding: 7px 14px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255,255,255,.07); color: rgba(255,255,255,.75); }
.bx-filter button.on { background: #fff; color: #0A0A0A; }
.bx-cards { list-style: none; margin: 0 !important; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.bx-cards li { margin: 0 !important; }
.bx-card { display: flex; flex-direction: column; height: 100%; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); text-decoration: none !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; transition: transform .2s ease, border-color .2s ease; }
.bx-card:hover { transform: translateY(-2px); border-color: rgba(212,149,106,.45) !important; }
.bx-card .k { font: 500 11px/1 "Geist Mono", ui-monospace, monospace; color: #D4956A; margin-bottom: 12px; }
.bx-card .t { color: #fff; font-weight: 600; font-size: 16.5px; line-height: 1.3; margin-bottom: 10px; }
.bx-card .mini { margin-top: auto; padding-top: 12px; font-size: 13px; line-height: 1.4; }
.bx-card .mini s { color: rgba(255,255,255,.42); text-decoration-color: #D4956A; text-decoration-thickness: 2px; }
.bx-card .mini span { display: block; color: rgba(255,255,255,.88); margin-top: 3px; }

@media (prefers-reduced-motion: reduce) {
  .bx-input .d::after { animation: none; transform: scaleX(1); }
  .bx-input .d { animation: none; opacity: .5; }
  .bx-input .n { animation: none; opacity: 0; }
  .bx-pop { animation: none; opacity: 1; transform: none; }
  .bx-row kbd { animation: none; }
  .bx-swap .b::after { transform: scaleX(1); transition: none; }
  .bx-swap .a { opacity: 1; transform: none; transition: none; }
  .bx-swap .arr { opacity: 1; }
  .bx-card { transition: none; }
}