/* Classie site — DECO sensor architecture section (Platform › Deploy).
 * Mirrors the sales-deck architecture diagram, tuned for the marketing page.
 * Scoped under .deco-sec so it never collides with other section styles.
 */
.deco-sec .deco-flow{display:flex; align-items:stretch; gap:16px; margin-top:16px;}

/* input/output rails — monitored surfaces (in) and AI providers (out) */
.deco-sec .deco-rail-wrap{margin-top:36px;}
.deco-sec .deco-rail-wrap.bottom{margin-top:16px;}
.deco-sec .deco-rail-cap{font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-muted); text-align:center; margin-bottom:13px;}
.deco-sec .deco-rail{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.deco-sec .deco-rail-chip{display:flex; align-items:center; justify-content:center; gap:11px; padding:14px 18px;
  background:var(--bg-base); border:1px solid var(--border-default); border-radius:12px;
  color:var(--fg-secondary); font-family:var(--f-display); font-weight:600; font-size:16px;}
.deco-sec .deco-rail-chip svg{color:var(--fg-tertiary); flex:none;}
.deco-sec .deco-card{background:var(--bg-surface); border:1px solid var(--border-default); border-radius:18px;
  padding:24px; box-shadow:var(--shadow-card); display:flex; flex-direction:column;}

.deco-sec .deco-collectors{flex:1.1;}
.deco-sec .deco-badge{align-self:flex-start; font-family:var(--f-mono); font-weight:700; font-size:12px; letter-spacing:.2em;
  color:var(--accent-mint); background:rgba(107,255,206,.08); border:1px solid rgba(107,255,206,.28); border-radius:8px; padding:6px 12px; margin-bottom:18px;}
.deco-sec .deco-sensors{display:grid; grid-template-columns:1fr 1fr; gap:26px 16px; justify-items:center; align-content:center; flex:1;}
.deco-sec .deco-sensor:first-child{grid-column:1 / 3;}
.deco-sec .deco-sensor{display:flex; flex-direction:column; align-items:center; text-align:center; gap:11px; padding:0; background:transparent;
  border:none; border-radius:0; max-width:200px;}
.deco-sec .ds-ico{width:52px; height:52px; border-radius:13px; flex:none; display:flex; align-items:center; justify-content:center;
  background:rgba(107,255,206,.07); border:1px solid rgba(107,255,206,.22); color:var(--accent-mint);}
.deco-sec .ds-t{font-family:var(--f-display); font-weight:700; font-size:18.5px; color:var(--fg-primary); letter-spacing:-.01em;}
.deco-sec .ds-s{font-family:var(--f-mono); font-size:12px; color:var(--fg-tertiary); margin-top:3px;}
.deco-sec .deco-note{font-size:14.5px; line-height:1.5; color:var(--fg-tertiary); margin-top:18px;}
.deco-sec .deco-note b{color:var(--accent-mint); font-weight:600;}

/* 2-column header: title left, demo CTA top-right */
.deco-sec .deco-head{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:end; margin-bottom:40px;}
.deco-sec .deco-head .eyebrow{margin-bottom:0;}
.deco-sec .deco-head .h2{margin:14px 0 0; text-align:left;}
.deco-sec .deco-head .lead{margin:16px 0 0; text-align:left; max-width:520px; font-size:17px; line-height:1.55; color:var(--fg-tertiary);}
.deco-sec .deco-head-cta{text-align:right;}
.deco-sec .deco-cta-h{font-family:var(--f-display); font-weight:700; font-size:clamp(19px,1.9vw,24px); letter-spacing:-.02em; color:var(--fg-primary); margin:0;}
.deco-sec .deco-cta-p{font-size:15px; line-height:1.5; color:var(--fg-tertiary); margin:10px 0 0 auto; max-width:360px;}
.deco-sec .deco-cta-row{display:flex; gap:12px; justify-content:flex-end; margin-top:20px; flex-wrap:wrap;}
@media(max-width:860px){.deco-sec .deco-head{grid-template-columns:1fr; gap:24px;} .deco-sec .deco-head-cta{text-align:left;} .deco-sec .deco-cta-p{margin-left:0;} .deco-sec .deco-cta-row{justify-content:flex-start;}}

/* lighter, less boxy diagram */
.deco-sec .deco-collectors{background:transparent; border:none; box-shadow:none; padding:6px 0;}
.deco-sec .deco-stream{background:transparent; box-shadow:none; border:1px solid var(--border-quiet);}
.deco-sec .das-row{background:transparent; box-shadow:none; border:1px solid var(--border-quiet);}

.deco-sec .deco-link{flex:none; width:30px; display:flex; align-items:center; justify-content:center; gap:6px;}
.deco-sec .deco-link i{width:6px; height:6px; border-radius:50%; background:var(--c, var(--accent-mint)); opacity:.45; animation:deco-pulse 1.5s infinite;}
.deco-sec .deco-link i:nth-child(2){animation-delay:.18s;}
.deco-sec .deco-link i:nth-child(3){animation-delay:.36s;}
@keyframes deco-pulse{0%,100%{opacity:.2;} 50%{opacity:1;}}

.deco-sec .deco-stream{flex:.64;}
.deco-sec .deco-cap-label{font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-tertiary);}
.deco-sec .deco-tags{display:flex; flex-direction:column; gap:11px; flex:1; justify-content:center; margin-top:16px;}
.deco-sec .deco-tag{font-family:var(--f-display); font-weight:700; font-size:16.5px; padding:13px; border-radius:11px; text-align:center;}
.deco-sec .deco-tag.pii{color:var(--danger); background:rgba(244,63,94,.1); border:1px solid rgba(244,63,94,.4);}
.deco-sec .deco-tag.fin{color:var(--warning); background:rgba(249,115,22,.1); border:1px solid rgba(249,115,22,.4);}
.deco-sec .deco-tag.safe{color:var(--accent-mint); background:rgba(107,255,206,.1); border:1px solid rgba(107,255,206,.4);}
.deco-sec .deco-tag.src{color:var(--brand-primary-hover); background:var(--brand-primary-10); border:1px solid var(--brand-primary);}
.deco-sec .deco-tag.cred{color:#c4b5fd; background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.42);}

.deco-sec .deco-das{flex:1.35; display:flex; flex-direction:column; gap:12px;}
.deco-sec .das-row{display:flex; align-items:flex-start; gap:14px; padding:16px 20px; background:var(--bg-surface);
  border:1px solid var(--border-default); border-radius:14px; box-shadow:var(--shadow-card);}
.deco-sec .das-num{width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-weight:700; font-size:14px; color:var(--brand-primary-hover); background:var(--brand-primary-10); border:1px solid var(--brand-primary-16);}
.deco-sec .das-h{font-family:var(--f-display); font-weight:700; font-size:21px; color:var(--fg-primary); letter-spacing:-.01em;}
.deco-sec .das-s{font-size:14.5px; color:var(--fg-tertiary); margin-top:3px;}
.deco-sec .das-row.super{flex:1; flex-direction:column; gap:0; border-color:var(--brand-primary);
  box-shadow:0 0 0 1px var(--brand-primary-16), 0 18px 44px -20px rgba(0,173,255,.4);
  background:linear-gradient(180deg, var(--brand-primary-10), var(--bg-surface) 60%);}
.deco-sec .super-head{display:flex; align-items:flex-start; gap:14px;}
.deco-sec .das-enforce{font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-primary-hover); margin:18px 0 12px;}
.deco-sec .das-chips{display:flex; flex-wrap:wrap; gap:9px;}
.deco-sec .das-chip{font-family:var(--f-display); font-weight:700; font-size:14.5px; padding:9px 17px; border-radius:var(--radius-pill); border:1px solid;}
.deco-sec .das-chip.stop{color:var(--danger); border-color:rgba(244,63,94,.55); background:rgba(244,63,94,.08);}
.deco-sec .das-chip.allow{color:var(--accent-mint); border-color:rgba(107,255,206,.55); background:rgba(107,255,206,.08);}
.deco-sec .das-chip.route{color:var(--brand-primary-hover); border-color:var(--brand-primary); background:var(--brand-primary-10);}
.deco-sec .das-chip.alert{color:var(--warning); border-color:rgba(249,115,22,.55); background:rgba(249,115,22,.08);}
.deco-sec .das-chip.redact{color:var(--brand-primary-hover); border-color:var(--brand-primary-16); background:transparent;}
.deco-sec .das-chip.mask{color:var(--fg-tertiary); border-color:var(--border-strong); background:transparent;}

@media(max-width:900px){
  .deco-sec .deco-flow{flex-direction:column;}
  .deco-sec .deco-link{width:auto; height:26px; flex-direction:row;}
  .deco-sec .deco-tags{flex-direction:row; flex-wrap:wrap;}
  .deco-sec .deco-tag{flex:1; min-width:120px;}
  .deco-sec .deco-rail{grid-template-columns:1fr;}
}