/* ============================================================
   Styles specific to the AI visual inspection solution page (presence/absence inspection / appearance inspection)
   Namespace: .sy-page .aisol   Brand primary #ed6a18
   Applies to this solution page only, other pages are unaffected
   ============================================================ */

.sy-page .aisol{
  background:#fff;
}

.sy-page .aisol .ai-sec{
  padding:72px 0;
}

.sy-page .aisol .ai-sec-gray{
  background:#f7f8fa;
}

.sy-page .aisol .ai-sec-dark{
  background:linear-gradient(120deg,#232323 0%,#111 100%);
  color:#fff;
}

/* ---------- Section heading ---------- */
.sy-page .aisol .ai-shead{
  text-align:center;
  margin-bottom:44px;
}

.sy-page .aisol .ai-shead h2{
  font-size:32px;
  font-weight:800;
  letter-spacing:2px;
  color:#1a1a1a;
}

.sy-page .aisol .ai-shead h2 span{
  color:var(--sany-red);
}

.sy-page .aisol .ai-shead p{
  margin-top:12px;
  color:#666;
  font-size:15px;
  line-height:1.8;
}

.sy-page .aisol .ai-shead::after{
  content:"";
  display:block;
  width:48px;
  height:4px;
  background:var(--sany-red);
  margin:18px auto 0;
}

.sy-page .aisol .ai-sec-dark .ai-shead h2{
  color:#fff;
}

.sy-page .aisol .ai-sec-dark .ai-shead p{
  color:#bbb;
}

/* ---------- Body copy ---------- */
.sy-page .aisol p{
  font-size:15px;
  line-height:1.95;
  color:#555;
}

.sy-page .aisol p + p{
  margin-top:14px;
}

.sy-page .aisol .ai-lead{
  font-size:16px;
  color:#444;
}

.sy-page .aisol strong{
  color:#1a1a1a;
  font-weight:700;
}

/* ---------- Two-column / multi-column grid ---------- */
.sy-page .aisol .ai-grid-2{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px;
  align-items:center;
}

.sy-page .aisol .ai-grid-2.ai-top{
  align-items:start;
}

.sy-page .aisol .ai-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.sy-page .aisol .ai-grid-4{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}

.sy-page .aisol .ai-grid-5{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:20px;
}

/* ---------- Images ---------- */
.sy-page .aisol .ai-figure{
  margin:0;
}

.sy-page .aisol .ai-figure img{
  width:100%;
  display:block;
  border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
  background:#fff;
}

.sy-page .aisol .ai-figure figcaption{
  margin-top:12px;
  font-size:13px;
  color:#888;
  text-align:center;
  line-height:1.7;
}

.sy-page .aisol .ai-figure.ai-plain img{
  box-shadow:none;
  border:1px solid #ececec;
}

.sy-page .aisol .ai-figure-wide{
  margin-top:44px;
}

.sy-page .aisol .ai-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:36px;
}

.sy-page .aisol .ai-gallery .ai-figure img{
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* ---------- Cards ---------- */
.sy-page .aisol .ai-card{
  background:#fff;
  border:1px solid #ececec;
  border-radius:6px;
  padding:28px 24px;
  transition:.25s;
  position:relative;
}

.sy-page .aisol .ai-card:hover{
  border-color:var(--sany-red);
  box-shadow:0 12px 28px rgba(237,106,24,.12);
  transform:translateY(-3px);
}

.sy-page .aisol .ai-card h4{
  font-size:17px;
  font-weight:700;
  color:#1a1a1a;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
}

.sy-page .aisol .ai-card h4 i{
  font-style:normal;
  color:var(--sany-red);
}

.sy-page .aisol .ai-card p{
  font-size:14px;
  line-height:1.9;
  color:#666;
}

.sy-page .aisol .ai-card .ai-no{
  position:absolute;
  top:18px;
  right:20px;
  font-size:26px;
  font-weight:800;
  color:#f0f0f0;
  letter-spacing:-1px;
}

/* Cards inside a dark section */
.sy-page .aisol .ai-sec-dark .ai-card{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
}

.sy-page .aisol .ai-sec-dark .ai-card h4{
  color:#fff;
}

.sy-page .aisol .ai-sec-dark .ai-card p{
  color:#b5b5b5;
}

/* ---------- Key points list ---------- */
.sy-page .aisol .ai-list{
  margin-top:18px;
}

.sy-page .aisol .ai-list li{
  position:relative;
  padding-left:22px;
  margin-bottom:12px;
  font-size:15px;
  line-height:1.9;
  color:#555;
}

.sy-page .aisol .ai-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--sany-red);
}

.sy-page .aisol .ai-list li b{
  color:#1a1a1a;
}

/* ---------- Tag pills ---------- */
.sy-page .aisol .ai-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.sy-page .aisol .ai-chips span{
  display:inline-block;
  padding:7px 16px;
  font-size:13px;
  color:var(--sany-red);
  background:#fff5ee;
  border:1px solid #ffd9c0;
  border-radius:999px;
}

.sy-page .aisol .ai-sec-dark .ai-chips span{
  background:rgba(237,106,24,.12);
  border-color:rgba(237,106,24,.35);
  color:#ffb27a;
}

/* ---------- Pain point / solution comparison ---------- */
.sy-page .aisol .ai-cmp{
  display:grid;
  grid-template-columns:minmax(0,1fr) 1.15fr;
  gap:24px;
  align-items:stretch;
}

.sy-page .aisol .ai-cmp-col{
  border-radius:6px;
  padding:30px 26px;
}

.sy-page .aisol .ai-cmp-pain{
  background:#fff;
  border:1px solid #ececec;
}

.sy-page .aisol .ai-cmp-gain{
  background:linear-gradient(140deg,#2a2a2a,#111);
  color:#fff;
}

.sy-page .aisol .ai-cmp-col > h4{
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
}

.sy-page .aisol .ai-cmp-col > .ai-cmp-sub{
  font-size:13px;
  color:#999;
  margin-bottom:20px;
}

.sy-page .aisol .ai-cmp-pain h4{ color:#1a1a1a; }
.sy-page .aisol .ai-cmp-gain h4{ color:#fff; }

.sy-page .aisol .ai-cmp-item{
  padding:16px 0;
  border-top:1px dashed #e8e8e8;
}

.sy-page .aisol .ai-cmp-gain .ai-cmp-item{
  border-top-color:rgba(255,255,255,.12);
}

.sy-page .aisol .ai-cmp-item:first-of-type{
  border-top:none;
  padding-top:0;
}

.sy-page .aisol .ai-cmp-item h5{
  font-size:15px;
  font-weight:700;
  margin-bottom:6px;
  color:#1a1a1a;
}

.sy-page .aisol .ai-cmp-gain .ai-cmp-item h5{
  color:#ffb27a;
}

.sy-page .aisol .ai-cmp-item p{
  font-size:14px;
  line-height:1.85;
}

.sy-page .aisol .ai-cmp-gain .ai-cmp-item p{
  color:#c3c3c3;
}

.sy-page .aisol .ai-cmp-gain .ai-cmp-item p b{
  color:#fff;
}

/* ---------- Blockquote ---------- */
.sy-page .aisol .ai-quote{
  margin-top:36px;
  padding:24px 28px;
  background:#fff5ee;
  border-left:4px solid var(--sany-red);
  font-size:16px;
  color:#a4500f;
  line-height:1.9;
  border-radius:0 6px 6px 0;
}

.sy-page .aisol .ai-sec-dark .ai-quote{
  background:rgba(237,106,24,.10);
  color:#ffbb8a;
}

/* ---------- Steps ---------- */
.sy-page .aisol .ai-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.sy-page .aisol .ai-step{
  background:#fff;
  border:1px solid #ececec;
  border-radius:6px;
  padding:28px 24px;
  position:relative;
}

.sy-page .aisol .ai-step .ai-step-no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--sany-red);
  color:#fff;
  font-size:16px;
  font-weight:800;
  margin-bottom:16px;
}

.sy-page .aisol .ai-step h4{
  font-size:17px;
  font-weight:700;
  margin-bottom:10px;
  color:#1a1a1a;
}

.sy-page .aisol .ai-step p{
  font-size:14px;
  line-height:1.9;
}

/* ---------- Core algorithm blocks ---------- */
.sy-page .aisol .ai-algo{
  background:#fff;
  border:1px solid #ececec;
  border-radius:8px;
  padding:36px 34px;
  margin-bottom:28px;
}

.sy-page .aisol .ai-algo:last-child{
  margin-bottom:0;
}

.sy-page .aisol .ai-algo-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
  padding-bottom:18px;
  border-bottom:1px solid #f0f0f0;
}

.sy-page .aisol .ai-algo-head .ai-algo-no{
  font-size:30px;
  font-weight:800;
  color:var(--sany-red);
  line-height:1;
  letter-spacing:-1px;
}

.sy-page .aisol .ai-algo-head h3{
  font-size:21px;
  font-weight:800;
  color:#1a1a1a;
  letter-spacing:1px;
}

.sy-page .aisol .ai-algo-head h3 small{
  display:block;
  font-size:13px;
  font-weight:400;
  color:#999;
  letter-spacing:0;
  margin-top:6px;
}

.sy-page .aisol .ai-algo-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 1.05fr;
  gap:34px;
  align-items:center;
}

.sy-page .aisol .ai-algo-body.ai-rev{
  grid-template-columns:1.05fr minmax(0,1fr);
}

.sy-page .aisol .ai-algo-body.ai-rev .ai-figure{
  order:2;
}

/* ---------- Tables ---------- */
.sy-page .aisol .ai-tbl-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.sy-page .aisol table.ai-tbl{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  background:#fff;
  border:1px solid #ececec;
}

.sy-page .aisol table.ai-tbl caption{
  caption-side:top;
  text-align:left;
  font-size:13px;
  color:#999;
  padding-bottom:10px;
}

.sy-page .aisol table.ai-tbl th,
.sy-page .aisol table.ai-tbl td{
  border:1px solid #ececec;
  padding:13px 16px;
  line-height:1.7;
  color:#555;
  text-align:left;
  vertical-align:middle;
}

.sy-page .aisol table.ai-tbl thead th{
  background:#2b2b2b;
  color:#fff;
  font-weight:700;
  letter-spacing:.5px;
  white-space:nowrap;
}

.sy-page .aisol table.ai-tbl tbody th{
  background:#fafafa;
  color:#333;
  font-weight:600;
  white-space:nowrap;
  width:180px;
}

.sy-page .aisol table.ai-tbl tbody tr:nth-child(even) td{
  background:#fcfcfc;
}

.sy-page .aisol table.ai-tbl tbody tr:hover td{
  background:#fff8f3;
}

/* Pain point comparison table: traditional vs this solution */
.sy-page .aisol table.ai-tbl.ai-tbl-cmp thead th:first-child{
  background:#8a8a8a;
}

.sy-page .aisol table.ai-tbl.ai-tbl-cmp thead th:last-child{
  background:var(--sany-red);
}

.sy-page .aisol table.ai-tbl.ai-tbl-cmp tbody td:first-child{
  color:#8a8a8a;
}

.sy-page .aisol table.ai-tbl.ai-tbl-cmp tbody td:last-child{
  color:#1a1a1a;
  font-weight:600;
  background:#fff8f3;
}

.sy-page .aisol .ai-tbl-note{
  margin-top:12px;
  font-size:13px;
  color:#999;
}

/* ---------- HMI one-to-N mock interface ---------- */
.sy-page .aisol .ai-mock{
  background:linear-gradient(140deg,#262626,#111);
  border-radius:8px;
  padding:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.sy-page .aisol .ai-mock-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:14px;
  margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.sy-page .aisol .ai-mock-bar i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#ff5f57;
  font-style:normal;
}

.sy-page .aisol .ai-mock-bar i:nth-child(2){ background:#febc2e; }
.sy-page .aisol .ai-mock-bar i:nth-child(3){ background:#28c840; }

.sy-page .aisol .ai-mock-bar span{
  margin-left:8px;
  font-size:12px;
  color:#8f8f8f;
  letter-spacing:.5px;
}

.sy-page .aisol .ai-mock-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.sy-page .aisol .ai-mock-cell{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius:4px;
  padding:10px;
  min-height:82px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.sy-page .aisol .ai-mock-cell span{
  font-size:11px;
  color:#9a9a9a;
}

.sy-page .aisol .ai-mock-cell em{
  font-style:normal;
  font-size:12px;
  font-weight:700;
  color:#28c840;
}

.sy-page .aisol .ai-mock-cell em.ng{
  color:#ff5f57;
}

.sy-page .aisol .ai-mock-cell u{
  display:block;
  height:34px;
  border-radius:3px;
  background:
     repeating-linear-gradient(45deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 6px,rgba(255,255,255,.02) 6px,rgba(255,255,255,.02) 12px);
  border:1px dashed rgba(40,200,64,.45);
  text-decoration:none;
  margin-bottom:8px;
}

/* ---------- OK / NG badges ---------- */
.sy-page .aisol .ai-badge{
  display:inline-block;
  padding:4px 12px;
  border-radius:4px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
}

.sy-page .aisol .ai-badge.ok{
  background:#e8f8ec;
  color:#1f9d45;
  border:1px solid #bce8c8;
}

.sy-page .aisol .ai-badge.ng{
  background:#fdeceb;
  color:#d9382c;
  border:1px solid #f6c8c4;
}

/* ---------- Contact bar ---------- */
.sy-page .aisol .ai-cta{
  text-align:center;
}

.sy-page .aisol .ai-cta .ai-cta-actions{
  margin-top:28px;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

.sy-page .aisol .ai-cta .ai-cta-actions .btn{
  padding:14px 44px;
}

.sy-page .aisol .ai-cta p{
  color:#b5b5b5;
}

.sy-page .aisol .ai-cta h2{
  color:#fff;
}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .sy-page .aisol .ai-grid-5{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:992px){
  .sy-page .aisol .ai-grid-2,
  .sy-page .aisol .ai-algo-body,
  .sy-page .aisol .ai-algo-body.ai-rev{ grid-template-columns:minmax(0,1fr); }
  .sy-page .aisol .ai-algo-body.ai-rev .ai-figure{ order:0; }
  .sy-page .aisol .ai-grid-3,
  .sy-page .aisol .ai-grid-4,
  .sy-page .aisol .ai-grid-5{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sy-page .aisol .ai-steps{ grid-template-columns:minmax(0,1fr); }
  .sy-page .aisol .ai-gallery{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .sy-page .aisol .ai-cmp{ grid-template-columns:minmax(0,1fr); }
  .sy-page .aisol .ai-mock-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sy-page .aisol .ai-sec{ padding:52px 0; }
  .sy-page .aisol .ai-shead h2{ font-size:26px; }
}

@media (max-width:640px){
  .sy-page .aisol .ai-grid-3,
  .sy-page .aisol .ai-grid-4,
  .sy-page .aisol .ai-grid-5{ grid-template-columns:minmax(0,1fr); }
  .sy-page .aisol .ai-gallery{ grid-template-columns:minmax(0,1fr); }
  .sy-page .aisol .ai-algo{ padding:24px 18px; }
  .sy-page .aisol table.ai-tbl tbody th{ width:110px; }
}


/* ============================================================
   Extension section (2026-09-20)
   Positioning for industrial vision presence/absence inspection equipment: hero signal bar / inspection closed loop / inspection objects /
   OK-NG output interlocking / FAQ / sample submission fields / tag wall
   ============================================================ */

/* ---------- Hero signal bar (the hero sits outside .aisol, so the selectors hang off .sy-page) ---------- */
.sy-page .page-hero .ai-hero-line{
  margin-top:20px;
  font-size:14px;
  font-weight:600;
  color:#ffb27a;
  letter-spacing:1px;
}

.sy-page .page-hero .ai-hero-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
  max-width:920px;
}

.sy-page .page-hero .ai-hero-chips span{
  display:inline-block;
  padding:7px 16px;
  font-size:13px;
  border-radius:999px;
  color:#e6e6e6;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
}

.sy-page .page-hero .ai-hero-chips span.hot{
  color:#ffb27a;
  background:rgba(237,106,24,.16);
  border-color:rgba(237,106,24,.42);
  font-weight:700;
}

/* ---------- Inspection closed-loop flow ---------- */
.sy-page .aisol .ai-loop{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.sy-page .aisol .ai-loop > li{
  position:relative;
  background:#fff;
  border:1px solid #ececec;
  border-left:3px solid var(--sany-red);
  border-radius:6px;
  padding:20px 20px 18px;
  transition:.25s;
}

.sy-page .aisol .ai-loop > li:hover{
  box-shadow:0 10px 26px rgba(237,106,24,.12);
  transform:translateY(-2px);
}

.sy-page .aisol .ai-loop > li > i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#fff2e8;
  color:var(--sany-red);
  font-style:normal;
  font-size:13px;
  font-weight:800;
  margin-bottom:10px;
}

.sy-page .aisol .ai-loop > li > b{
  display:block;
  font-size:15px;
  color:#1a1a1a;
  margin-bottom:6px;
}

.sy-page .aisol .ai-loop > li > span{
  display:block;
  font-size:13px;
  color:#888;
  line-height:1.75;
}

.sy-page .aisol .ai-loop > li.is-key{
  background:#fff8f3;
  border-color:#ffd9c0;
}

/* ---------- What can be inspected (object grid) ---------- */
.sy-page .aisol .ai-objs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.sy-page .aisol .ai-obj{
  background:#fff;
  border:1px solid #ececec;
  border-radius:6px;
  padding:20px 18px;
  transition:.25s;
}

.sy-page .aisol .ai-obj:hover{
  border-color:var(--sany-red);
  box-shadow:0 10px 24px rgba(237,106,24,.10);
  transform:translateY(-3px);
}

.sy-page .aisol .ai-obj > i{
  font-style:normal;
  font-size:12px;
  font-weight:800;
  color:#dcdcdc;
  letter-spacing:1px;
}

.sy-page .aisol .ai-obj > b{
  display:block;
  font-size:15px;
  color:#1a1a1a;
  margin:8px 0 6px;
}

.sy-page .aisol .ai-obj > p{
  font-size:13px;
  line-height:1.75;
  color:#888;
}

/* ---------- OK / NG output and interlocking signal chain ---------- */
.sy-page .aisol .ai-signal{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:22px;
  align-items:center;
  background:#fff;
  border:1px solid #ececec;
  border-radius:8px;
  padding:26px 28px;
  margin-top:32px;
}

.sy-page .aisol .ai-signal .sg-box{
  text-align:center;
  padding:14px 20px;
  border-radius:6px;
  background:#f7f8fa;
  border:1px solid #e8e8e8;
  min-width:132px;
}

.sy-page .aisol .ai-signal .sg-box > b{
  display:block;
  font-size:20px;
  font-weight:800;
  letter-spacing:1px;
}

.sy-page .aisol .ai-signal .sg-box.ok > b{ color:#1f9d45; }
.sy-page .aisol .ai-signal .sg-box.ng > b{ color:#d9382c; }

.sy-page .aisol .ai-signal .sg-box > span{
  display:block;
  font-size:12px;
  color:#999;
  margin-top:4px;
  line-height:1.6;
}

.sy-page .aisol .ai-signal .sg-mid{
  text-align:center;
  font-size:14px;
  color:#666;
  line-height:1.8;
}

.sy-page .aisol .ai-signal .sg-proto{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:12px;
}

.sy-page .aisol .ai-signal .sg-proto span{
  padding:5px 12px;
  font-size:12px;
  border-radius:4px;
  background:#fff2e8;
  border:1px solid #ffd9c0;
  color:#a4500f;
}

/* ---------- FAQ ---------- */
.sy-page .aisol .ai-faq{
  max-width:920px;
  margin:0 auto;
}

.sy-page .aisol .ai-faq details{
  background:#fff;
  border:1px solid #ececec;
  border-radius:6px;
  margin-bottom:12px;
  overflow:hidden;
}

.sy-page .aisol .ai-faq details[open]{
  border-color:#ffd9c0;
  box-shadow:0 8px 22px rgba(237,106,24,.08);
}

.sy-page .aisol .ai-faq summary{
  cursor:pointer;
  padding:18px 54px 18px 22px;
  font-size:15px;
  font-weight:700;
  color:#1a1a1a;
  position:relative;
  list-style:none;
}

.sy-page .aisol .ai-faq summary::-webkit-details-marker{ display:none; }
.sy-page .aisol .ai-faq summary::marker{ content:""; }

.sy-page .aisol .ai-faq summary::after{
  content:"+";
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  font-size:20px;
  font-weight:400;
  color:var(--sany-red);
  line-height:1;
}

.sy-page .aisol .ai-faq details[open] summary::after{ content:"-"; }

.sy-page .aisol .ai-faq .fa-body{
  padding:16px 22px 20px;
  font-size:14px;
  line-height:1.9;
  color:#666;
  border-top:1px dashed #f0f0f0;
}

.sy-page .aisol .ai-faq .fa-body p + p{ margin-top:10px; }
.sy-page .aisol .ai-faq .fa-body b{ color:#1a1a1a; }

/* ---------- Sample submission fields ---------- */
.sy-page .aisol .ai-form-req{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:34px;
  text-align:left;
}

.sy-page .aisol .ai-form-req > div{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px;
  padding:14px 16px;
  font-size:13px;
  color:#c9c9c9;
  line-height:1.7;
}

.sy-page .aisol .ai-form-req > div > b{
  display:block;
  color:#ffb27a;
  font-weight:700;
  font-size:14px;
  margin-bottom:4px;
}

/* ---------- Tag wall ---------- */
.sy-page .aisol .ai-tagwall{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.sy-page .aisol .ai-tagwall > span,
.sy-page .aisol .ai-tagwall > a{
  display:inline-block;
  padding:8px 16px;
  font-size:13px;
  border-radius:4px;
  background:#fff;
  border:1px solid #e6e6e6;
  color:#555;
  transition:.2s;
}

.sy-page .aisol .ai-tagwall > a:hover{
  border-color:var(--sany-red);
  color:var(--sany-red);
  background:#fff8f3;
}

/* ---------- Column subheading (second level inside a section) ---------- */
.sy-page .aisol .ai-sub-head{
  margin:58px 0 26px;
  padding-left:14px;
  border-left:4px solid var(--sany-red);
}

.sy-page .aisol .ai-sub-head h3{
  font-size:20px;
  font-weight:800;
  color:#1a1a1a;
  letter-spacing:1px;
}

.sy-page .aisol .ai-sub-head p{
  margin-top:6px;
  font-size:14px;
  color:#888;
}

/* ---------- Extension section responsive ---------- */
@media (max-width:1200px){
  .sy-page .aisol .ai-objs{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sy-page .aisol .ai-form-req{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:992px){
  .sy-page .aisol .ai-loop{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .sy-page .aisol .ai-objs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sy-page .aisol .ai-signal{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .sy-page .aisol .ai-form-req{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:640px){
  .sy-page .aisol .ai-loop{ grid-template-columns:minmax(0,1fr); }
  .sy-page .aisol .ai-objs{ grid-template-columns:minmax(0,1fr); }
  .sy-page .aisol .ai-form-req{ grid-template-columns:minmax(0,1fr); }
  .sy-page .page-hero .ai-hero-chips span{ padding:6px 12px; font-size:12px; }
}

/* ---------- Switch the gallery to two columns when only 2 images are left (added 2026-09-20) ---------- */
.sy-page .aisol .ai-gallery.ai-gallery-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:640px){
  .sy-page .aisol .ai-gallery.ai-gallery-2{
    grid-template-columns:minmax(0,1fr);
  }
}


/* ============================================================
   Left-hand vertical "solution contents" anchor rail (added 2026-09-20, evening)
   Structure follows .ssol-rail in solution/detail-solution.html, values kept identical
   ============================================================ */
.sy-page .aisol-wrap{
  display:grid;
  grid-template-columns:148px minmax(0,1fr);
  gap:40px;
  align-items:start;
  padding-top:72px;
  padding-bottom:0;
}
.sy-page .aisol-rail{ position:sticky; top:96px; z-index:5; }
.sy-page .aisol-rail .rl-t{
  font-size:12px;
  line-height:22px;
  color:var(--sany-gray-l);
  padding-bottom:14px;
  border-bottom:1px solid var(--sany-border);
  margin-bottom:8px;
}
.sy-page .aisol-rail ul{ border-left:1px solid var(--sany-border); }
.sy-page .aisol-rail li a{
  display:block;
  padding:10px 0 10px 16px;
  margin-left:-1px;
  border-left:1px solid transparent;
  font-size:14px;
  line-height:24px;
  color:var(--sany-gray);
  transition:.2s;
}
.sy-page .aisol-rail li a:hover{ color:var(--sany-dark); }
.sy-page .aisol-rail li a.active{
  color:var(--sany-red);
  border-left-color:var(--sany-red);
  font-weight:700;
}
.sy-page .aisol-rail .rl-cta{
  margin-top:28px;
  display:block;
  padding:14px 16px;
  border-radius:30px;
  background:var(--sany-red);
  color:#fff;
  text-align:center;
  font-size:14px;
  line-height:1.4;
  transition:.2s;
}
.sy-page .aisol-rail .rl-cta:hover{ background:#d45c10; color:#fff; }
.sy-page .aisol-rail .rl-tel{
  display:block;
  margin-top:14px;
  text-align:center;
  font-size:14px;
  line-height:24px;
  color:var(--sany-gray-l);
}

/* Body column: the section's inner .container is reset so it is not centered and narrowed a second time inside the grid column */
.sy-page .aisol-body .container{
  width:auto;
  max-width:none;
  margin:0;
  padding-left:0;
  padding-right:0;
}
/* Once inside a grid column the full-bleed grey background is dropped (same as page 13: white background + borders on the cards themselves) */
.sy-page .aisol-body .ai-sec-gray{ background:transparent; }
/* The dark CTA section goes from a full-bleed color block to a rounded panel inside the column */
.sy-page .aisol-body .ai-sec-dark{ border-radius:8px; }
/* Anchor jumps must not be hidden behind the sticky header */
.sy-page .aisol-body > .ai-sec{ scroll-margin-top:100px; }

@media (max-width:1024px){
  .sy-page .aisol-wrap{ grid-template-columns:minmax(0,1fr); gap:0; padding-top:44px; }
  .sy-page .aisol-rail{ position:static; margin-bottom:36px; }
  .sy-page .aisol-rail ul{ border-left:0; display:flex; flex-wrap:wrap; gap:10px; }
  .sy-page .aisol-rail li a{
    border:1px solid var(--sany-border);
    border-radius:4px;
    padding:9px 16px;
    margin-left:0;
  }
  .sy-page .aisol-rail li a.active{ border-color:var(--sany-red); }
  .sy-page .aisol-rail .rl-cta{
    display:inline-block;
    margin-top:20px;
    padding:12px 26px;
  }
  .sy-page .aisol-rail .rl-tel{
    display:inline-block;
    margin-top:20px;
    margin-left:16px;
  }
}