/* ioths.ai additions: content pages (products, white papers, use cases), footer column, small fixes. */

/* Footer: five columns with the Products & Resources column */
.ft-grid { grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { .ft-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important; } }
.ft-heading { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(223, 180, 40); margin-bottom: 12px; }
.ft-links { display: grid; gap: 10px; }
.ft-link { text-decoration: none; color: rgba(226, 232, 240, 0.92); font-size: 13px; line-height: 1.5; border-left: 2px solid rgba(158, 187, 228, 0.22); padding-left: 10px; }
.ft-link:hover { color: #fff; border-left-color: rgb(223, 180, 40); }
.ft-nap { margin-top: 18px; display: grid; gap: 10px; font-size: 12px; line-height: 1.55; color: rgba(203, 213, 225, 0.85); }
.ft-nap a { color: rgba(226, 232, 240, 0.92); text-decoration: none; }
.ft-nap a:hover { text-decoration: underline; }

/* Media never overflows its box */
main img, main video { max-width: 100%; }

/* Content pages */
.cs-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.cs-hero { position: relative; background: linear-gradient(18deg, #ffffff, #fff8dd 55%, #ffffff); color: #050814; padding: 56px 0 44px; border-bottom: 1px solid rgba(15, 23, 42, 0.08); }
.cs-hero--list { padding: 64px 0 48px; }
.cs-hero h1 { font-family: Montserrat, system-ui, sans-serif; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; margin: 0 0 12px; color: #0b1020; font-weight: 700; max-width: 900px; }
.cs-lede { font-size: 17px; line-height: 1.65; color: #4b5563; max-width: 780px; margin: 0 0 16px; }
.cs-lede a { color: #9a6b00; }
.cs-meta { font-size: 13px; color: #6b7280; margin: 0 0 14px; }
.cs-eyebrow { display: inline-block; background: rgb(223, 180, 40); color: #050814; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.6px; padding: 6px 12px; margin-bottom: 14px; }
.cs-back { display: inline-flex; align-items: center; margin-bottom: 18px; text-decoration: none; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(15, 23, 42, 0.7); border: 1px solid rgba(15, 23, 42, 0.14); padding: 8px 10px; background: rgba(255, 255, 255, 0.88); }
.cs-back::before { content: '‹'; margin-right: 8px; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.cs-chip { display: inline-flex; align-items: center; border: 1px solid rgba(15, 23, 42, 0.14); padding: 6px 10px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255, 255, 255, 0.92); color: rgba(15, 23, 42, 0.78); }
.cs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cs-btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-decoration: none; background: #dfb428; border: 1px solid #dfb428; color: #050814; transition: transform 0.15s ease; }
.cs-btn:hover { transform: translateY(-1px); }
.cs-btn--ghost { background: transparent; border-color: rgba(15, 23, 42, 0.3); color: #0b1020; }
.cs-cover { display: block; width: 100%; max-height: 460px; object-fit: cover; margin: 32px 0 0; }
.cs-body { background: #fff; padding: 40px 0 56px; }
.cs-prose { max-width: 820px; color: #394260; font-size: 16px; line-height: 1.75; }
.cs-prose h2 { font-family: Montserrat, system-ui, sans-serif; font-size: clamp(22px, 2.6vw, 28px); color: #0b1020; margin: 36px 0 12px; line-height: 1.25; }
.cs-prose h3 { font-size: 19px; color: #0b1020; margin: 28px 0 8px; }
.cs-prose h4 { font-size: 16px; color: #0b1020; margin: 22px 0 6px; }
.cs-prose p { margin: 0 0 16px; }
.cs-prose ul, .cs-prose ol { margin: 0 0 18px; padding-left: 22px; }
.cs-prose li { margin: 6px 0; }
.cs-prose a { color: #9a6b00; }
.cs-prose img { display: block; margin: 20px 0; height: auto; }
.cs-prose blockquote { margin: 22px 0; padding: 14px 18px; border-left: 3px solid #dfb428; background: #fffbea; color: #3f3f46; }
.cs-prose code { background: #f3f4f6; padding: 1px 5px; font-size: 0.92em; }
.cs-prose hr { border: 0; border-top: 1px solid #e5e7eb; margin: 32px 0; }
.cs-cta { background: #050814; color: rgba(248, 250, 252, 0.92); padding: 48px 0; }
.cs-cta h2 { font-family: Montserrat, system-ui, sans-serif; margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 28px); color: #fff; }
.cs-cta p { margin: 0 0 18px; color: rgba(203, 213, 225, 0.9); max-width: 640px; }

/* Listing cards: equal heights, aligned text */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.cs-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border: 1px solid rgba(15, 23, 42, 0.12); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.cs-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1); }
.cs-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.cs-cardBody { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 20px; }
.cs-cardBody .cs-eyebrow { align-self: flex-start; margin-bottom: 10px; }
.cs-cardBody h2 { font-size: 19px; line-height: 1.3; margin: 0 0 8px; color: #0b1020; }
.cs-cardBody p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #4b5563; flex: 1; }
.cs-more { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9a6b00; }
.cs-empty { font-size: 16px; color: #4b5563; }
.cs-empty a { color: #9a6b00; }

@media (max-width: 640px) {
  .cs-hero { padding: 40px 0 32px; }
  .cs-body { padding: 28px 0 40px; }
}

/* Moving backgrounds and the still 3D site model */
canvas.ioths-bg { display: block; width: 100%; height: 100%; pointer-events: none; }
.ioths-siteModel { display: block; width: 100%; height: 100%; object-fit: contain; }
.ioths-srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Never scroll sideways (decorative layers may extend past the edges) */
html, body { overflow-x: clip; }

/* Text + media sections stack on narrow screens (the original script left a fixed pixel width on the media) */
@media (max-width: 900px) {
  .stm-grid, .stm-grid.stm-grid--fit { grid-template-columns: minmax(0, 1fr) !important; }
  .stm-media.stm-media--fit { width: auto !important; max-width: 100% !important; }
}
/* Long call-to-action buttons wrap instead of being cut off */
@media (max-width: 640px) {
  .sts-ctaBtn { white-space: normal !important; text-align: center; max-width: 100%; }
  .home-xr-shell { min-width: 0 !important; min-height: 260px !important; }
}

/* Alarm verification panel (replaces the interactive 3D site example) */
.av { width: 100%; min-height: 410px; display: flex; flex-direction: column; color: rgba(226, 232, 240, 0.92); font-size: 13px; }
.av-bar { height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid rgba(148, 163, 184, 0.35); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(203, 213, 225, 0.85); }
.av-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; }
.av-chipDot { width: 10px; height: 10px; background: #dfb428; }
.av-body { flex: 1; background: #000; padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 16px; }
.av-flow { display: grid; grid-template-columns: minmax(0, 1.25fr) 36px minmax(0, 1fr); align-items: center; gap: 8px; }
.av-sensors { display: grid; gap: 8px; }
.av-sensor { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(148, 163, 184, 0.28); background: rgba(15, 23, 42, 0.7); animation: av-sensor 9s infinite; }
.av-sensor b { display: block; font-size: 12px; font-weight: 700; color: #f8fafc; }
.av-sensor small { display: block; font-size: 11px; color: rgba(148, 163, 184, 0.95); }
.av-led { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: rgba(100, 116, 139, 0.8); animation: av-led 9s infinite; }
.av-s2, .av-s2 .av-led { animation-delay: 0.6s; }
.av-s3, .av-s3 .av-led { animation-delay: 1.2s; }
.av-link { position: relative; height: 2px; background: rgba(148, 163, 184, 0.3); }
.av-link span { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; background: #dfb428; animation: av-pulse 9s infinite; opacity: 0; }
.av-plc { padding: 12px; border: 1px solid rgba(158, 187, 228, 0.45); background: rgba(15, 23, 42, 0.85); animation: av-plc 9s infinite; }
.av-plcTitle { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(158, 187, 228, 0.95); margin-bottom: 6px; }
.av-plcState { position: relative; min-height: 18px; font-weight: 700; }
.av-wait, .av-ok { position: absolute; left: 0; top: 0; }
.av-wait { color: rgba(203, 213, 225, 0.85); animation: av-wait 9s infinite; }
.av-ok { color: #dfb428; opacity: 0; animation: av-ok 9s infinite; }
.av-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.av-timeline li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; font-size: 12px; line-height: 1.45; opacity: 0.38; animation: av-step 9s infinite; }
.av-timeline time { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: #dfb428; }
.av-t2 { animation-delay: 0.6s !important; }
.av-t3 { animation-delay: 1.2s !important; }
.av-t4 { animation-delay: 1.8s !important; }
.av-t5 { animation-delay: 2.4s !important; }
.av-t6 { animation-delay: 3s !important; }
.av-note { margin-top: auto; font-size: 10.5px; color: rgba(148, 163, 184, 0.75); }

@keyframes av-led { 0%, 4% { background: rgba(100, 116, 139, 0.8); box-shadow: none; } 8%, 80% { background: #dfb428; box-shadow: 0 0 10px rgba(223, 180, 40, 0.8); } 90%, 100% { background: rgba(100, 116, 139, 0.8); box-shadow: none; } }
@keyframes av-sensor { 0%, 4% { border-color: rgba(148, 163, 184, 0.28); } 8%, 80% { border-color: rgba(223, 180, 40, 0.65); } 90%, 100% { border-color: rgba(148, 163, 184, 0.28); } }
@keyframes av-pulse { 0%, 18% { left: 0; opacity: 0; } 20% { opacity: 1; } 30% { left: calc(100% - 8px); opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes av-plc { 0%, 28% { border-color: rgba(158, 187, 228, 0.45); box-shadow: none; } 32%, 80% { border-color: #dfb428; box-shadow: 0 0 18px rgba(223, 180, 40, 0.25); } 90%, 100% { border-color: rgba(158, 187, 228, 0.45); box-shadow: none; } }
@keyframes av-wait { 0%, 28% { opacity: 1; } 31%, 88% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes av-ok { 0%, 29% { opacity: 0; } 32%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes av-step { 0%, 2% { opacity: 0.38; } 6%, 80% { opacity: 1; } 90%, 100% { opacity: 0.38; } }

@media (prefers-reduced-motion: reduce) {
  .av *, .av-sensor { animation: none !important; }
  .av-timeline li { opacity: 1; }
  .av-led { background: #dfb428; }
  .av-wait { opacity: 0; }
  .av-ok { opacity: 1; }
}
@media (max-width: 560px) {
  .av-flow { grid-template-columns: minmax(0, 1fr); }
  .av-link { display: none; }
  .av-timeline li { grid-template-columns: 64px minmax(0, 1fr); }
}