/* Cable industry layouts and components. Load after site.css.
   Brand tokens, navigation, footer, buttons and closing CTA stay in site.css. */

.industry-page .hero h1 { text-wrap: balance; }
.industry-page .hero-card { min-height: 0; }

.industry-page main > section.panel-shell {
  margin: 0; overflow: visible; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.industry-page .scene-fallback { display: grid; min-height: 320px; margin: 0; padding: 32px; place-items: center; color: var(--fg-muted); }

.industry-page .fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.industry-page .fit-card {
  color: var(--charcoal); background: var(--white); min-height: 0;
  padding: clamp(24px, 3vw, 32px); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.industry-page .fit-card-orange { background: var(--orange); }
.industry-page .fit-label {
  display: block; margin: 0; padding-bottom: 20px;
  border-bottom: 1px solid var(--border-strong);
  font-size: 20px; font-weight: 400; line-height: 1.3; letter-spacing: -.02em;
}
.industry-page .fit-card ul { margin: 12px 0 0; padding: 0; list-style: none; }
.industry-page .fit-card li {
  display: flex; align-items: flex-start; gap: 13px; padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 18px; font-weight: 400; line-height: 1.4;
}
.industry-page .fit-card li > span { display: block; }
.industry-page .fit-card li:last-child { border-bottom: 0; padding-bottom: 0; }
.industry-page .fit-card li small { display: block; margin-top: 5px; color: #454545; font-size: 16px; font-weight: 400; line-height: 1.5; }
.industry-page .fit-card-orange li { border-color: var(--border-strong); }
.industry-page .fit-card-orange li small { color: inherit; }
.industry-page .fit-card .fit-check {
  display: grid; flex: 0 0 20px; place-items: center;
  width: 20px; height: 20px; margin-top: 3px; border-radius: 50%;
  color: var(--charcoal); background: rgba(22,22,22,.08);
}
.industry-page .fit-check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }


.industry-page .video-head { max-width: none; }
.industry-page .video-facade,
.industry-page .native-video {
  display: block; width: 100%; max-width: 780px; aspect-ratio: 16 / 9;
  margin-inline: auto; padding: 0; border: 0; border-radius: var(--radius-md);
  background: var(--charcoal); box-shadow: var(--shadow-md);
}
.industry-page .video-facade { position: relative; overflow: hidden; cursor: pointer; }
.industry-page .video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.industry-page .video-facade:hover img { transform: scale(1.02); }
.industry-page .video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--orange); color: var(--white);
  box-shadow: 0 10px 30px rgba(22,22,22,.35); transition: transform .25s;
}
.industry-page .video-facade:hover .video-play { transform: translate(-50%, -50%) scale(1.07); }

@media (min-width: 981px) {
  .industry-page .hero h1 { font-size: clamp(40px, 5.625vw, 72px); }
}
@media (max-width: 960px) {
  .industry-page .hero-copy { max-width: 760px; }
  .industry-page .hero-card { width: min(620px, 100%); }
}
@media (max-width: 760px) {
  .industry-page .fit-grid { grid-template-columns: 1fr; }
  .industry-page .fit-label { font-size: 18px; }
  .industry-page .fit-card li { font-size: 16px; }
  .industry-page .fit-card li small { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .industry-page .video-facade img, .industry-page .video-play { transition: none; }
  .industry-page .video-facade:hover img { transform: none; }
}

/* ── Daily rate chart ─────────────────────────────────────────────────────
   Wholesale rates rising and falling across the day against Cable's flat
   rate. Shared by every industry landing page; the phase labels below the
   axis are the only part a page supplies for its own audience. */
/* Hospitality-only electricity-rate visual. */

.hero-card-head { border-bottom: 1px solid var(--border); justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; display: flex; }

.card-label { color: var(--fg-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; font-size: 10px; font-weight: 500; display: block; }

.comparison-showcase { flex-direction: column; min-height: 550px; display: flex; }

.scene-copy h2 { letter-spacing: -0.035em; margin: 0px 0px 16px; font-size: clamp(22px, 2.15vw, 29px); font-weight: 400; line-height: 1.04; }

.comparison-footer { border-top: 1px solid var(--border); justify-content: space-between; align-items: flex-end; gap: 14px; min-height: 45px; margin-top: 15px; padding-top: 14px; font-size: 9px; display: flex; }

.comparison-footer strong { color: var(--orange); font-size: 11px; font-weight: 600; }

.rate-day-heading { padding-top: 19px; }

.rate-day-heading h2 { margin-bottom: 14px; }

.rate-day-chart { border: 1px solid var(--border); background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 48px, rgba(7, 7, 7, 0.055) 48px, rgba(7, 7, 7, 0.055) 49px), linear-gradient(rgba(246, 246, 246, 0.6), rgba(255, 255, 255, 0.95)); border-radius: 12px; height: 238px; position: relative; overflow: hidden; }

.market-rate-bars { align-items: flex-end; gap: 5px; display: flex; position: absolute; inset: 25px 15px 58px 42px; }

.market-rate-bars i { transform-origin: center bottom; min-width: 3px; animation: hourly-rate-pulse 4.8s var(--ease) infinite both; background: linear-gradient(rgba(51, 51, 51, 0.78), rgba(51, 51, 51, 0.13)); border-radius: 4px 4px 1px 1px; flex: 1 1 0%; }

.cable-day-line { z-index: 3; background: var(--orange); border-radius: 999px; height: 4px; position: absolute; bottom: 98px; left: 39px; right: 14px; box-shadow: rgba(252, 109, 39, 0.46) 0px 0px 13px; }

.cable-day-line span { background: var(--orange); color: rgb(255, 255, 255); white-space: nowrap; border-radius: 999px; padding: 5px 8px; font-size: 9px; font-weight: 600; position: absolute; bottom: 9px; right: 3px; }

.day-phases { grid-template-columns: repeat(5, 1fr); gap: 4px; display: grid; position: absolute; bottom: 13px; left: 38px; right: 12px; }

.day-phases span { color: var(--fg-muted); text-align: center; white-space: nowrap; font-size: 8px; }

.comparison-footer .saving-success { color: var(--success); align-items: center; gap: 6px; display: inline-flex; }

@media (width <= 760px) {
  .comparison-showcase { min-height: 560px; }
}

@media (width <= 760px) {
  .comparison-footer { flex-direction: column; align-items: flex-start; gap: 4px; }
}

.chart-simple .slim-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }

.chart-simple .slim-head .card-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; }

.chart-simple .rate-day-heading { padding-top: 10px; margin-bottom: 14px; }

.chart-simple .rate-day-heading h2 { font-size: clamp(20px, 2.3vw, 24px); }

.chart-simple .rate-day-chart { height: 282px; }

.chart-simple .market-rate-bars { inset: 44px 15px 44px 18px; }

.chart-simple .cable-day-line { left: 15px; bottom: 92px; }

.chart-simple .day-phases { left: 14px; bottom: 10px; }

.chart-simple .day-phases span { font-size: 9px; }

.market-chart-label { position: absolute; top: 13px; left: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: var(--fg-muted); }

.market-chart-label i { width: 10px; height: 10px; border-radius: 3px; background: var(--fg-muted); display: inline-block; }

.chart-simple .cable-day-line span { font-size: 10px; padding: 5px 10px; }

.chart-simple .footer-chips { flex-direction: row; justify-content: space-between; align-items: center; margin-top: 16px; min-height: 0px; }

@keyframes hourly-rate-pulse {
  0%, 55%, 100% { opacity: 0.44; transform: scaleY(0.84); }
  14%, 30% { opacity: 1; transform: scaleY(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .market-rate-bars i { animation: none; }
}