/* ==========================================================================
   DW WiFi · cambium.css · /cambium-access-points
   CAMBIUM piece owns this file. Shell tokens and components live in site.css.

    1 Hero (navy stage, the logo's five attenuation steps as coverage rings)
    2 Line-up cards
    3 Cloud managed (cnMaestro)
    4 Model detail panels + radio mode
    5 Comparison table
    6 Why Cambium
    7 Enquiry
    8 Reduced motion
   ========================================================================== */


/* 1 Hero ------------------------------------------------------------------ */
.cam-hero {
  position: relative;
  overflow: clip; /* clip, not hidden: nothing sticky lives here, and it keeps the rings in */
  padding-top: clamp(2rem, 1rem + 3vw, 3.75rem);
  background:
    radial-gradient(48% 40% at 50% 70%, rgba(136, 174, 62, .17), rgba(136, 174, 62, 0) 72%),
    radial-gradient(70% 55% at 50% -6%, rgba(18, 58, 99, .95), rgba(7, 27, 49, 0) 72%),
    var(--navy-950);
}
.cam-hero-top {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.25rem 3.5rem;
  align-items: end;
}
@media (min-width: 960px) {
  .cam-hero-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 3rem; }
}
.cam-hero-title { max-width: 12.5em; } /* size, weight and tracking come from the shell h1 */
.cam-hero-lead {
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.55;
  color: var(--fog);
  max-width: 34em;
}
.cam-hero-ctas { margin-top: 1.5rem; }
@media (max-width: 479px) {
  .cam-hero-ctas > .btn { flex: 1 1 100%; }
}

/* the stage: product render over five rings (100 / 80 / 60 / 40 / 20 percent,
   exactly the logo's loops) + one pulse that runs three times and stops */
.cam-stage {
  --ap: min(42rem, 88vw);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: calc(var(--ap) * .62 + 1rem); /* the render is 1280 x 776, so the stage always holds it */
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.25rem);
}
.cam-stage-img {
  position: relative;
  z-index: 1;
  width: var(--ap);
  height: auto;
  transform: translate3d(var(--ix, 0px), var(--iy, 0px), 0);
  filter: drop-shadow(0 38px 46px rgba(0, 0, 0, .5)) drop-shadow(0 6px 14px rgba(0, 0, 0, .3));
  will-change: transform;
}
.cam-rings {
  position: absolute;
  left: 50%;
  top: 56%;
  width: calc(var(--ap) * 2.25);
  max-width: none;
  height: auto;
  overflow: visible;
  transform: translate3d(calc(-50% + var(--rx, 0px)), calc(-50% + var(--ry, 0px)), 0);
  pointer-events: none;
}
.cam-rings ellipse, .cam-rings-top circle {
  fill: none;
  stroke: var(--lime-500);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.cam-rings .r1, .cam-rings-top .r1 { opacity: 1; }
.cam-rings .r2, .cam-rings-top .r2 { opacity: .8; }
.cam-rings .r3, .cam-rings-top .r3 { opacity: .6; }
.cam-rings .r4, .cam-rings-top .r4 { opacity: .4; }
.cam-rings .r5, .cam-rings-top .r5 { opacity: .2; }
.cam-rings .pulse { opacity: 0; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .cam-rings .pulse { animation: cam-pulse 3.4s cubic-bezier(.2, .7, .2, 1) .9s 3 both; }
  .cam-stage-img { animation: cam-rise 1.1s var(--ease-out) backwards; }
}
@keyframes cam-pulse {
  0% { opacity: .95; transform: scale(.52); }
  70% { opacity: .18; }
  100% { opacity: 0; transform: scale(1.12); }
}
@keyframes cam-rise {
  from { opacity: .35; transform: translate3d(0, 18px, 0) scale(.975); }
  to { opacity: 1; transform: translate3d(var(--ix, 0px), var(--iy, 0px), 0); }
}

/* the base strip: what is shown + the partner mark */
.cam-hero-base {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-top: 1.1rem;
  padding-bottom: 1.35rem;
  background: linear-gradient(rgba(255, 255, 255, .13), rgba(255, 255, 255, .13)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.cam-hero-shown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .9rem;
  font-size: .9375rem;
  color: var(--fog);
}
.cam-hero-model { font-size: 1.0625rem; color: var(--lime-300); }
.cam-hero-more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.cam-partner {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  min-height: 44px;
  padding: .25rem .25rem .25rem 0;
  border-radius: var(--radius-sm);
  color: var(--fog);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
}
.cam-partner img { width: auto; height: 34px; }
.cam-partner span { padding-left: .85rem; border-left: 1px solid rgba(255, 255, 255, .18); line-height: 1.3; }
.cam-partner:hover span { color: var(--white); }
@media (max-width: 599px) {
  .cam-hero-shown { gap: 0 .75rem; }
  .cam-hero-spec { flex-basis: 100%; order: 3; }
  .cam-hero-more { order: 2; margin-left: auto; }
  .cam-partner { width: 100%; padding-top: .6rem; border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0; }
  .cam-partner img { height: 30px; }
}


/* 2 Line-up ----------------------------------------------------------------- */
/* Round 11: the products were thumbnails on a pale card. Now each render fills a studio
   tile (lit in the middle, darker at the edges so a white product holds its edge), the
   model name is the biggest thing on the card and the jump is a real button. */
.cam-lineup-head {
  display: grid;
  gap: 1rem 4rem;
  margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
}
@media (min-width: 960px) {
  .cam-lineup-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
}
.cam-lineup-head h2 { max-width: 13em; }
.cam-lineup-head .lead { max-width: 36em; }
.cam-models {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(.75rem, .4rem + 1vw, 1.25rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1000px) { .cam-models { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cam-models > li { display: flex; min-width: 0; }
.cam-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: .5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-1);
  color: var(--navy-900);
  text-decoration: none;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.cam-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.cam-card:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 3px; }
.cam-card-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / .88;
  border-radius: calc(var(--radius-lg) - .5rem);
  background:
    radial-gradient(58% 50% at 50% 46%, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0) 72%),
    linear-gradient(172deg, #E8EDE5 0%, #D2DBCE 100%);
  overflow: clip;
}
.cam-card-media img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  filter: drop-shadow(0 18px 18px rgba(7, 27, 49, .2)) drop-shadow(0 3px 5px rgba(7, 27, 49, .12));
  transition: transform .5s var(--ease-out);
}
.cam-media-wide img { max-width: 86%; max-height: 74%; }
.cam-media-tall img { max-width: 80%; max-height: 84%; }
.cam-media-slim img { max-height: 88%; }
.cam-card:hover .cam-card-media img { transform: translateY(-5px) scale(1.035); }
.cam-card-body { display: flex; flex-direction: column; gap: .6rem; flex: 1; min-width: 0; padding: 1.1rem .7rem .45rem; }
@media (min-width: 1000px) { .cam-card-body { padding: 1.25rem .9rem .5rem; } }
.cam-card-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.cam-card-name {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 1.2rem + .95vw, 2.125rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.cam-card-desc { font-size: 1rem; line-height: 1.5; color: var(--slate); }
.cam-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 46px;
  margin-top: auto;
  padding: .5rem 1rem;
  border: 1.5px solid var(--navy-900);
  border-radius: 10px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy-900);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.cam-card-btn .icon { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--dur-fast) ease; }
.cam-card:hover .cam-card-btn { background: var(--navy-900); color: var(--white); }
.cam-card:hover .cam-card-btn .icon { transform: translateX(3px); }
.cam-btn-short { display: none; }
@media (max-width: 559px) {
  .cam-card { padding: .4rem; }
  .cam-card-media { aspect-ratio: 1; }
  .cam-card-body { padding: .9rem .35rem .35rem; gap: .5rem; }
  .cam-card-tags { gap: .3rem; }
  .cam-card-tags .chip { padding: .25rem .6rem; }
  .cam-card-tags .chip-dot::before { display: none; }
  .cam-card-desc { display: none; }
}
/* the long label ("See the XV2-21X") only where the card is wide enough to keep it on one line */
@media (max-width: 559px), (min-width: 1000px) and (max-width: 1179px) {
  .cam-btn-long { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .cam-btn-short { display: inline; }
}
.cam-lineup-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1.5rem;
  margin-top: clamp(1.25rem, .9rem + 1vw, 2rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--slate);
  font-weight: 500;
}


/* 3 Cloud managed ------------------------------------------------------------ */
.cam-cloud { position: relative; overflow: clip; }
.cam-cloud::before {
  /* the logo's loops, very quietly, behind the copy */
  content: "";
  position: absolute;
  left: -14rem;
  top: -10rem;
  width: 38rem;
  height: 38rem;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(136, 174, 62, 0) 64%, rgba(136, 174, 62, .10) 65%, rgba(136, 174, 62, 0) 66%,
      rgba(136, 174, 62, 0) 75%, rgba(136, 174, 62, .07) 76%, rgba(136, 174, 62, 0) 77%,
      rgba(136, 174, 62, 0) 86%, rgba(136, 174, 62, .05) 87%, rgba(136, 174, 62, 0) 88%,
      rgba(136, 174, 62, 0) 97%, rgba(136, 174, 62, .03) 98%, rgba(136, 174, 62, 0) 99%);
  pointer-events: none;
}
.cam-cloud-grid { position: relative; }
@media (min-width: 900px) { .cam-cloud-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.cam-cloud-copy { --flow: 1.25rem; }
.cam-cloud-copy > p { color: var(--fog); font-size: var(--fs-lead); line-height: 1.55; max-width: 32em; }
.cam-quote {
  margin: 1.75rem 0 0;
  padding: 1.35rem 1.5rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, .08);
}
.cam-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--white);
}
.cam-quote footer { margin-top: .85rem; font-size: .9375rem; color: var(--fog); }
.cam-cloud-shots { min-width: 0; }
.cam-cloud-shots .pills { margin-bottom: 1rem; }
.cam-shot { margin: 0; }
/* the crop is 639px wide: never let the frame upscale it much past 1:1 */
.cam-shot .frame { max-width: 44rem; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .75); }
.cam-shot img { width: 100%; height: auto; }
.cam-shot figcaption { margin-top: .9rem; font-size: 1rem; line-height: 1.5; color: var(--fog); max-width: 44em; }


/* 4 Model detail panels -------------------------------------------------------- */
/* Round 11: four different shapes, not one shell four times. XE3-4 = ceiling view +
   spec tiles, with the radio-mode switch and full specs in a disclosure; XV2-2X = copy
   beside a schedule diagram; XV2-21X = face on + with its bracket; XV2-23T = on the pole. */
.cam-range-inner { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.5rem); }
.cam-detail {
  display: grid;
  min-width: 0;
  border-radius: var(--radius-xl);
  overflow: clip;
  background: var(--bg);
  color: var(--fg);
}
.cam-detail-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  overflow: clip;
}
.cam-detail-copy {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
  padding: clamp(1.4rem, .8rem + 2.6vw, 3.5rem);
}
.cam-detail-copy h2 { font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); line-height: 1.08; }
.cam-detail-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg); max-width: 34em; }
.cam-model { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.035em; }
.cam-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.surface-paper .cam-tags .chip { background: var(--white); }
.cam-detail-actions { margin-top: .25rem; gap: .5rem 1.25rem; }

/* XE3-4: top view over circular rings (its coverage, seen from above) */
@media (min-width: 900px) {
  .cam-detail-xe3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
}
.cam-stage-top {
  min-height: clamp(17rem, 11rem + 18vw, 32rem);
  background: radial-gradient(52% 52% at 50% 50%, rgba(136, 174, 62, .16), rgba(136, 174, 62, 0) 70%);
}
.cam-rings-top {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(38rem, 125%);
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  overflow: visible;
}
.cam-stage-top img {
  position: relative;
  width: min(22rem, 62%);
  height: auto;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .5));
}
.cam-stats {
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: clip;
}
.cam-stats li { display: grid; align-content: start; gap: .3rem; min-width: 0; padding: 1rem 1.1rem 1.05rem; background: var(--bg); }
.cam-stat-v { font-size: clamp(1.375rem, 1.15rem + .7vw, 1.75rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--accent-text); }
.cam-stat-l { font-size: .9375rem; line-height: 1.4; color: var(--fg-muted); }
.cam-detail-note { font-size: 1rem; line-height: 1.55; color: var(--fg-muted); max-width: 36em; }
@media (max-width: 479px) {
  .cam-stats li { padding: .85rem .8rem .9rem; }
}

/* the disclosure: radio modes + the full spec rows, out of the way until asked for */
.cam-more { margin-top: .25rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cam-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 54px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--fg);
}
.cam-more > summary::-webkit-details-marker { display: none; }
.cam-more > summary:hover > span { text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.cam-more > summary .icon { width: 1.35rem; height: 1.35rem; flex: none; color: var(--accent-text); transition: transform .25s var(--ease-out); }
.cam-more[open] > summary .icon { transform: rotate(180deg); }
.cam-more-body { display: grid; gap: 1.1rem; padding: .25rem 0 1.25rem; }

/* radio mode: dual-band (2.4 + 5 + 5) to tri-band (2.4 + 5 + 6) */
.cam-radio {
  padding: 1rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
}
.cam-radio-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.cam-radio-title { font-weight: 600; color: var(--white); }
.cam-radio-switch { display: flex; gap: .35rem; padding: 3px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .06); }
.cam-radio-switch .pill { border-color: transparent; min-height: 44px; padding: .4rem .95rem; font-size: .9375rem; }
.no-js .cam-radio-switch { display: none; }
.cam-radio-slots {
  list-style: none;
  margin: .85rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
.cam-radio-slots li {
  display: grid;
  gap: .2rem;
  padding: .7rem .8rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out);
}
.cam-slot-n { font-size: .875rem; color: var(--fog); }
@media (max-width: 479px) { .cam-radio { padding: .85rem; } .cam-radio-slots li { padding: .6rem .55rem; } }
.cam-slot-band { display: grid; font-size: clamp(.9375rem, .85rem + .4vw, 1.125rem); color: var(--white); white-space: nowrap; }
.cam-slot-band > span { grid-area: 1 / 1; transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.cam-slot-flex { border-style: dashed !important; border-color: rgba(165, 193, 108, .5) !important; }
.cam-radio .b-tri, .cam-radio .n-tri { opacity: 0; }
.cam-radio .b-tri { transform: translateY(6px); }
.cam-radio .n-tri { display: none; }
.cam-radio[data-state="tri"] .b-dual { opacity: 0; transform: translateY(-6px); }
.cam-radio[data-state="tri"] .b-tri { opacity: 1; transform: none; color: var(--lime-300); }
.cam-radio[data-state="tri"] .n-dual { display: none; }
.cam-radio[data-state="tri"] .n-tri { display: inline; opacity: 1; }
.cam-radio[data-state="tri"] .cam-slot-flex { background: rgba(136, 174, 62, .16); border-style: solid !important; border-color: var(--lime-500) !important; }
.cam-radio-note { margin-top: .75rem; font-size: .9375rem; line-height: 1.5; color: var(--fog); min-height: 3em; }

/* spec rows (inside the disclosure) */
.cam-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  margin: 0;
  border-top: 1px solid var(--line);
}
.cam-specs > div { padding: .7rem 0; border-bottom: 1px solid var(--line); min-width: 0; }
.cam-specs dt { font-size: .875rem; color: var(--fg-muted); }
.cam-specs dd { margin: .1rem 0 0; font-weight: 500; line-height: 1.4; }

/* XV2-2X: copy beside the schedule diagram */
@media (min-width: 900px) {
  .cam-detail-xv2x { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; }
}
.cam-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.cam-ticks li { position: relative; padding-left: 2rem; line-height: 1.5; max-width: 34em; }
.cam-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--lime-ink-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.cam-warranty {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy-900);
  max-width: 36rem;
}
.cam-warranty .icon { width: 1.6rem; height: 1.6rem; margin-top: .05rem; flex: none; color: var(--lime-ink); }
.cam-warranty p { line-height: 1.5; }

.cam-sched {
  --who: 9.25rem;
  display: grid;
  gap: 1.1rem;
  min-width: 0;
  margin: 0 clamp(.6rem, .2rem + 1.5vw, 1.75rem) clamp(.6rem, .2rem + 1.5vw, 1.75rem);
  padding: clamp(1.1rem, .7rem + 1.4vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-1);
}
@media (min-width: 900px) { .cam-sched { margin: 1.75rem 1.75rem 1.75rem 0; } }
.cam-sched-head { display: flex; align-items: center; gap: clamp(.75rem, .4rem + 1.2vw, 1.5rem); }
.cam-sched-head img { width: clamp(6.5rem, 4.5rem + 6vw, 11rem); height: auto; flex: none; filter: drop-shadow(0 14px 14px rgba(7, 27, 49, .16)); }
.cam-sched-title { font-family: var(--font-display); font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.cam-sched-chart { position: relative; display: grid; gap: .8rem; padding-block: .35rem; }
.cam-sched-row { position: relative; z-index: 1; display: grid; grid-template-columns: var(--who) minmax(0, 1fr); align-items: center; gap: .75rem; }
.cam-sched-who { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; line-height: 1.25; }
.cam-sched-who .icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--lime-ink); }
.cam-sched-track {
  position: relative;
  height: 2.25rem;
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, #F1F4EF 0 6px, #E2E8DF 6px 12px);
}
.cam-sched-track i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--a);
  width: var(--w);
  min-width: 6px;
  border-radius: 6px;
  background: var(--lime-500);
  box-shadow: inset 0 0 0 1.5px var(--lime-ink-deep); /* 3:1+ edge against the striped track */
}
.cam-sched-ticks { position: absolute; z-index: 2; top: 0; bottom: 0; left: calc(var(--who) + .75rem); right: 0; pointer-events: none; }
.cam-sched-ticks span { position: absolute; top: 0; bottom: 0; left: var(--x); border-left: 2px dashed rgba(12, 43, 77, .55); }
.cam-sched-legend { display: flex; flex-wrap: wrap; gap: .45rem 1.25rem; font-size: .875rem; color: var(--slate); }
.cam-sched-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.cam-sched-legend span::before { content: ""; flex: none; width: 1.1rem; height: .8rem; border-radius: 3px; }
.cam-sched-legend .k-tx::before { background: var(--lime-500); box-shadow: inset 0 0 0 1.5px var(--lime-ink-deep); }
.cam-sched-legend .k-sleep::before { background: repeating-linear-gradient(135deg, #F1F4EF 0 3px, #D9E0D6 3px 6px); }
.cam-sched-legend .k-wake::before { width: 0; height: 1rem; border-radius: 0; border-left: 2px dashed rgba(12, 43, 77, .55); margin-inline: .5rem; }
.cam-sched figcaption { font-size: .9375rem; line-height: 1.55; color: var(--slate); }
@media (max-width: 559px) {
  .cam-sched { --who: 5.75rem; }
  .cam-sched-who { font-size: .875rem; }
  .cam-sched-who .icon { display: none; }
  .cam-sched-track { height: 2rem; }
}

/* the pair: XV2-21X (two views) and XV2-23T (on its pole), same stage height so the copy aligns */
.cam-pair { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.5rem); }
@media (min-width: 900px) { .cam-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cam-detail-half { grid-template-rows: auto 1fr; }
.cam-detail-half .cam-detail-stage { height: clamp(17rem, 12rem + 10vw, 22.5rem); }
.cam-stage-two {
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.25rem, .5rem + 3vw, 3rem);
  padding-bottom: clamp(1rem, .7rem + 1vw, 1.75rem) !important;
  background: radial-gradient(56% 56% at 50% 50%, var(--white), rgba(255, 255, 255, 0) 76%);
}
.cam-stage-two figure { margin: 0; display: grid; justify-items: center; gap: .7rem; }
.cam-stage-two img { width: auto; height: clamp(10.5rem, 7rem + 8vw, 15.5rem); filter: drop-shadow(0 22px 24px rgba(7, 27, 49, .16)); }
.cam-stage-two figure + figure img { height: clamp(9rem, 6rem + 7vw, 13.5rem); }
.cam-stage-two figcaption { font-size: .875rem; font-weight: 600; color: var(--slate); }
.cam-stage-pole {
  padding: 0 !important;
  background: radial-gradient(44% 50% at 58% 48%, rgba(136, 174, 62, .2), rgba(136, 174, 62, 0) 72%);
}
/* the pole runs out of the top of the card; the image is fully faded before the stage
   ends, so its shadow never meets the stage edge as a hard line */
.cam-stage-pole img {
  position: absolute;
  left: 58%;
  top: -4%;
  width: auto;
  height: 104%;
  transform: translateX(-50%);
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .5));
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 97%);
}
.cam-ip {
  position: absolute;
  left: clamp(.85rem, .5rem + 1.2vw, 1.75rem);
  top: clamp(.85rem, .5rem + 1.2vw, 1.75rem);
  display: grid;
  gap: .1rem;
  padding: .7rem .95rem .75rem;
  border-radius: var(--radius);
  background: rgba(12, 43, 77, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cam-ip .readout { font-size: clamp(1.5rem, 1.25rem + .8vw, 2rem); line-height: 1; color: var(--lime-300); }
.cam-ip span:last-child { font-size: .875rem; color: var(--fog); }
/* on a phone the stage is too narrow for the badge beside the unit; IP67 is in the chips and the fact rows */
@media (max-width: 559px) { .cam-ip { display: none; } }

/* ruled fact rows (XV2-21X, XV2-23T) */
.cam-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cam-facts li {
  position: relative;
  padding: .65rem 0 .65rem 1.4rem;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
  line-height: 1.45;
}
.cam-facts li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: 1.15em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-text);
}


/* 5 Comparison table ------------------------------------------------------------ */
.cam-compare-head { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.cam-table-wrap { background: var(--white); border-color: var(--rule); box-shadow: var(--shadow-1); }
.cam-table-wrap:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 3px; }
.cam-table { --table-min: 50rem; font-size: .9375rem; }
.cam-table-wrap > .cam-table { min-width: 50rem; }
.cam-table th, .cam-table td { padding: .95rem 1rem; vertical-align: middle; }
.cam-table thead th, .cam-table thead td { background: var(--white); border-bottom: 1px solid var(--rule); }
.cam-table thead th { text-align: center; width: 20%; padding-top: 1.4rem; }
.cam-table thead th a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  color: var(--navy-900);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.cam-table thead th img { width: auto; height: 4.75rem; max-width: 7.5rem; object-fit: contain; margin-bottom: .45rem; transition: transform .35s var(--ease-out); }
.cam-table thead th a:hover img { transform: translateY(-3px); }
.cam-table thead th .readout { font-size: 1.0625rem; }
.cam-table thead th a:hover .readout { text-decoration: underline; text-decoration-color: var(--lime-ink); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.cam-th-type { font-size: .8125rem; font-weight: 500; color: var(--slate); }
.cam-table tbody th {
  width: 17%;
  font-weight: 600;
  white-space: nowrap;
  color: var(--navy-900);
}
.cam-table tbody th > * { vertical-align: middle; }
.cam-table tbody th .icon { display: inline-block; width: 1.15rem; height: 1.15rem; margin-right: .6rem; color: var(--lime-ink); stroke-width: 1.75; }
.cam-table tbody td { text-align: center; line-height: 1.45; color: var(--navy-900); }
.cam-table tbody tr:nth-child(even) > * { background: #FAFBF9; }
/* keep the row labels in view when the table scrolls sideways */
.cam-table tbody th, .cam-table thead td { position: sticky; left: 0; z-index: 1; background: var(--white); }
.cam-table tbody tr:nth-child(even) > th { background: #FAFBF9; }
@media (min-width: 821px) { .cam-table tbody th, .cam-table thead td { position: static; } }
.cam-na { font-size: .8125rem; color: var(--slate); }
.cam-yes { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.cam-yes .icon { width: 1.05rem; height: 1.05rem; color: var(--lime-ink); stroke-width: 2.5; }
/* column highlight on hover (progressive: :has) */
.cam-table:has(tbody td:nth-child(2):hover) :is(td, th):nth-child(2),
.cam-table:has(tbody td:nth-child(3):hover) :is(td, th):nth-child(3),
.cam-table:has(tbody td:nth-child(4):hover) :is(td, th):nth-child(4),
.cam-table:has(tbody td:nth-child(5):hover) :is(td, th):nth-child(5) { background-color: var(--arc-20); }
.cam-table-hint { display: none; margin-top: .75rem; font-size: .875rem; color: var(--slate); }
@media (max-width: 820px) { .cam-table-hint { display: block; } }


/* 6 Why Cambium ------------------------------------------------------------------ */
.cam-why-grid { display: grid; gap: 2rem 5rem; }
@media (min-width: 900px) {
  .cam-why-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; }
  .cam-why-sticky { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}
.cam-why-sticky { --flow: 1.15rem; }
.cam-why-close p { color: var(--slate); max-width: 30em; }
.cam-why-close .btn-row { margin-top: 1.5rem; }
.cam-why-close-lg { margin-top: 1.5rem !important; }
.cam-why-close-sm { display: none; }
@media (max-width: 899px) {
  .cam-why-close-lg { display: none; }
  .cam-why-close-sm { display: block; padding: 1.25rem 1.25rem 1.35rem; border-radius: var(--radius-lg); background: var(--paper); }
  .cam-why-close-sm .btn-row { margin-top: 1rem; }
}
@media (max-width: 479px) { .cam-why-close .btn { flex: 1 1 100%; } }
.cam-why-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.cam-why-list li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1.1rem;
  row-gap: .35rem;
  padding-block: clamp(1.25rem, 1rem + .8vw, 1.75rem);
  border-top: 1px solid var(--rule);
}
.cam-why-n {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--navy-950);
  font-size: .9375rem;
}
/* the logo's five attenuation steps, one per reason */
.cam-why-list li:nth-child(1) .cam-why-n { background: var(--lime-500); }
.cam-why-list li:nth-child(2) .cam-why-n { background: var(--arc-80); }
.cam-why-list li:nth-child(3) .cam-why-n { background: var(--arc-60); }
.cam-why-list li:nth-child(4) .cam-why-n { background: var(--arc-40); }
.cam-why-list li:nth-child(5) .cam-why-n { background: var(--arc-20); }
.cam-why-list h3 { font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem); align-self: center; }
.cam-why-list p { color: var(--slate); max-width: 36em; }


/* 7 Enquiry --------------------------------------------------------------------- */
.cam-enquire-copy { --flow: 1.25rem; }
.cam-enquire-copy > p { color: var(--fog); max-width: 32em; }
.cam-contact { display: grid; gap: 0; margin: 1.75rem 0 0; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 26rem; }
.cam-contact > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.cam-contact dt { font-size: .875rem; color: var(--fog); }
.cam-contact dd { margin: 0; min-width: 0; }
.cam-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.cam-contact a:hover { text-decoration: underline; text-decoration-color: var(--lime-500); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.cam-survey-nudge {
  margin-top: 2rem !important;
  padding: 1.15rem 1.25rem .6rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  max-width: 30rem;
}
.cam-survey-nudge p { color: var(--fog); font-size: .9375rem; line-height: 1.55; }
.cam-survey-nudge strong { color: var(--white); font-weight: 600; }
.cam-form-card {
  min-width: 0;
  padding: clamp(1.15rem, .7rem + 2vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}
.cam-form-card .hint { color: var(--fog); }
.cam-form-small { font-size: .875rem; color: var(--fog); }
@media (max-width: 479px) {
  .cam-form-card .form-actions .btn { flex: 1 1 100%; }
}


/* 8 Reduced motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cam-rings .pulse { display: none; }
  .cam-stage-img { animation: none; transform: none; }
  .cam-rings { transform: translate(-50%, -50%); }
  .cam-card:hover, .cam-card:hover .cam-card-media img, .cam-card:hover .cam-card-btn .icon, .cam-table thead th a:hover img { transform: none; }
  .cam-slot-band > span, .cam-more > summary .icon { transition: none; }
}