/* ════════════════════════════════════════════════════════════════════
   site-v11.css — sections added in v11 (company-brain narrative mock)
   Vocabulary: white cards · 1px #E4E4E7 · radius 12px · Lucide inline
   ═══════════════════════════════════════════════════════════════════ */

/* ---- definition trios (missing layer · artifact-not-answer) ---- */
.def-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.def-card { border: 1px solid #E4E4E7; border-radius: 12px; background: #fff; padding: 26px 24px 28px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.def-card:hover { border-color: #C9D8F5; box-shadow: 0 12px 28px -18px rgba(15,23,42,0.22); transform: translateY(-2px); }
.def-ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: #EFF6FF; color: #006ADF; margin-bottom: 16px; }
.def-ic svg { width: 20px; height: 20px; }
.def-card b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: #0B1220; margin-bottom: 8px; }
.def-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #52525B; }

/* ---- product section (early product moment) ---- */
.s-product .ps-pills { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 36px; }
.s-product .ps-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #E4E4E7; border-radius: 999px; background: #fff; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: #0B1220; }
.s-product .ps-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-500); flex: none; }
.s-product .ps-pill i.c2 { background: #14B8A6; }
.s-product .ps-pill i.c3 { background: #F59E0B; }
.s-product .ps-pill i.c4 { background: #8B5CF6; }

/* ---- trust moment ---- */
.tr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 960px; }
.tr-card { border-radius: 12px; padding: 26px 26px 24px; }
.tr-card.bad { background: #FEF7F6; border: 1px solid #F4DCDA; }
.tr-card.good { background: #F3FBF7; border: 1px solid #CDEBDC; }
.tr-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }
.tr-card.bad .tr-tag { color: #B3413A; }
.tr-card.good .tr-tag { color: #10794A; }
.tr-tag svg { width: 15px; height: 15px; }
.tr-quote { margin: 0 0 14px; font-size: 17px; line-height: 1.55; color: #0B1220; text-wrap: pretty; }
.tr-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: #71717A; }
.cite { display: inline-block; border-radius: 6px; background: #EFF6FF; color: #0050B0; padding: 0 6px; font-size: 12px; font-weight: 700; font-family: var(--font-mono); vertical-align: 1px; }

/* ---- reusable memory · 4-step loop ---- */
.mem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mem { position: relative; padding-top: 26px; border-top: 2px solid #E4E4E7; transition: border-color .15s ease; }
.mem:hover { border-top-color: #2684FF; }
.mem .num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: #2684FF; letter-spacing: 0.04em; }
.mem h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: #0B1220; margin: 12px 0 8px; }
.mem p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #52525B; }
.mem-foot { margin-top: 34px; display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: #0B1220; }
.mem-foot svg { width: 16px; height: 16px; color: #2684FF; }

/* ---- governed skills ---- */
.sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sk-card { border: 1px solid #E4E4E7; border-radius: 12px; background: #fff; padding: 28px 26px; }
.sk-card .def-ic { margin-bottom: 18px; }
.sk-card h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: #0B1220; margin: 0 0 10px; }
.sk-card p { margin: 0; font-size: 15px; line-height: 1.6; color: #52525B; }

/* ---- positioning · 3 columns ---- */
.pos3 { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 16px; align-items: stretch; }
.pos3 .col { border: 1px solid #E4E4E7; border-radius: 12px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.pos3 .col-h { padding: 18px 22px; border-bottom: 1px solid #EEF0F4; font-size: 15px; font-weight: 600; color: #52525B; background: #FAFAFB; display: flex; align-items: center; gap: 9px; }
.pos3 .col.nama { border-color: #BFD9FF; background: #FBFDFF; box-shadow: 0 20px 44px -30px rgba(38,132,255,0.5); }
.pos3 .col.nama .col-h { color: #0B1220; background: #F3F8FF; border-bottom-color: #E3EEFF; }
.pos3 .col-h .mk { width: 20px; height: 20px; border-radius: 999px; background: var(--brand-500); color: #fff; display: grid; place-items: center; flex: none; }
.pos3 .col-h .mk svg { width: 12px; height: 12px; }
.pos3 .row { display: flex; align-items: flex-start; gap: 10px; padding: 15px 22px; font-size: 14.5px; line-height: 1.5; color: #52525B; border-bottom: 1px solid #F2F3F6; }
.pos3 .col.nama .row { color: #1F2A3D; border-bottom-color: #EAF1FB; }
.pos3 .row:last-child { border-bottom: 0; }
.pos3 .row svg { width: 15px; height: 15px; flex: none; margin-top: 2.5px; }
.pos3 .row .x { color: #A1A1AA; }
.pos3 .row .ck { color: #16A34A; }
.pos3-note { margin-top: 22px; font-size: 14px; color: #71717A; }

/* ---- use cases · 6 cards ---- */
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.uc { border: 1px solid #E4E4E7; border-radius: 12px; background: #fff; padding: 26px 24px 22px; display: flex; flex-direction: column; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.uc:hover { border-color: #C9D8F5; box-shadow: 0 12px 28px -18px rgba(15,23,42,0.22); transform: translateY(-2px); }
.uc .eyeb { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #006ADF; margin-bottom: 14px; }
.uc h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: #0B1220; margin: 0 0 10px; }
.uc > p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: #52525B; }
.uc ul { margin: 0; padding-left: 17px; font-size: 13.5px; line-height: 1.5; color: #52525B; display: flex; flex-direction: column; gap: 7px; }
.uc .buyer { margin-top: auto; padding-top: 16px; border-top: 1px solid #EEF0F4; font-size: 13px; font-weight: 600; color: #0B1220; }
.uc .buyer span { color: #9CA1AB; font-weight: 600; }
.uc ul + .buyer { margin-top: 18px; }

@media (max-width: 1100px) {
  .uc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .def-grid, .tr-grid, .sk-grid, .pos3, .uc-grid { grid-template-columns: 1fr; }
  .mem-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
}
@media (max-width: 560px) {
  .mem-grid { grid-template-columns: 1fr; }
}