/* ai (v4, h1): For AI assistants, Bento (from v2) in the v4 style. No section background here (k1 owns it),
   cards without borders (G8), one calm inner surface, colour only as small accents (G9). */
.ai-mk { display: inline-block; width: 20px; height: 20px; flex: none; background: var(--c, #1B1713);
  -webkit-mask: var(--u) center / contain no-repeat; mask: var(--u) center / contain no-repeat; }
.ai-mk.xs { width: 13px; height: 13px; }
.ai-mk.sm { width: 16px; height: 16px; }
.ai-ic { width: 20px; height: 20px; flex: none; }

.ai-head { max-width: 860px; margin: 0 auto; text-align: center; }
.ai-lead { margin: 20px auto 0; max-width: 660px; }

/* assistant logos */
.ai-logos { margin-top: 40px; text-align: center; }
.ai-logos-t { margin: 0 0 14px; font: 500 14px/1.4 var(--font); color: var(--muted); }
.ai-logos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ai-logos li { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 16px; border-radius: var(--r-pill);
  background: var(--sheet); box-shadow: var(--shadow-card); font: 600 15.5px/1 var(--font); letter-spacing: -0.015em; }
.ai-logos li .ai-mk { width: 21px; height: 21px; }

/* bento */
.ai-bento { margin-top: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.ai-tile { grid-column: span 6; display: flex; flex-direction: column; padding: 10px; border-radius: 22px; background: var(--sheet);
  box-shadow: var(--shadow-card); overflow: hidden; }
.ai-tile.t-lang, .ai-tile.t-inbox { grid-column: span 7; }
.ai-tile.t-act, .ai-tile.t-pub { grid-column: span 5; }
.ai-tile-vis { flex: 1; min-height: 248px; padding: 26px; border-radius: 15px; background: #FAF7F3; display: flex; align-items: center; justify-content: center; }
.ai-tile-vis > * { width: 100%; max-width: 460px; }
.ai-tile-t { padding: 18px 14px 12px; }
.ai-tile-t b { display: block; font: 600 19px/1.25 var(--font); letter-spacing: -0.02em; }
.ai-tile-t p { margin: 6px 0 0; font: 400 15px/1.5 var(--font); color: var(--ink-2); }

/* tile 1: JSON + bars */
.ai-lang-vis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; max-width: 560px !important; }
.ai-json { padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(27, 23, 19, .05), 0 10px 24px -16px rgba(60, 30, 10, .2);
  font: 500 13px/1.75 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; min-height: 214px; }
.ai-json p { margin: 0; white-space: nowrap; }
.ai-json .i { padding-left: 14px; }
.ai-json s { text-decoration: none; color: #8A5A2B; }
.ai-json u { text-decoration: none; color: #2F7A55; }
.ai-bars { display: grid; gap: 16px; padding: 18px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(27, 23, 19, .05), 0 10px 24px -16px rgba(60, 30, 10, .2); }
.ai-bar-l { display: flex; flex-direction: column; gap: 4px; font: 500 13px/1.3 var(--font); color: var(--muted); }
.ai-bar-l b { font: 600 15px/1.2 var(--font); color: var(--ink); }
.ai-bar-track { margin-top: 8px; height: 8px; border-radius: 99px; background: #F1ECE6; overflow: hidden; }
.ai-bar-fill { display: block; height: 100%; border-radius: 99px; transform-origin: left; }
.ai-bar-fill.long { width: 100%; background: #DDD2C6; }
.ai-bar-fill.short { width: 4%; min-width: 10px; background: linear-gradient(90deg, #F7B7A0, #F5A9CB); }

/* tile 2: outcomes */
.ai-outs { display: grid; gap: 10px; }
.ai-out { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(27, 23, 19, .05), 0 10px 24px -16px rgba(60, 30, 10, .2); }
.ai-out-mk { width: 34px; height: 34px; border-radius: 10px; background: #F6F2ED; display: grid; place-items: center; flex: none; }
.ai-out-mk .ai-mk { width: 18px; height: 18px; }
.ai-out div { min-width: 0; flex: 1; }
.ai-out b { display: block; font: 600 15px/1.2 var(--font); letter-spacing: -0.01em; }
.ai-out small { display: block; margin-top: 3px; font: 400 12.5px/1.2 var(--font); color: var(--muted); }
.ai-chip { flex: none; height: 26px; padding: 0 11px; display: inline-flex; align-items: center; border-radius: var(--r-pill); font: 600 12.5px/1 var(--font); }
.ai-chip--ok { background: #E6F4EA; color: #2E6B48; }
.ai-chip--ai { background: #EEEAFD; color: #4F4290; }

/* tile 3: public vs private */
.ai-pub { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; background: #fff; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(27, 23, 19, .05), 0 10px 24px -16px rgba(60, 30, 10, .2); }
.ai-pub li { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: 10px; font: 500 14px/1.3 var(--font); }
.ai-pub li .ai-ic { width: 17px; height: 17px; color: #2E6B48; }
.ai-pub li em { margin-left: auto; font: 600 12px/1 var(--font); font-style: normal; color: #2E6B48; }
.ai-pub li.priv { color: var(--muted); }
.ai-pub li.priv .ai-ic, .ai-pub li.priv em { color: var(--muted); }
.ai-pub li.priv span { text-decoration: line-through; text-decoration-color: var(--faint); }

/* tile 4: inbox */
.ai-inbox { list-style: none; margin: 0; padding: 6px 8px; display: grid; background: #fff; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(27, 23, 19, .05), 0 10px 24px -16px rgba(60, 30, 10, .2); }
.ai-inbox li { display: flex; align-items: center; gap: 12px; padding: 12px 8px; }
.ai-inbox li + li { box-shadow: 0 -1px 0 #F1ECE6; }
.ai-inbox-av { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; flex: none; background: var(--soft); }
.ai-inbox li > div { min-width: 0; flex: 1; }
.ai-inbox b { display: block; font: 600 14px/1.2 var(--font); }
.ai-inbox small { display: block; font: 400 12.5px/1.3 var(--font); color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-inbox-r { flex: none !important; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.ai-via { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px; background: #F6F2ED;
  font: 600 12px/1 var(--font); white-space: nowrap; }

/* "Talk to this site through your own AI": the noticeable action of the block (moved from the hero) */
.ai-try { margin: 36px auto 0; max-width: 860px; display: flex; align-items: center; gap: 16px; padding: 14px 14px 14px 18px; border-radius: 22px;
  background: var(--sheet); box-shadow: var(--shadow-card); }
.ai-try-logos { display: inline-flex; flex: none; }
.ai-try-lg { width: 36px; height: 36px; border-radius: 50%; background: #F6F2ED; box-shadow: 0 0 0 3px #fff; display: grid; place-items: center; }
.ai-try-lg + .ai-try-lg { margin-left: -8px; }
.ai-try-t { flex: 1; min-width: 0; }
.ai-try-t b { display: block; font: 600 17px/1.25 var(--font); letter-spacing: -0.015em; }
.ai-try-t p { margin: 3px 0 0; font: 400 14px/1.4 var(--font); color: var(--muted); }
.ai-try-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font: 600 14.5px/1 var(--font); cursor: pointer; white-space: nowrap; flex: none; transition: background-color .2s; }
.ai-try-btn:hover { background: #2E2721; }
.ai-try-btn .ai-ic { width: 17px; height: 17px; }
.ai-try-btn.is-done { background: #E6F4EA; color: #2E6B48; }

/* motion: JSON lines load, then bars, outcomes, lists */
.ai-bento .ai-json p { opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease), transform .35s var(--ease); transition-delay: calc(.2s + var(--k) * .22s); }
.ai-bento .ai-bar-fill { transform: scaleX(0); transition: transform 1.1s var(--ease); transition-delay: 1.9s; }
.ai-bento .ai-bar-fill.short { transition-delay: 2.5s; }
.ai-bento .ai-out, .ai-bento .ai-inbox li, .ai-bento .ai-pub li { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ai-bento .ai-out { transition-delay: calc(1.2s + var(--d) * .35s); }
.ai-bento .ai-pub li { transition-delay: calc(.6s + var(--d) * .15s); }
.ai-bento .ai-inbox li { transition-delay: calc(1.8s + var(--d) * .3s); }
.ai-bento.play .ai-json p, .ai-bento.play .ai-out, .ai-bento.play .ai-inbox li, .ai-bento.play .ai-pub li, .ai-bento.play .ai-bar-fill { opacity: 1; transform: none; }
.ai-bento.static * { transition: none !important; }

/* responsive */
@media (max-width: 1024px) {
  .ai-tile.t-lang, .ai-tile.t-act, .ai-tile.t-pub, .ai-tile.t-inbox { grid-column: span 12; }
}
@media (max-width: 640px) {
  .ai .wrap { padding: 0 16px; }
  .ai-logos li { height: 40px; padding: 0 14px 0 12px; font-size: 14px; }
  .ai-logos li .ai-mk { width: 18px; height: 18px; }
  .ai-bento { margin-top: 32px; gap: 14px; }
  .ai-tile-vis { padding: 16px; min-height: 0; }
  .ai-lang-vis { grid-template-columns: 1fr; }
  .ai-json { min-height: 0; }
  .ai-tile-t b { font-size: 17.5px; }
  .ai-tile-t p { font-size: 14.5px; }
  .ai-inbox-r small { display: none; }
  .ai-via { font-size: 0; gap: 0; width: 28px; height: 28px; padding: 0; justify-content: center; }
  .ai-via .ai-mk { width: 14px; height: 14px; }
  .ai-try { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .ai-try-t { flex-basis: calc(100% - 100px); }
  .ai-try-btn { width: 100%; justify-content: center; }
}