/*
 * Multi-tenant PoE SIP depth layer.
 * Scoped to .poe-sip-page so product facts and shared page styles stay intact.
 */
.poe-sip-page {
  --poe-paper: #fbfaf7;
  --poe-warm: #f4efe8;
  --poe-ink: #101b24;
  --poe-muted: #62707c;
  --poe-copper: #c86b31;
  --poe-line: #ddcfc2;
  --poe-shadow: 0 16px 38px rgba(24, 31, 37, .09), 0 3px 10px rgba(24, 31, 37, .045);
  --poe-shadow-lift: 0 24px 52px rgba(24, 31, 37, .14), 0 6px 14px rgba(24, 31, 37, .06);
  background: var(--poe-paper);
}

.poe-sip-page .page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 2px solid var(--poe-copper);
  background:
    radial-gradient(circle at 83% 18%, rgba(84, 128, 145, .27), transparent 31%),
    linear-gradient(145deg, #0b1720 0%, #15232d 55%, #101b24 100%);
  box-shadow: 0 18px 38px rgba(8, 17, 24, .18);
}

.poe-sip-page .page-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 28px 28px;
  content: "";
  opacity: .42;
  pointer-events: none;
}

.poe-sip-page .page-hero::after {
  position: absolute;
  z-index: -1;
  top: -390px;
  right: -180px;
  width: 760px;
  height: 760px;
  border: 1px solid rgba(191, 215, 222, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(191, 215, 222, .025), 0 0 0 68px rgba(191, 215, 222, .018);
  content: "";
  pointer-events: none;
}

.poe-sip-page .page-hero .hero-content { position: relative; z-index: 1; }
.poe-sip-page .page-hero .hero-badge {
  border-color: rgba(214, 228, 232, .3);
  background: rgba(255, 255, 255, .085);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 5px 14px rgba(0, 0, 0, .08);
}
.poe-sip-page .page-hero h1 { max-width: 1000px; letter-spacing: -.035em; text-shadow: 0 2px 16px rgba(0, 0, 0, .18); }
.poe-sip-page .page-hero .hero-sub { max-width: 770px; color: #c3d2dc; }
.poe-sip-page .page-hero .btn-primary-jbss,
.poe-sip-page .page-hero .btn-tg { box-shadow: 0 9px 20px rgba(0, 0, 0, .18); }

/* jbss-layout adds a product page kind at runtime; this selector keeps the
   PoE SIP hero treatment authoritative without changing the shared product CSS. */
.poe-sip-page[data-page-kind^="product-"] .page-hero {
  background:
    radial-gradient(circle at 83% 18%, rgba(84, 128, 145, .27), transparent 31%),
    linear-gradient(145deg, #0b1720 0%, #15232d 55%, #101b24 100%);
}

.poe-sip-page[data-page-kind^="product-"] .page-hero::before { display: block; }
.poe-sip-page[data-page-kind^="product-"] .page-hero h1 { color: #fff; }
.poe-sip-page[data-page-kind^="product-"] .page-hero .hero-sub { color: #c3d2dc; }
.poe-sip-page[data-page-kind^="product-"] .page-hero .hero-badge {
  border-color: rgba(214, 228, 232, .3);
  background: rgba(255, 255, 255, .085);
  color: #eaf2f4;
}
.poe-sip-page[data-page-kind^="product-"] .page-hero .btn-tg {
  border-color: rgba(214, 228, 232, .42);
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
}

.poe-sip-page .model-facts-reserved,
.poe-sip-page .poe-project-section,
.poe-sip-page .poe-boundary-section,
.poe-sip-page .poe-supply-section,
.poe-sip-page .poe-faq-section { position: relative; isolation: isolate; overflow: hidden; }

.poe-sip-page .model-facts-reserved {
  background:
    radial-gradient(circle at 16% 16%, rgba(200, 107, 49, .075), transparent 30%),
    linear-gradient(135deg, #f7f2eb 0%, #fbfaf7 72%);
}

.poe-sip-page .model-facts-reserved::before,
.poe-sip-page .poe-project-section::before,
.poe-sip-page .poe-boundary-section::before,
.poe-sip-page .poe-supply-section::before,
.poe-sip-page .poe-faq-section::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200, 107, 49, .42) 22%, rgba(200, 107, 49, .08) 78%, transparent 100%);
  content: "";
  pointer-events: none;
}

.poe-sip-page .model-facts-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, .78fr);
  gap: clamp(32px, 6vw, 76px);
  align-items: center;
}

.poe-sip-page .model-facts-card {
  border: 1px solid var(--poe-line);
  border-left: 3px solid var(--poe-copper);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(249, 245, 239, .96));
  box-shadow: var(--poe-shadow);
}

.poe-sip-page .poe-project-section {
  background:
    radial-gradient(circle at 84% 16%, rgba(218, 175, 136, .12), transparent 28%),
    linear-gradient(180deg, #f4efe8 0%, #f8f4ee 100%);
}

.poe-sip-page .project-matrix-figure {
  overflow: hidden;
  border: 1px solid #d9cfc5;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--poe-shadow-lift);
}

.poe-sip-page .project-matrix-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: linear-gradient(135deg, #f5f1eb, #e8edef);
}

.poe-sip-page .project-matrix-caption {
  margin: 0;
  padding: 12px 16px 14px;
  border-left: 3px solid var(--poe-copper);
  color: #53616d;
  background: #fff;
}

.poe-sip-page .poe-project-section .compare-table {
  overflow: hidden;
  border: 1px solid var(--poe-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--poe-shadow);
  border-collapse: separate;
  border-spacing: 0;
}

.poe-sip-page .poe-project-section .compare-table thead th {
  color: #fff;
  background: linear-gradient(135deg, #b85f29, #d77b3a);
}

.poe-sip-page .project-matrix-install {
  display: grid;
  grid-template-columns: minmax(140px, .55fr) minmax(0, 1.45fr);
  gap: 16px;
  margin-top: 14px;
  padding: 16px 18px;
  border-left: 3px solid var(--poe-copper);
  background: #fbf0e6;
  color: #754729;
}

.poe-sip-page .poe-boundary-section { background: #fff; }
.poe-sip-page .poe-boundary-section .section-head { max-width: 860px; }

.poe-sip-page .poe-boundary-section .card-jbss,
.poe-sip-page .poe-supply-section .card-jbss {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--poe-line);
  border-radius: 13px;
  background: linear-gradient(145deg, #fff 0%, #fcfaf7 100%);
  box-shadow: var(--poe-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

.poe-sip-page .poe-boundary-section .card-jbss::before,
.poe-sip-page .poe-supply-section .card-jbss::before {
  position: absolute;
  top: 0;
  right: 14px;
  left: 14px;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--poe-copper), rgba(200, 107, 49, .2));
  content: "";
}

.poe-sip-page .poe-boundary-section .card-jbss:hover,
.poe-sip-page .poe-supply-section .card-jbss:hover { box-shadow: var(--poe-shadow-lift); transform: translateY(-4px); }

.poe-sip-page .poe-supply-section {
  background:
    radial-gradient(circle at 90% 12%, rgba(200, 107, 49, .08), transparent 28%),
    linear-gradient(180deg, #f4efe8 0%, #f8f4ee 100%);
}

/* Keep the project-input card on the same visual axis as the supply evidence.
   It should read as a decision panel, not as a floating note at the section top. */
.poe-sip-page .poe-supply-section > .container > .row { align-items: center; }
.poe-sip-page .poe-supply-section .col-lg-5 { display: flex; align-items: center; }
.poe-sip-page .poe-supply-section .col-lg-5 .card-jbss { width: 100%; }

.poe-sip-page .poe-supply-section .icon-list {
  margin: 0;
  padding: 28px 32px;
  border: 1px solid var(--poe-line);
  border-left: 3px solid var(--poe-copper);
  border-radius: 0 13px 13px 0;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--poe-shadow);
}

.poe-sip-page .poe-supply-section .icon-list li { padding: 9px 0; }

.poe-sip-page .poe-faq-section {
  background: linear-gradient(180deg, #fbfaf7 0%, #f4efe8 100%);
}

.poe-sip-page .poe-faq-section .faq-list {
  overflow: hidden;
  border: 1px solid var(--poe-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--poe-shadow);
}

.poe-sip-page .poe-faq-section .faq-item {
  margin: 0;
  border: 0;
  border-bottom: 1px solid #e8dfd7;
  border-radius: 0;
  box-shadow: none;
}

.poe-sip-page .poe-faq-section .faq-item:last-child { border-bottom: 0; }
.poe-sip-page .poe-faq-section .faq-item summary { min-height: 66px; padding: 18px 22px; }

.poe-sip-page .poe-cta-section {
  background: linear-gradient(180deg, #f4efe8 0%, #fbfaf7 100%);
}

.poe-sip-page .poe-cta-section .cta-section {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(200, 107, 49, .22);
  box-shadow: 0 24px 55px rgba(16, 27, 36, .2), 0 6px 14px rgba(16, 27, 36, .08);
}

.poe-sip-page .poe-cta-section .cta-section::before {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.poe-sip-page .poe-cta-section .cta-section > * { position: relative; z-index: 1; }

.poe-sip-page a:focus-visible,
.poe-sip-page button:focus-visible,
.poe-sip-page summary:focus-visible {
  outline: 3px solid rgba(200, 107, 49, .48);
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  .poe-sip-page .page-hero::after { top: -250px; right: -330px; width: 520px; height: 520px; }
  .poe-sip-page .page-hero h1 { letter-spacing: -.025em; }
  .poe-sip-page .model-facts-grid { grid-template-columns: 1fr; gap: 28px; }
  .poe-sip-page .project-matrix-install { grid-template-columns: 1fr; gap: 6px; }
  .poe-sip-page .poe-project-section .col-lg-7 { min-width: 0; overflow-x: auto; }
  .poe-sip-page .poe-project-section .compare-table { display: table; width: 630px; min-width: 630px; }
  .poe-sip-page .poe-supply-section .icon-list { padding: 22px 20px; }
  .poe-sip-page .poe-supply-section > .container > .row { align-items: stretch; }
  .poe-sip-page .poe-supply-section .col-lg-5 { display: block; }
  .poe-sip-page .poe-faq-section .faq-item summary { min-height: 60px; padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .poe-sip-page .poe-boundary-section .card-jbss,
  .poe-sip-page .poe-supply-section .card-jbss { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PoE product page — layered B2B presentation
   The visual language is deliberately technical: dark graphite, warm copper,
   precise grid lines and restrained 3D depth. It adds hierarchy without
   introducing unverified product claims.
   ═══════════════════════════════════════════════════════════════════════ */
.poe-sip-page {
  --poe-graphite: #0a141d;
  --poe-graphite-2: #13232d;
  --poe-cyan: #91d4dc;
  --poe-copper-light: #efad7b;
  --poe-ink-soft: #21313b;
}

.poe-sip-page .poe-hero-depth {
  min-height: 618px;
  padding: clamp(76px, 8vw, 112px) 0 clamp(62px, 7vw, 90px);
  background:
    radial-gradient(circle at 74% 38%, rgba(117, 181, 193, .18), transparent 28%),
    radial-gradient(circle at 14% 110%, rgba(200, 107, 49, .16), transparent 30%),
    linear-gradient(123deg, var(--poe-graphite) 0%, #0d1b25 44%, var(--poe-graphite-2) 100%);
  border-bottom: 1px solid rgba(239, 173, 123, .55);
  box-shadow: 0 25px 70px rgba(6, 14, 20, .22);
}

.poe-sip-page .poe-hero-depth::before {
  background-image:
    linear-gradient(rgba(202, 226, 229, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(202, 226, 229, .04) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .9), transparent 92%);
  opacity: .52;
}

.poe-sip-page .poe-hero-depth::after {
  top: -280px;
  right: -150px;
  width: 820px;
  height: 820px;
  border-color: rgba(145, 212, 220, .14);
  box-shadow:
    0 0 0 42px rgba(145, 212, 220, .027),
    0 0 0 84px rgba(145, 212, 220, .018),
    0 0 0 126px rgba(200, 107, 49, .012);
}

.poe-sip-page .poe-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(400px, .82fr);
  gap: clamp(30px, 4vw, 58px);
  align-items: center;
}

.poe-sip-page .poe-hero-copy { position: relative; z-index: 2; max-width: 750px; }
.poe-sip-page .poe-hero-depth h1 {
  max-width: 720px;
  margin-bottom: 22px;
  font-size: clamp(38px, 4.5vw, 58px);
  line-height: 1.06;
  letter-spacing: -.047em;
}

.poe-sip-page .poe-hero-depth .hero-sub {
  max-width: 690px;
  margin-bottom: 0;
  color: #c9d7dc;
  font-size: 17px !important;
  line-height: 1.72;
}

.poe-sip-page .poe-hero-depth .hero-badges { gap: 9px; margin-bottom: 27px !important; }
.poe-sip-page .poe-hero-depth .hero-badge {
  min-height: 31px;
  padding: 6px 12px;
  border-color: rgba(201, 225, 229, .25);
  background: rgba(255, 255, 255, .065);
  color: #e8f1f2;
  font-size: 12px;
  letter-spacing: .01em;
  backdrop-filter: blur(9px);
}

.poe-sip-page .poe-hero-depth .d-flex { gap: 11px !important; }
.poe-sip-page .poe-hero-depth .btn-primary-jbss,
.poe-sip-page .poe-hero-depth .btn-tg,
.poe-sip-page .poe-hero-depth .btn-wa {
  min-height: 49px;
  padding: 13px 20px;
  border-radius: 7px;
  box-shadow: 0 13px 28px rgba(0, 0, 0, .2);
}

/* Keep the secondary WhatsApp action readable on the dark PoE hero. The
   shared product-page rules intentionally use dark text on light heroes, but
   this page has a dark technical hero and otherwise renders the label as if
   it were missing. */
.poe-sip-page .poe-hero-depth .btn-wa {
  color: #fff !important;
  border-color: rgba(214, 228, 232, .42);
  background: rgba(255, 255, 255, .06);
}
.poe-sip-page .poe-hero-depth .btn-wa:hover {
  color: #fff !important;
  border-color: rgba(239, 173, 123, .72);
  background: rgba(255, 255, 255, .12);
}

.poe-sip-page .poe-hero-depth .btn-primary-jbss {
  border: 1px solid rgba(244, 190, 151, .35);
  background: linear-gradient(135deg, #db8043, #b95c2b);
}

.poe-sip-page .poe-hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  margin-top: 30px;
  color: #afc3c9;
  font-size: 11px;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.poe-sip-page .poe-hero-proof b {
  display: inline-block;
  margin-right: 3px;
  color: #f1c5a6;
  font-size: 15px;
  letter-spacing: -.02em;
}

.poe-sip-page .poe-hero-proof i {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--poe-copper-light);
  box-shadow: 0 0 0 4px rgba(239, 173, 123, .09);
}

/* CSS-only product/network composition. It is decorative and intentionally
   uses labels, not model-specific performance figures. */
.poe-sip-page .poe-hero-visual {
  position: relative;
  min-height: 472px;
  isolation: isolate;
  perspective: 1400px;
}

.poe-sip-page .poe-visual-grid {
  position: absolute;
  inset: 12% -12% 0 0;
  z-index: -3;
  background-image:
    linear-gradient(rgba(145, 212, 220, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145, 212, 220, .1) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse at 50% 54%, #000 0%, rgba(0, 0, 0, .76) 42%, transparent 76%);
  transform: rotateX(60deg) rotateZ(-17deg) translateY(26%);
  opacity: .42;
}

.poe-sip-page .poe-orbit {
  position: absolute;
  z-index: -2;
  border: 1px solid rgba(145, 212, 220, .2);
  border-radius: 50%;
  pointer-events: none;
}

.poe-sip-page .poe-orbit-a {
  top: 8%;
  right: 2%;
  width: 390px;
  height: 190px;
  transform: rotate(-25deg);
  box-shadow: 0 0 0 18px rgba(145, 212, 220, .018), 0 0 0 38px rgba(145, 212, 220, .012);
}

.poe-sip-page .poe-orbit-b {
  right: 12%;
  bottom: 8%;
  width: 270px;
  height: 110px;
  border-color: rgba(200, 107, 49, .24);
  transform: rotate(19deg);
}

.poe-sip-page .poe-visual-card {
  position: absolute;
  border: 1px solid rgba(183, 215, 220, .22);
  border-radius: 16px;
  transform-style: preserve-3d;
}

.poe-sip-page .poe-visual-back {
  top: 6%;
  right: 11%;
  z-index: -1;
  display: flex;
  width: 290px;
  height: 340px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 25px;
  background:
    linear-gradient(160deg, rgba(41, 68, 79, .78), rgba(10, 24, 32, .92)),
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(145, 212, 220, .045) 13px 14px);
  box-shadow: 18px 30px 48px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: rotateY(20deg) rotateZ(-10deg) translateZ(-45px);
}

.poe-sip-page .poe-visual-back::before {
  position: absolute;
  top: 30px;
  right: 28px;
  width: 82px;
  height: 82px;
  border: 1px solid rgba(145, 212, 220, .32);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(145, 212, 220, .05), 0 0 34px rgba(145, 212, 220, .12);
  content: "";
}

.poe-sip-page .poe-visual-caption,
.poe-sip-page .poe-console-head,
.poe-sip-page .poe-visual-chip,
.poe-sip-page .poe-device-foot,
.poe-sip-page .poe-readouts span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.poe-sip-page .poe-visual-back .poe-visual-caption { color: #7baab2; }
.poe-sip-page .poe-visual-back strong { margin: 7px 0 2px; color: #e4f1f1; font-size: 29px; letter-spacing: -.04em; }
.poe-sip-page .poe-visual-back em { color: #c78359; font-size: 10px; font-style: normal; letter-spacing: .16em; }

.poe-sip-page .poe-visual-front {
  top: 17%;
  right: 0;
  z-index: 1;
  width: min(390px, 94%);
  min-height: 350px;
  padding: 20px;
  background:
    linear-gradient(145deg, rgba(27, 46, 57, .96), rgba(8, 20, 28, .98)),
    radial-gradient(circle at 86% 12%, rgba(145, 212, 220, .13), transparent 36%);
  box-shadow:
    20px 33px 52px rgba(0, 0, 0, .3),
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 0 48px rgba(145, 212, 220, .06);
  transform: rotateY(-11deg) rotateX(3deg) rotateZ(1deg) translateZ(26px);
}

.poe-sip-page .poe-visual-front::before {
  position: absolute;
  top: -1px;
  right: 26px;
  left: 26px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--poe-copper-light), transparent);
  content: "";
}

.poe-sip-page .poe-console-head {
  display: flex;
  justify-content: space-between;
  color: #78a7af;
}

.poe-sip-page .poe-status { color: #a7c8bd; letter-spacing: .08em; }
.poe-sip-page .poe-status i { display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 0; border-radius: 50%; background: #75d39b; box-shadow: 0 0 0 4px rgba(117, 211, 155, .11); }

.poe-sip-page .poe-device {
  position: relative;
  margin: 24px auto 20px;
  padding: 15px 16px 13px;
  border: 1px solid rgba(173, 208, 214, .17);
  border-radius: 10px;
  background: linear-gradient(145deg, #263b45, #101e27 66%);
  box-shadow: 0 14px 24px rgba(0, 0, 0, .27), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: translateZ(32px);
}

.poe-sip-page .poe-device::after {
  position: absolute;
  right: 11px;
  bottom: 10px;
  width: 35%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 173, 123, .74));
  content: "";
}

.poe-sip-page .poe-device-top,
.poe-sip-page .poe-device-foot { display: flex; align-items: center; justify-content: space-between; color: #84abb2; }
.poe-sip-page .poe-device-top { font-size: 10px; letter-spacing: .18em; }
.poe-sip-page .poe-device-top b { color: #d99062; font-size: 13px; }

.poe-sip-page .poe-device-core {
  display: flex;
  min-height: 100px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 13px;
  border: 1px solid rgba(145, 212, 220, .12);
  background: radial-gradient(circle at 50% 50%, rgba(145, 212, 220, .13), transparent 48%);
}

.poe-sip-page .poe-device-lens {
  position: absolute;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(145, 212, 220, .56);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d5f6f4 0 4%, #6eacb6 6% 17%, #0b1b24 45% 64%, #31515a 66% 68%, #0a141b 70%);
  box-shadow: 0 0 0 8px rgba(145, 212, 220, .05), 0 0 26px rgba(145, 212, 220, .26);
}

.poe-sip-page .poe-device-wave { width: 22px; height: 22px; border: 1px solid rgba(145, 212, 220, .42); border-left-color: transparent; border-radius: 50%; transform: translateX(36px); opacity: .8; }
.poe-sip-page .poe-device-wave + .poe-device-wave { width: 30px; height: 30px; transform: translateX(30px); opacity: .55; }
.poe-sip-page .poe-device-wave + .poe-device-wave + .poe-device-wave { width: 38px; height: 38px; transform: translateX(24px); opacity: .3; }
.poe-sip-page .poe-port-row { display: flex; gap: 7px; margin-bottom: 14px; }
.poe-sip-page .poe-port-row i { display: block; width: 30px; height: 7px; border: 1px solid rgba(200, 107, 49, .55); border-radius: 2px; background: rgba(200, 107, 49, .18); }
.poe-sip-page .poe-device-foot { font-size: 10px; }
.poe-sip-page .poe-device-foot small { color: #668e96; font-size: 8px; letter-spacing: .12em; }

.poe-sip-page .poe-readouts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.poe-sip-page .poe-readouts > div { padding: 11px 12px; border: 1px solid rgba(145, 212, 220, .12); border-radius: 7px; background: rgba(255, 255, 255, .035); }
.poe-sip-page .poe-readouts span { display: block; margin-bottom: 5px; color: #6c9ca5; font-size: 8px; letter-spacing: .1em; }
.poe-sip-page .poe-readouts b { color: #e5f1f1; font-size: 15px; letter-spacing: .02em; }
.poe-sip-page .poe-visual-front > p { margin: 10px 0 0; color: #77949a; font-size: 9px; text-align: right; }

.poe-sip-page .poe-visual-chip {
  position: absolute;
  z-index: 3;
  padding: 10px 12px;
  border: 1px solid rgba(200, 107, 49, .36);
  border-radius: 6px;
  background: rgba(13, 29, 38, .82);
  color: #efad7b;
  box-shadow: 0 12px 20px rgba(0, 0, 0, .18);
  backdrop-filter: blur(8px);
}

.poe-sip-page .poe-visual-chip span { margin-left: 5px; color: #9bb7bc; font-size: 8px; letter-spacing: .1em; }
.poe-sip-page .poe-chip-a { top: 2%; left: 3%; transform: translateZ(70px) rotate(-6deg); }
.poe-sip-page .poe-chip-b {
  right: -3%;
  bottom: -12%;
  transform: translateZ(80px) rotate(5deg);
}

/* Layered section transitions and cards. The offset is intentionally subtle;
   it reads as depth on desktop and becomes flat on small screens. */
.poe-sip-page .model-facts-reserved { padding-top: clamp(82px, 8vw, 112px); }
.poe-sip-page .model-facts-reserved::after {
  position: absolute;
  right: -7%;
  bottom: -90px;
  width: 300px;
  height: 220px;
  border: 1px solid rgba(200, 107, 49, .1);
  border-radius: 50%;
  transform: rotate(-18deg);
  content: "";
  pointer-events: none;
}

.poe-sip-page .model-facts-card { transform: translateY(12px) rotate(1deg); }
.poe-sip-page .model-facts-card::after {
  position: absolute;
  top: 13px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #75c99d;
  box-shadow: 0 0 0 5px rgba(117, 201, 157, .1);
  content: "";
}

.poe-sip-page .poe-project-section .section-head { max-width: 780px; }
.poe-sip-page .poe-project-section .table-wrap {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(200, 107, 49, .2);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(246, 238, 228, .85));
  box-shadow: 0 24px 45px rgba(38, 37, 34, .1), 0 3px 10px rgba(38, 37, 34, .04);
}

.poe-sip-page .poe-project-section .compare-table tbody tr:nth-child(even) th,
.poe-sip-page .poe-project-section .compare-table tbody tr:nth-child(even) td { background: #fcfaf7; }
.poe-sip-page .poe-project-section .compare-table tbody tr:hover th,
.poe-sip-page .poe-project-section .compare-table tbody tr:hover td { background: #fff7ef; }

.poe-sip-page .poe-boundary-section .section-head,
.poe-sip-page .poe-supply-section .section-head { position: relative; }
.poe-sip-page .poe-boundary-section .section-head::after,
.poe-sip-page .poe-supply-section .section-head::after {
  position: absolute;
  top: -9px;
  right: 0;
  width: 84px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,107,49,.65));
  content: "";
}

.poe-sip-page .poe-boundary-section .row > [class*="col-"]:nth-child(2) .card-jbss { transform: translateY(-10px); }
.poe-sip-page .poe-boundary-section .row > [class*="col-"]:nth-child(3) .card-jbss { transform: translateY(8px); }
.poe-sip-page .poe-boundary-section .card-jbss h3 { letter-spacing: -.02em; }
.poe-sip-page .poe-supply-section .col-lg-5 .card-jbss { transform: translateY(9px) rotate(-1deg); }

.poe-sip-page .poe-cta-section .cta-section {
  background:
    radial-gradient(circle at 88% 12%, rgba(145, 212, 220, .2), transparent 26%),
    linear-gradient(135deg, #11232e 0%, #0a1720 100%);
}

@media (max-width: 991.98px) {
  .poe-sip-page .poe-hero-depth { min-height: 0; }
  .poe-sip-page .poe-hero-layout { grid-template-columns: 1fr; gap: 42px; }
  .poe-sip-page .poe-hero-copy { max-width: 820px; }
  .poe-sip-page .poe-hero-visual { min-height: 420px; max-width: 560px; width: 100%; margin: 0 auto; }
}

@media (max-width: 767.98px) {
  .poe-sip-page .poe-hero-depth { padding: 55px 0 48px; }
  .poe-sip-page .poe-hero-layout { position: relative; display: block; }
  .poe-sip-page .poe-hero-copy { position: relative; z-index: 2; }
  .poe-sip-page .poe-hero-depth h1 { font-size: clamp(33px, 10vw, 48px); line-height: 1.08; }
  .poe-sip-page .poe-hero-depth .hero-sub { max-width: 348px; font-size: 15px !important; line-height: 1.65; }
  .poe-sip-page .poe-hero-proof { gap: 8px; margin-top: 24px; font-size: 9px; }
  .poe-sip-page .poe-hero-proof i { margin: 0 1px; }
  .poe-sip-page .poe-hero-visual { position: absolute; top: 355px; right: -105px; z-index: 0; width: 430px; min-height: 344px; margin-top: 0; opacity: .46; transform: scale(.9); transform-origin: center top; pointer-events: none; }
  .poe-sip-page .poe-visual-back { right: 3%; width: 230px; height: 270px; }
  .poe-sip-page .poe-visual-front { top: 15%; right: -2%; width: min(330px, 96%); min-height: 314px; padding: 16px; }
  .poe-sip-page .poe-device { margin-top: 17px; }
  .poe-sip-page .poe-device-core { min-height: 75px; margin: 11px 0; }
  .poe-sip-page .poe-device-lens { width: 42px; height: 42px; }
  .poe-sip-page .poe-port-row { gap: 4px; }
  .poe-sip-page .poe-port-row i { width: 23px; }
  .poe-sip-page .poe-visual-chip { padding: 8px 9px; font-size: 8px; }
  .poe-sip-page .poe-chip-a { top: 3%; left: 0; }
  .poe-sip-page .poe-chip-b { right: -1%; bottom: -7%; }
  .poe-sip-page .model-facts-card,
  .poe-sip-page .poe-boundary-section .row > [class*="col-"]:nth-child(2) .card-jbss,
  .poe-sip-page .poe-boundary-section .row > [class*="col-"]:nth-child(3) .card-jbss,
  .poe-sip-page .poe-supply-section .col-lg-5 .card-jbss { transform: none; }
  .poe-sip-page .poe-project-section .table-wrap { padding: 7px; border-radius: 12px; }
  .poe-sip-page .poe-project-section .compare-table { min-width: 630px; }
}

@media (prefers-reduced-motion: reduce) {
  .poe-sip-page .poe-visual-card,
  .poe-sip-page .poe-visual-chip,
  .poe-sip-page .model-facts-card { transform: none; }
}