/* Montserrat ships from Google Fonts as a single variable font covering the
   whole 100-900 axis, so one file serves every weight the site uses (400-800).
   Latin subset only, matching the characters the pages actually contain. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/css/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter, for the GrandSlam pages. Those two run their body copy in a narrower
   face than the rest of the site -- the live pages use Plus Jakarta Sans --
   and Inter is the closest thing already licensed and subsetted here, shared
   with the atsc3ca.com and silicondust.tv builds. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/css/inter-latin-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/css/inter-latin-600.woff2) format('woff2');
}

:root {
  --green: #8bc53e;        /* accent: h1, pill buttons, current nav item */
  --dark-green: #2c7c0e;   /* primary: nav links, table buttons, footer links */
  --heading: #54595f;      /* h2-h6 on light backgrounds */
  --text: #7a7a7a;         /* body copy */
  --ink: #333;             /* theme default, used where nothing overrides */
  --grey: #ddd;            /* the left end of the two grey section gradients */
  --warm-grey: #686f6b;    /* the platform strip under the home hero */
  --slate: #51565a;        /* shows around the home photo bands */
  --width: 1120px;         /* live runs a 1140px container with 10px widget
                              padding on each side; 1120px is the result */
}

* { box-sizing: border-box; }
/* Stop iOS and Android inflating text in wide blocks, as the live site does. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  /* Long file names and URLs in the support copy would otherwise push the
     page wider than a phone screen. */
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--dark-green); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 3px solid var(--dark-green); outline-offset: 3px; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 20; padding: 10px; background: #fff; }
.skip-link:focus { top: 10px; }

/* ---------------------------------------------------------------- header --
   The header has no background of its own. On inner pages that leaves it on
   white; on the home page the hero is pulled up underneath it (see .hero) and
   the black photo shows through, which is how the live site does it. The
   z-index keeps the header above that hero. */
.site-header {
  position: relative; z-index: 10;
  min-height: 86px;
  width: min(1140px, 100%); margin-inline: auto; padding: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, .05);
}
.logo { width: 200px; flex-shrink: 0; }
.logo img { width: 200px; height: 35px; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; }
.site-nav a, .nav-parent {
  display: block; padding: 15px;
  font-size: 16px; font-weight: 600; line-height: 1;
  color: var(--dark-green);
}
.site-nav a:hover, .nav-parent:hover { color: var(--green); text-decoration: none; }
.site-nav a[aria-current] { color: var(--green); }

/* Dropdowns. The three parents are labels rather than links -- on the live
   site they go nowhere -- so they are <span>s and the submenu opens on hover
   or on keyboard focus reaching a child link. */
.nav-item { position: relative; }
.nav-parent { cursor: default; }
.nav-parent::after {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
/* Closed with opacity, not visibility: a visibility:hidden element is dropped
   from the accessibility tree and cannot take focus, which put the submenu
   links out of reach of keyboards and crawlers and stopped :focus-within ever
   firing. pointer-events keeps the invisible panel from catching clicks. */
.nav-item .submenu {
  position: absolute; top: 100%; left: 0; z-index: 5;
  margin: 0; padding: 6px 0; min-width: 210px;
  list-style: none; background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.nav-item:hover .submenu,
.nav-item:focus-within .submenu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-item .submenu a { padding: 8px 18px; white-space: nowrap; font-weight: 600; }

/* Hamburger. Hidden on wide screens; js/nav.js is what gives it its job, so
   without scripting the nav is simply always open (see the 900px block). */
.nav-toggle {
  display: none; width: 44px; height: 40px; padding: 10px 8px;
  border: 0; background: none; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--dark-green); }
.nav-toggle span + span { margin-top: 5px; }

/* ------------------------------------------------------------ scaffolding */
.wrap { width: min(var(--width), calc(100% - 40px)); margin-inline: auto; }

/* Every content band. Live sets 100px top and bottom on the ordinary pages and
   drops to 75px below 1024px; the taller and tighter variants are the
   exceptions the home page and the newer pages use. */
.band { padding-block: 100px; }
.band-tall { padding-block: 150px; }
.band-short { padding-block: 50px; }
.band-flush { padding-block: 10px; }
.band-grey { background: var(--grey); }
.band-black { background: #000; color: #fff; }
.band-green { background: var(--green); color: #fff; }
/* The two-stop wash used behind the video, the DVR explainer and the device
   grid: grey on the left fading to white by the right edge. */
.band-wash { background: linear-gradient(90deg, var(--grey) 0%, #fff 100%); }

/* Elementor stacks widgets with a 20px gap and gives paragraphs their own
   14.4px bottom margin. Reproducing both keeps the vertical rhythm right
   without putting margins on every element by hand. */
.stack > * + * { margin-top: 20px; }
.stack > h2 + *, .stack > h3 + *, .stack > h4 + *, .stack > h5 + *, .stack > h6 + * { margin-top: 20px; }

/* --------------------------------------------------------------- headings */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1; color: var(--heading); }
h1 { font-size: 40px; color: var(--green); }
h2 { font-size: 32px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 18px; }

/* --------------------------------------------------------- body copy ------
   The classic pages run their body copy at 15px/600 in grey -- heavier than
   most sites, but that is what the live pages do. The pages built more
   recently (Contact Support, FCC, the ATSC3-CA release) use the theme default
   of 16px/400 instead; .plain switches to it. */
p, ul, ol { margin: 0 0 14.4px; }
.prose, .prose p, .prose li { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--text); }
.plain, .plain p, .plain li { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--text); }
.prose ul, .prose ol, .plain ul, .plain ol { padding-left: 22px; }
.prose li, .plain li { margin-bottom: 0; }
.prose > *:last-child, .plain > *:last-child { margin-bottom: 0; }
.lead { font-size: 21px; font-weight: 500; line-height: 1.5; }
.small { font-size: 14px; font-weight: 500; line-height: 1.5; }
main a { overflow-wrap: anywhere; }
.center { text-align: center; }
/* Contact Support opens on the darker green rather than the usual accent. */
.h1-dark { color: var(--dark-green); }
/* Pages that use the h1 as running copy rather than a section title: the press
   release and the apartment page, in the body grey a step lighter than the
   standard h1. */
.h1-muted { font-weight: 500; color: var(--text); line-height: 1.2; }
/* The hairline Elementor draws between a section heading and its contents. */
.rule { height: 0; margin: 6px 0; border: 0; border-top: 1.6px solid rgba(221, 221, 221, .61); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- buttons */
.button {
  display: inline-block; padding: 12px 24px;
  background: var(--green); color: #fff; border-radius: 50px;
  font-size: 18px; font-weight: 700; line-height: 1; text-transform: uppercase;
}
.button:hover { background: var(--dark-green); color: #fff; text-decoration: none; }
/* The apartment page's form link is left on the theme's default red button. */
.button-form {
  display: inline-block; padding: 12px 24px;
  background: #ce1407; color: #fff; border-radius: 3px;
  font-size: 15px; font-weight: 500; line-height: 1;
}
/* The "What can I Watch? >" style: a plain green text link at body-copy size. */
.button-link { font-size: 21px; font-weight: 500; color: var(--green); }
.button-link:hover { color: #fff; }
/* Squared-off dark green button, used in the product comparison table. */
.button-small {
  display: inline-block; padding: 10px 20px;
  background: var(--dark-green); color: #fff; border-radius: 3px;
  font-size: 14px; font-weight: 700; line-height: 1;
}
.button-small:hover { background: var(--green); color: #fff; text-decoration: none; }

/* ---------------------------------------------------------------- footer --
   Black band. The two icon lists sit in the first and third of three equal
   columns inside a rounded, hairline-bordered panel; the middle column is
   empty on the live site and is left empty here so the social list keeps its
   position two thirds across. */
.site-footer { background: #000; color: #fff; padding: 30px 25px 24px; }
.footer-panel {
  width: min(1140px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 49px;
  padding: 15px 20px; border: 1.6px solid #fff; border-radius: 10px;
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.footer-list li + li { margin-top: 5px; }
.footer-social { grid-column: 3; }
.footer-icon { flex: none; width: 20px; height: 20px; fill: #fff; }
.site-footer a { color: #fff; }
.footer-legal { width: min(var(--width), 100%); margin: 20px auto 0; }
.footer-legal p { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; }
.footer-copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 14px !important; }
.footer-terms a { color: var(--dark-green); }

/* =========================================================== home page === */

/* The hero is a full-viewport photo. The negative top margin slides it up
   under the transparent header so the artwork starts at the top of the page;
   90px is the header height plus its 4px of shadow spread. */
.hero {
  margin-top: -90px;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 90px 10px 0;
  background: #000 url(/img/home-hero.jpg) center left / cover no-repeat;
  color: #fff;
}
/* Live puts the copy in a 545px column at the right of the full-width row,
   with the artwork in the photo filling the space to its left. */
.hero-inner {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 545px; gap: 20px;
}
.hero-text { grid-column: 2; padding: 10px; display: flex; flex-direction: column; gap: 30px; }
.hero-text img { width: 394px; height: 109px; }
.hero-text h1 { font-size: 50px; font-weight: 800; line-height: 1; color: #fff; }
.hero-text p { margin: 0; font-size: 28px; font-weight: 400; line-height: 1.5; }

/* Strip of platform logos directly under the hero. */
.platform-strip { background: var(--warm-grey); padding: 15px 0; }
.platform-strip ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px;
}
.platform-strip li { width: 95px; display: flex; justify-content: center; }
.platform-strip img { max-height: 79px; width: auto; }

/* The video plays inside the TV of a device composite, so the iframe is placed
   against the artwork rather than centred in the band. It is positioned in
   percentages of the stage, which keeps it on the screen at every size.

   Live runs three treatments, reproduced below: the artwork at natural size
   and centre-cropped above 1024, scaled to fit in a fixed 570px band down to
   768, then a single-device composite on phones. */
.video-band {
  display: flex; justify-content: center; overflow: hidden;
  padding-block: 156.5px; background: linear-gradient(90deg, #ddd 0%, #fff 100%);
}
.video-stage {
  position: relative; flex: none; width: 1394px; height: 487px;
  background: url(/img/video-devices.png) center / contain no-repeat;
}
.video-stage iframe,
.video-stage .video-play {
  position: absolute; border: 0;
  left: 28.156%; top: 2.772%; width: 50.574%; height: 81.519%;
}

/* The poster that stands in for the player until it is clicked. The glyph is
   drawn rather than loaded so the band costs one request, for the poster. */
.video-play { display: block; overflow: hidden; background: #000; }
.video-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-play::before,
.video-play::after { content: ""; position: absolute; top: 50%; left: 50%; }
.video-play::before {
  width: 68px; height: 48px; margin: -24px 0 0 -34px;
  border-radius: 14px; background: rgba(0, 0, 0, .62);
  transition: background .2s ease;
}
.video-play::after {
  margin: -11px 0 0 -8px;
  border: 11px solid transparent; border-right: 0; border-left: 18px solid #fff;
}
.video-play:hover::before,
.video-play:focus-visible::before { background: var(--green); }
@media (max-width: 1024px) {
  .video-band { padding-block: 0; min-height: 570px; align-items: center; }
  .video-stage { width: 100%; height: auto; aspect-ratio: 1394 / 487; }
}
/* The stage takes the small artwork's own ratio so the video can sit on its
   top edge, which is where live puts it at every width. */
@media (max-width: 767px) {
  .video-band { min-height: 450px; padding-block: 50px; }
  .video-stage {
    width: calc(100% - 30px); height: auto; aspect-ratio: 529 / 349;
    background-image: url(/img/video-devices-sm.png);
  }
  .video-stage iframe,
  .video-stage .video-play {
    left: 1.449%; top: 0; width: 97.101%; height: auto; aspect-ratio: 16 / 9;
  }
}

/* The two channel-logo ribbons run edge to edge, wider than the container. */
.channels { margin-top: 25px; }
.channels img { width: 100%; }
.channels img + img { margin-top: 0; }

/* Heading style shared by the photo bands and the white sections between
   them: heavy, 42px, some uppercased in the source copy. */
.home-title { font-size: 42px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.home-title-plain { font-size: 42px; font-weight: 800; line-height: 1.25; text-transform: none; }
/* On the home page these headings are set solid. */
.photo-band .home-title-plain, .how-band .home-title-plain { line-height: 1; }

/* Full-bleed photo bands. min-height 75vh is what makes them fill most of the
   screen as you scroll; the copy sits in one half of the container or is
   centred across it, depending on where the photo leaves room. */
.photo-band {
  min-height: 75vh; padding-block: 150px;
  display: flex; align-items: center;
  background-position: center center; background-repeat: no-repeat; background-size: cover;
  color: #fff;
}
/* Headings follow the band rather than the site default, so the one band with
   a light photo (.photo-band-everyone) keeps the grey heading colour and the
   rest go white. */
.photo-band h2 { color: inherit; }
.photo-band .wrap { width: min(1140px, calc(100% - 40px)); }
.photo-band-live { background-image: url(/img/band-live-tv.jpg); }
.photo-band-everyone { background-color: #ced2d1; background-image: url(/img/band-everyone.jpg); color: var(--heading); }
.photo-band-cord { background-color: var(--slate); background-image: url(/img/band-cut-the-cord.jpg); }
.photo-band-catchup { background-color: var(--slate); background-image: url(/img/band-catchup.jpg); }
.photo-band-consoles { background-color: var(--slate); background-image: url(/img/band-consoles.jpg); }
/* Which half of the band the copy occupies. Widgets inside are spaced like
   everything else on the site, at Elementor's 20px. */
.band-copy { width: 570px; max-width: 100%; }
.band-copy-right { margin-left: auto; }
.band-copy-mid { width: 850px; max-width: 100%; margin-inline: auto; }
.band-copy > * + *, .band-copy-mid > * + *, .band-copy-centre > * + * { margin-top: 20px; }
.band-copy p, .band-copy-mid p { font-size: 21px; font-weight: 500; line-height: 1.5; margin-bottom: 0; }
.band-copy-centre { text-align: center; }
.band-copy-centre img { margin-inline: auto; box-shadow: 0 5px 10px rgba(0, 0, 0, .25); }
.band-copy-centre h2 { font-size: 60px; font-weight: 400; line-height: 1.25; color: #fff; }

/* The "How does it work?" carousel: a row of 404px screenshots, two and a bit
   of them in view, with a green chevron either side of the band. js/carousel.js
   drives it; with scripting off the first slides simply stay put. */
.carousel { position: relative; }
/* One slide at a time, with the neighbours peeking 12px into the side padding. */
.carousel-track { display: flex; overflow: hidden; width: 1120px; max-width: 100%; margin-inline: auto; gap: 36px; padding-inline: 48px; }
/* The run of headings under the carousel is spaced differently to the stack default. */
.how-band .carousel + h2 { margin-top: 47px; }
.how-band h2 + .lead { margin-top: 10px; }
.how-band .lead + p { margin-top: 24px; }
.how-band .stack > p:last-child { margin-bottom: 0; }
.carousel-track img { flex: 0 0 1024px; width: 1024px; height: 576px; }
.carousel button {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 25px; height: 25px; padding: 0;
  border: 0; cursor: pointer;
  background: none; color: var(--green); font-size: 34px; line-height: 25px;
}
.carousel button:hover { opacity: .7; }
.carousel .prev { left: 0; }
.carousel .next { right: 0; }

/* The DVR explainer: grey wash with a popcorn tub anchored near the bottom.
   575px from the left and 115% down is where live puts it -- the tub is meant
   to be half out of the band. */
/* The closing DRM note runs a little wider than the usual container. */
.drm-note { padding-block: 10px 24px; }
.drm-note .plain { width: min(1140px, calc(100% - 40px)); margin-inline: auto; }

/* Each band on the home page sets its own depth. */
.how-band { padding-block: 160px; }
.band-green { padding-block: 120px 154px; }
.apps { padding-block: 70px 80px; }
.products-band { padding-block: 120px 136px; }

.dvr-explainer {
  padding-block: 170px 158px;
  background:
    url(/img/popcorn.png) 50px 107% / 250px auto no-repeat,
    linear-gradient(90deg, var(--grey) 0%, #fff 100%);
}
.dvr-explainer .home-heading {
  max-width: 850px; margin-inline: auto;
  font-size: 42px; font-weight: 500; line-height: 1; text-align: center;
}
.dvr-columns {
  display: grid; grid-template-columns: repeat(2, 410px); gap: 30px;
  justify-content: center; margin-top: 50px; text-align: justify;
}
.dvr-columns p { font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--heading); }
.dvr-columns p + p { margin-top: 14px; }

/* Four numbered steps on the green band. */
.dvr-heading { font-size: 42px; font-weight: 500; line-height: 1; color: #fff; text-align: center; }
.steps { display: grid; grid-template-columns: repeat(4, 238.7px); gap: 41.6px; justify-content: center; margin-top: 70px; }
.step { text-align: center; }
.step img { margin: 0 auto 10px; }
.step h3 { font-size: 18px; font-weight: 600; line-height: 1; color: #fff; }
.step p { margin: 10px 0 0; font-size: 14px; font-weight: 400; line-height: 1.5; }

/* App download band, a second and darker green. */
.apps { background: #0b934b; color: #fff; text-align: center; }
.apps h2 { font-size: 28px; font-weight: 700; line-height: 1.25; color: #fff; }
.apps .apps-second { margin-top: 50px; }
.apps ul { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; }

/* Product comparison table. Rows alternate white and #f9f9f9 and the model
   names are green; everything but the first column is centred. */
.compare-heading { font-size: 28px; font-weight: 700; line-height: 1.25; }
.compare { width: 850px; max-width: 100%; margin: 34px auto 0; border-collapse: collapse; }
.compare td { padding: 8px; font-size: 14.4px; font-weight: 700; text-align: center; color: #111; background: #fff; }
/* Hairline between the body rows; the picture row has none. */
.compare tr + tr td { border-top: .8px solid var(--grey); }
/* The home page's "Shop Now" buttons sit taller than the ones on Buy. */
.products-band .button-small { padding: 13px 20px; }
.compare tr:nth-child(even) td { background: #f9f9f9; }
/* The picture row is given a little more room than the rest. */
.compare tr:first-child td { padding: 11px 8px; }
.compare td:first-child { font-weight: 400; text-align: left; }
.compare img { margin: 0 auto; }
.compare .model { color: #8ebe48; }

/* Device grid: a heading and blurb per platform, then the hardware shots with
   small capitalised captions underneath. */
.devices h2 { font-size: 28px; font-weight: 500; line-height: 1.25; text-align: center; }
.devices { padding-block: 120px 147px; background: linear-gradient(90deg, #ddd 0%, #fff 100%); }
.device-group { margin-top: 30px; text-align: center; }
.device-group + .device-group { margin-top: 67px; }
.device-group h3 { font-size: 18px; font-weight: 700; line-height: 1.25; }
.device-group > p { max-width: 1095px; margin: 27px auto 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--heading); }
.device-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 40px; margin-top: 24px; }
/* Column width varies with how many products a group has. */
.device { width: 233px; }
.device-row-android .device { width: 178px; }
.device-row-apple .device { width: 165px; }
.device img { margin: 0 auto 20px; }
.device span { display: block; font-size: 12px; font-weight: 600; line-height: 1; color: var(--heading); }

/* ==================================================== other page layouts == */

/* Live in an apartment: a wider run-up to the form button than the stack's
   default, and the title's own 8px lead. */
.apartment-photo img { margin-inline: auto; }
.apartment-cta h1 { margin-top: 8px; }
.apartment-cta .stack > p { margin-top: 36px; }

/* Buy: the regions stack, each a heading, a rule and a row of retailer cards
   -- a logo with its shop name underneath, the whole card a link. The retailer
   artwork is white on transparent, so each card sits on a green tile; that is
   what makes the logos readable. */
.buy-band { padding-block: 110px; }
.prose .buy-intro { font-weight: 400; }
/* Region blocks: heading, "Buy Online", a hairline, then the cards. */
.buy-band .stack > h4 + p { margin-top: 10px; }
.buy-band .stack > p { margin-bottom: 0; }
.buy-band .rule { margin: 4px 0 18px; border-top-width: 2px; }
.buy-band .buy-grid + h4 { margin-top: 30px; }
.prose .buy-grid,
.buy-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 9.5px;
}
.buy-grid a {
  display: block; height: 100%; padding: 10px;
  background: var(--green); border-radius: 5px;
  text-align: center; color: #fff;
}
.buy-grid a:hover { background: var(--dark-green); text-decoration: none; }
.buy-grid a:hover span { text-decoration: underline; }
.buy-grid img { width: 100%; height: auto; }
.buy-grid span { display: block; font-weight: 600; }

/* About: a photo banner across the top, then the office shot floating beside
   the opening paragraphs. */
/* GPL: deep list indent, tight gap into each list, wider run-up to a heading
   that follows a bare paragraph. */
.gpl-page { padding-block: 110px 124px; }
.gpl-page .stack > ul { padding-left: 40px; }
.gpl-page .stack > p + ul { margin-top: 14px; }
.gpl-page .stack > ul + h4 { margin-top: 19px; }
.gpl-page .stack > p + h4 { margin-top: 34px; }

/* TECH downloads: the same deep list indent as the Downloads page. */
.tech-page { padding-block: 110px 124px; }
.tech-page .stack > ul { padding-left: 40px; }

/* IRC channels. */
.irc-page { padding-block: 110px 124px; }

/* Terms and privacy: the legal copy is justified and set at the regular weight
   rather than the site's semibold body. Paragraphs run together at the
   paragraph gap and open out again before each sub-heading. */
.legal-page { padding-block: 110px 124px; }
.legal-page .prose, .legal-page .prose p { font-weight: 400; text-align: justify; }
.legal-page .prose h1, .legal-page .prose h4 { text-align: start; }
.legal-page .stack > p + p { margin-top: 14.4px; }
.legal-page .stack > p + h4 { margin-top: 34.4px; }
/* The privacy policy opens on a semibold paragraph. */
.legal-page .prose p.legal-intro { font-weight: 600; }

/* WebDAV CDN: a deeper band, and the two paragraphs run together at the
   paragraph gap rather than the stack's default. */
.webdav-page { padding-block: 160px 174px; }
.webdav-page .stack > p + p { margin-top: 14.4px; }

/* Downloads: no separator rules; the spacing before each heading does the
   dividing, and it varies with what precedes it. */
.downloads-page { padding-block: 110px 124px; }
.downloads-page .stack > h1 + h2 { margin-top: 71px; }
.downloads-page .stack > .download-row + h2,
.downloads-page .stack > p + h2 { margin-top: 85px; }
.downloads-page .stack > ul + h2 { margin-top: 70px; }
.downloads-page .stack > .download-info + h2 { margin-top: 85px; }
.downloads-page .stack > .download-row + .download-row { margin-top: 34px; }
.downloads-page .stack > p + ul { margin-top: 14px; }
.downloads-page .stack > ul + p { margin-top: 37px; }
.downloads-page .stack > ul { padding-left: 40px; }
/* The release links are set on a very tight leading. */
.download-info p { line-height: 9px; margin-bottom: 14.4px; }

/* Contact Support: one band, a centred intro that runs slightly wider than the
   body, and green buttons carrying a small icon. */
.support-page { padding-block: 10px 34px; }
.support-intro { width: min(1140px, calc(100% - 40px)); margin-inline: auto; }
.support-intro + .wrap { margin-top: 25px; }
.support-page .wrap p { font-size: 15px; }
.support-page .stack > p + p { margin-top: 14px; }
.support-page .stack > .support-cta + p { margin-top: 20px; }
.support-page .wrap.stack > p + h1 { margin-top: 34px; }
.button-support {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 12px 24px; background: var(--green); color: #fff;
  border-radius: 3px; font-size: 15px; font-weight: 500; line-height: 1;
}
.button-support:hover { background: var(--dark-green); color: #fff; text-decoration: none; }
.button-icon { flex: none; width: 15px; height: 15px; fill: currentColor; }

/* Contact page: a wider run-up to each sub-heading than the stack's default.
   (Not .contact-band -- that is the panel on the MDU and Government pages.) */
.contact-page { padding-block: 110px 124px; }
.contact-page .stack > p + h4 { margin-top: 34px; }
.contact-page .stack > p + p { margin-top: 14px; }

.about-band { padding-block: 100px 120px; }
.about-band .wrap { width: min(1140px, calc(100% - 40px)); }
/* A shading overlay sits over the photo, anchored to its bottom-left. */
.about-banner {
  height: 600px;
  background:
    url(/img/about-banner-overlay.png) left bottom / contain no-repeat,
    url(/img/about-banner.jpg) center / cover no-repeat;
}
/* The banner sits tight to the heading; the copy below is inset from it. */
.about-band .stack > .about-banner + h3 { margin-top: 20px; }
.about-band .stack > h3 + .about-intro { margin-top: 40px; }
.about-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) 530px; gap: 40px;
  align-items: start; padding-inline: 20px;
}

/* Downloads: each app store's badge sits above its own links, both running the
   full width of the column, which is how the live page stacks them. The 20px
   gaps are Elementor's widget spacing and the 14.4px between links is its
   paragraph spacing -- each link is a paragraph there, not a list item. */
.download-row + .download-row { margin-top: 20px; }
.download-row img { width: 150px; height: auto; }
.download-row ul { list-style: none; margin: 20px 0 0; padding: 0; }
.download-row li { margin-bottom: 14.4px; }
.download-row li:last-child { margin-bottom: 0; }

/* Warranty checker. The device-id field runs the full width of the column. */
.warranty-page { padding-block: 110px 124px; }
.warranty-page .stack > p + form { margin-top: 34px; }
/* A solid hairline divides the form from the warranty terms. */
.warranty-page .rule { border-top-color: var(--grey); margin: 0; }
.warranty-page .stack > form + .rule { margin-top: 49px; }
.warranty-page .stack > .rule + p { margin-top: 34px; }
#warrantyForm input[type=text] {
  box-sizing: border-box; font: inherit; font-size: 16px; line-height: 24px;
  padding: 8px 16px; width: 100%;
  border: 1.6px solid var(--grey); border-radius: 3px; background: #fff; color: #000;
}
#warrantyForm input[type=submit] {
  font: inherit; font-size: 16px; font-weight: 400; line-height: 1.5; cursor: pointer;
  padding: 8px 16px; border: 0; border-radius: 3px;
  background: var(--dark-green); color: #fff;
}
#warrantyForm > p { margin: 0; }
#warrantyForm > p + p { margin-top: 14px; }
/* No reserved height -- live lets the result push the page down when it appears. */
#warrantyResult { font-weight: 600; }
#warrantyResult:empty { margin: 0; }

/* Changelogs: a long run of "Release NNNN:" headings, each with nested notes.
   Kept narrow and tight so a very long page stays readable. */
.changelog-page { padding-block: 110px; }
.changelog h4 { margin-top: 20px; color: var(--heading); }
.changelog ul { margin: 0; padding-left: 40px; }
.changelog > ul { margin-top: 20px; }
.changelog > ul + ul { margin-top: 0; }

/* FCC applications. These notices are pasted from the filed documents, so they
   keep their own typeface and link colour rather than the site's. */
.fcc-page { padding-block: 0; }
.fcc-notices { width: min(1140px, calc(100% - 40px)); margin-inline: auto; }
.notice { padding: 10px 0; font-family: 'Times New Roman', serif; }
.notice p {
  margin: 0 0 14.4px; font-size: 16px; font-weight: 400; line-height: 1.5;
  color: var(--text); text-align: left;
}
/* The heading and the station line are centred; the notice body is not. */
.notice p:nth-child(-n+2) { text-align: center; }
.notice a { color: #467886; }

/* --------------------------------------------------------- TECH tuners --
   The product shot sits on a faint watermark; the four capabilities go on a
   green panel; each model then gets its feature lists on a dark photo band
   and its regional specification in three columns on a light one. */
/* The overlay is a small green flourish pinned to the top-left corner, not a
   full-bleed image -- it is left at its own size, as on the live page. */
/* Each band on the TECH page sets its own depth. */
.tech-hero { background: url(/img/tech-hero-overlay.png) left top no-repeat; padding-block: 160px; }
.tech-hero img { width: min(1120px, 100%); height: auto; margin-inline: auto; }
.tech-intro { padding-block: 60px 46px; }
/* These two bands run wider than the site's usual container. */
.tech-features-band .wrap, .tech-specs .wrap { width: min(1140px, calc(100% - 40px)); }
.tech-features-band { padding-block: 0 150px; }
.tech-model { padding-block: 160px; }
.tech-model .tech-logo + h2 { margin-top: 30px; }
.tech-model h2 + img { margin-top: 19px; }
.use-case p { margin-bottom: 0; }
.use-case h3:last-child { margin-bottom: 0; }
.use-case li { font-size: 14px; line-height: 1.5; }
/* The closing list sits a little tighter under the last row of products. */
.use-cases > .use-case:last-child { margin-top: -10px; }
.tech-regional { padding-block: 160px 136px; }
.tech-regional .spec-footer { margin-top: 53px; }
.tech-uses { padding-block: 160px 146px; }
.tech-compare { padding-block: 160px 196px; }
.tech-title { font-size: 48px; font-weight: 500; line-height: 1; color: var(--green); }
.tech-strap { margin-top: 10px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--heading); }
/* The four feature boxes sit on a green card whose bottom corners are rounded;
   it runs a little wider than the usual container. */
.tech-features {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 45px;
  width: min(1140px, 100%); margin-inline: auto;
  background: var(--green); color: #fff; padding: 35px 25px 49px;
  border-radius: 0 0 25px 25px;
}
.tech-features .feature { text-align: left; }
.tech-features .feature img { margin: 0 0 10px; }
.tech-features .feature p { margin-top: 5px; }
.tech-features .feature h3 { color: var(--heading); }
.feature img { width: 60px; height: 60px; margin: 0 auto 14px; }
.feature h3 { font-size: 20px; font-weight: 600; line-height: 1.25; }
.feature p { margin: 10px 0 0; font-size: 14px; font-weight: 500; line-height: 1.5; }
.tech-logo { margin-inline: auto; max-width: min(517px, 100%); }

/* Feature lists on the dark band behind each model. */
.tech-specs {
  padding-block: 150px; color: #fff;
  background: var(--slate) url(/img/tech-bg.jpg) center / cover no-repeat;
}
.tech-specs h2 { color: #fff; }
.tech-specs .spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; align-items: start; }
.tech-specs ul { margin: 20px 0 40px; padding-left: 40px; font-size: 21px; font-weight: 500; line-height: 1.5; }
.tech-specs ul:last-child { margin-bottom: 0; }

.spec-title { font-size: 21px; font-weight: 500; color: var(--green); }
.spec-columns { display: grid; grid-template-columns: minmax(0, 550fr) minmax(0, 570fr); gap: 30px; margin-top: 0; }
.spec-columns ul { padding-left: 40px; }
.spec-columns li { font-size: 16px; font-weight: 500; line-height: 1.5; }
.spec-columns h6 { margin-bottom: 26px; font-size: 16px; font-weight: 500; line-height: 1.2; color: var(--heading); }
.spec-columns ul + h6 { margin-top: 54px; }
.spec-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.flags { display: flex; gap: 10px; margin: 10px 0; }
.flags img { width: 60px; height: 60px; }
.os-icons { display: flex; gap: 10px; margin-bottom: 20px; }
.os-icons img { width: 60px; height: 60px; }
.compare-wide { width: 100%; max-width: 1120px; }

.use-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
/* This call to action is set in sentence case, unlike the site's other buttons. */
/* These two buttons are the one place the accent runs as a gradient. */
.spec-footer .button { text-transform: none; background: linear-gradient(80deg, var(--green) 0%, var(--dark-green) 100%); }
.use-case img { width: 150px; height: 150px; margin-bottom: 10px; }
.use-case h3 { margin-bottom: 10px; font-size: 20px; font-weight: 600; color: var(--green); }

/* GrandSlam MDU and Government Education: a darker, more marketing-led layout
   than the rest of the site, with its own hero and alternating photo rows. */
/* The hero photo is almost entirely dimmed out: a black layer at 0.9 sits over
   it, so what shows is a suggestion of the stadium rather than the picture.
   The negative top margin pulls the band up under the transparent header, the
   same trick the home page hero uses. */
.mdu-hero {
  position: relative; margin-top: -100px; padding-block: 315px 195px;
  background: #000 url(/img/mdu-hero.jpg) left top / cover no-repeat;
  color: #fff;
}
.mdu-hero::before { content: ''; position: absolute; inset: 0; background: #000; opacity: .9; }
.mdu-hero > * { position: relative; z-index: 1; }

/* Most photos on this page sit on a green tile that shows as a 10px band on
   two sides -- top and right where the photo is on the right of its row, top
   and left where it is on the left. The baseball shot is rounded but unframed. */
.mdu-page .framed {
  background: #8dc840; border: .8px solid #fff; border-radius: 30px;
  box-sizing: content-box;
}
.mdu-page .framed-tr { padding: 10px 10px 0 0; }
.mdu-page .framed-tl { padding: 10px 0 0 10px; }
.mdu-page .rounded { border: .8px solid #fff; border-radius: 30px; }
/* The baseball shot has no frame; instead a green bar sits behind it and
   shows as a tab beyond its right edge. */
/* Shrink-wrapped, so the bar below is offset from the photo's own edge rather
   than from the grid column, which is wider. */
.mdu-page .mdu-barred { position: relative; width: fit-content; }
.mdu-page .mdu-barred::after {
  content: ''; position: absolute; z-index: -1;
  top: 50%; right: -25px; width: 50px; height: 80%;
  transform: translateY(-50%);
  background: #8dc840; border-radius: 30px;
}
.mdu-hero h1 { font-size: 30px; font-weight: 600; color: #fff; line-height: 1.25; }
.mdu-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.split-reverse > *:first-child { order: 2; }
.split h2 { font-size: 45px; font-weight: 600; line-height: 1.15; color: #000; }
.checklist { list-style: none; margin: 20px 0 0; padding: 0; }
.checklist li { position: relative; padding-left: 30px; margin-bottom: 14px; }
.checklist li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 40px; }
.card h3 { font-size: 28px; font-weight: 700; line-height: 1.25; color: #000; }
.card p { margin-top: 12px; }
/* Four steps with an arrow between each pair; a flex row rather than a grid so
   the arrows can sit in the gaps and drop out when the steps stack. */
.how-steps { display: flex; align-items: center; gap: 20px; margin-top: 77px; }
.how-step { flex: 1; text-align: center; }
.how-arrow { flex: none; width: 55px; height: 56px; }
.how-step .num { font-size: 15px; font-weight: 700; color: var(--green); }
.how-step h3 { margin-top: 8px; font-size: 22px; font-weight: 600; color: #000; }
/* A faint circuit pattern in the top-left corner, at its own size rather than
   stretched across the band. */
.mdu-devices { background: url(/img/mdu-devices-bg.png) left top no-repeat; }
.mdu-section-title { font-size: 45px; font-weight: 600; line-height: 1; color: inherit; }
.mdu-calculations { margin: 40px auto 0; }
.contact-block { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: center; }
.contact-title { font-size: 18px; font-weight: 600; letter-spacing: 2px; color: inherit; }
.contact-list { list-style: none; margin: 16px 0 0; padding: 0; }
.contact-list li { margin-bottom: 6px; }

/* ------------------------------------------------- GrandSlam MDU page ----
   This page is laid out on a much wider band than the rest of the site --
   roughly 1300px of content rather than 1120 -- and runs its own type scale
   and a red call-to-action button instead of the green pill. Everything here
   is scoped to .mdu-page so the rest of the site keeps the house style. */
.wrap-wide { width: min(1300px, calc(100% - 40px)); margin-inline: auto; }
/* The Apartment & Condo band is wider again than the rest of the page. */
.wrap-xwide { width: min(1400px, calc(100% - 40px)); margin-inline: auto; }
.band-xtall { padding-block: 120px 130px; }
/* Each band sets its own depth; the live page varies them section by section. */
.mdu-devices { padding-block: 120px 90px; }
.mdu-ruled { padding-block: 110px; }
.mdu-how { padding-block: 100px 124px; }
.mdu-why { padding-block: 120px; }

.mdu-page, .mdu-page p, .mdu-page li { color: #000; }
/* Body copy on these pages is Inter, not the site's Montserrat -- the
   headings, the hero tagline, the closing line and the ticked lists stay
   Montserrat, matching how the live page mixes the two. */
/* The copy column of every split row -- and the hero's logo/button/tagline
   stack -- separates its blocks by 40px, not by paragraph margins. */
.mdu-page .split > div { display: flex; flex-direction: column; gap: 40px; }
.mdu-page .split > div > p, .mdu-page .split > div > ul { margin-bottom: 0; }

.mdu-page p, .mdu-page .contact-list { font-family: 'Inter', sans-serif; }
.mdu-page .mdu-tagline, .mdu-page .mdu-closing { font-family: 'Montserrat', sans-serif; }
.mdu-page p { font-size: 18px; font-weight: 400; line-height: 1.6; }
/* Photos in the devices row carry a drop shadow as well as the green tile. */
.mdu-page .shadowed { box-shadow: 0 0 10px rgba(0, 0, 0, .5); }
.mdu-page .mdu-calculations { max-width: min(1366px, 100%); }
.mdu-page .split h2 { font-size: 50px; font-weight: 600; line-height: 1; }
/* Centred section heads: 20px under the heading, then a longer run down to the
   button beneath. */
.mdu-page .mdu-section-title { margin-bottom: 20px; }
.mdu-page .mdu-intro { max-width: 970px; margin: 0 auto 31px; font-size: 20px; font-weight: 400; }
.mdu-page .mdu-intro-narrow { max-width: 713px; margin-bottom: 0; }
/* All four cards share a height rather than equalising row by row. minmax
   rather than 1fr: 1fr sizes the rows from free space, which here came out
   shorter than the content and let the cards spill past the grid. */
.mdu-page .cards { grid-auto-rows: minmax(259px, auto); margin-top: 56px; }
.mdu-page .mdu-closing { max-width: 1170px; margin: 60px auto 0; font-size: 22px; font-weight: 600; }
.mdu-page .mdu-tagline { font-size: 30px; font-weight: 500; line-height: 1.4; color: #fff; }
.mdu-page .card p { font-size: 20px; }
.mdu-page .cards { gap: 40px 40px; }

/* Red button, 3px corners -- the live page's call to action. */
.button-mdu {
  display: inline-block; padding: 17px 25px;
  background: #ce1407; color: #fff; border-radius: 3px;
  font-size: 16px; font-weight: 500; line-height: 1;
}
.button-mdu:hover { background: #a51005; color: #fff; text-decoration: none; }
.button-mdu-small { padding: 12px 24px; font-size: 15px; }

/* Ticked list. The marker is the same check-circle icon the live page uses,
   drawn as a background image rather than 12 copies of the svg in the markup. */
.mdu-page .checklist li {
  padding-left: 34px; padding-bottom: 18px; margin-bottom: 0;
  font-size: 16px; font-weight: 500; color: #333;
}
/* Only the "Why Choose" list is ruled: a hairline under each item, more room
   around it, and nothing after the last one. */
.mdu-page .checklist li:last-child { padding-bottom: 0; }
.mdu-page .checklist-ruled li { padding-bottom: 21px; margin-bottom: 21px; border-bottom: .8px solid #ddd; }
.mdu-page .checklist-ruled li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.mdu-page .checklist li::before {
  content: ''; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px;
  background: url(/img/check-circle.svg) center / 20px 20px no-repeat;
}

/* Hairlines between bands: solid under the two picture-and-list sections,
   dashed and slightly inset above "Why Choose". */
.mdu-devices, .mdu-ruled { border-bottom: .8px solid rgba(104, 104, 104, .2); }
.mdu-why { width: 96%; margin-inline: auto; border-top: .8px dashed #000; }

/* The band carries a lavender wash that fades out towards the bottom. The
   Government Education page uses the same treatment. */
.mdu-how, .ge-how {
  border-radius: 40px;
  background: linear-gradient(#f6f5fa 0%, rgba(238, 238, 252, 0) 100%);
}

/* How It Works. Each step is two stacked panels: a cyan one tilted 10 degrees
   and, sitting upright on top of it, a frosted panel holding the content. The
   tilt is what makes the cyan show as a diamond behind each card. The counter-
   rotation on the inner panel is what puts the content back level. */
.mdu-page .how-step {
  flex: none; width: 260px; min-height: 246px; border-radius: 15px;
  background: linear-gradient(49.64deg, rgba(33, 218, 253, .6) 19.57%, rgba(33, 218, 253, 0) 112.42%);
  transform: rotate(-10deg);
}
.mdu-page .how-card {
  height: 100%; min-height: 246px; padding: 30px; border-radius: 15px;
  box-shadow: 0 10px 30px rgba(12, 60, 84, .2);
  border: .8px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .02);
  backdrop-filter: blur(10px); transform: rotate(10deg);
  display: flex; flex-direction: column; text-align: left;
}
/* Step mark on the left, number on the right. */
.mdu-page .how-card-head { display: flex; align-items: center; justify-content: space-between; }
.mdu-page .how-card-head img { width: 40px; height: 40px; }
.mdu-page .how-card .num {
  font-size: 37px; font-weight: 700; line-height: 1.2;
  color: transparent; -webkit-text-stroke: 1px rgba(0, 0, 0, .2);
}
.mdu-page .how-card h3 { margin-top: auto; font-size: 22px; font-weight: 600; color: #000; }

/* The four feature cards put a green badge beside the copy rather than above
   it. The artwork inside is white, so the badge is what makes it visible. No
   size is set on the image: each icon keeps the natural size its width/height
   attributes give it (50x50 through 63x69), as on the live cards. */
/* The soft drop shadow is what gives these cards their edge -- they have no
   background or border of their own. */
.mdu-page .card-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 30px; border-radius: 30px;
  box-shadow: 0 30px 40px 15px rgba(11, 14, 18, .1);
}
.mdu-page .card-icon {
  flex: none; padding: 15px 15px 16px;
  background: #8dc840; border-radius: 5px;
}
/* The four icons have different natural proportions; the live page squares
   them all off so the green badges come out the same size. */
.mdu-page .card-icon img { width: 39px; height: 39px; }
.mdu-page .card h3 { margin-bottom: 12px; }

/* Contact. A hairline rule across the band, then a pale panel rounded at its
   top corners only -- it runs into the footer. Three columns inside: heading
   and buttons, the artwork, then the details with their orange icons. */
.contact-rule { height: 0; margin: 0 auto; border: 0; border-top: .8px solid #000; width: min(1320px, calc(100% - 40px)); }
.contact-panel {
  width: min(1320px, calc(100% - 40px)); margin: 50px auto 0; padding: 80px;
  background: #f6f5fb; border-radius: 30px 30px 0 0;
}
.mdu-page .contact-block { grid-template-columns: 334px minmax(0, 1fr) 299px; gap: 20px; align-items: center; }
.mdu-page .contact-title { font-size: 18px; font-weight: 600; text-transform: uppercase; }
.mdu-page .contact-division { margin-top: 14px; font-size: 18px; font-weight: 600; }
.mdu-page .contact-list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding-bottom: 10.5px; font-size: 18px; font-weight: 400;
}
.contact-icon { flex: none; width: 18px; height: 18px; margin-top: 4px; fill: #e04927; }
.mdu-page .contact-block .button-mdu { display: inline-block; padding: 17px 25px; }

/* Government Education runs the middle of the page on black. */
/* Government Education. The hero runs deeper than the MDU one, and the middle
   of the page is a single black band carrying four white panels. */
.ge-hero { padding-block: 315px 195px; }
.ge-how { padding-block: 100px 124px; }
.ge-dark {
  padding-block: 9px 124px;
  background: #000 url(/img/ge-band-bg.png) 50% 100% no-repeat;
}
/* A faint graphic sits behind the heading block. */
/* These two run 10px wider than the card rows on each side. */
.ge-head, .ge-demand { margin-inline: -10px; }
.ge-head {
  padding: 100px 10px 50px;
  background: url(/img/ge-mask-group.png) 50% 0 / 65% auto no-repeat;
}
.ge-cta { margin-top: 44px; }
.ge-dark h2, .ge-dark h3 { color: #fff; }
.ge-dark, .ge-dark p, .ge-dark li { color: #fff; }
.ge-title { font-size: 45px; font-weight: 600; line-height: 1.4; }
/* The little mark sits against the left edge of the band, not centred. */
.ge-mark { margin: -18px auto 0 0; }
.mdu-page .ge-intro {
  max-width: 845px; margin: 6px auto 0;
  font-size: 20px; font-weight: 500; line-height: 1.2;
}
.mdu-page .ge-cta-title {
  margin-top: 0; font-size: 32px; font-weight: 500; line-height: 1.2; color: var(--text);
}
.mdu-page .ge-cta-title + p { margin-top: 37px; }
.ge-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 30px; }
/* Each panel carries an illustration in its bottom right corner -- the deep
   bottom padding is the room it needs. */
.ge-card { padding: 35px 35px 150px; background: #fff bottom right no-repeat; border-radius: 25px; }
.ge-cta + .ge-cards .ge-card:first-child { background-image: url(/img/ge-card-1.png); }
.ge-cta + .ge-cards .ge-card:last-child { background-image: url(/img/ge-card-2.png); }
.ge-demand + .ge-cards .ge-card:first-child { background-image: url(/img/ge-card-3.png); }
.ge-demand + .ge-cards .ge-card:last-child { background-image: url(/img/ge-card-4.png); }
.mdu-page .ge-card h3 {
  margin-bottom: 19px; font-size: 27px; font-weight: 600; line-height: 1.4; color: #000;
}
/* Inter runs a shade wider than the original's Plus Jakarta Sans -- enough to
   push a couple of these lines over. A hair of negative tracking holds them. */
.mdu-page .ge-card p {
  margin-bottom: 14px; font-size: 20px; font-weight: 400; line-height: 1.5;
  letter-spacing: -.012em; color: #000;
}
.mdu-page .ge-card p + p { margin-top: 14px; }
/* On Demand Viewing: icon and copy on the left, the diagram on the right. */
/* The whole row sits on an orange-to-green panel, with the diagram dropped to
   its bottom edge and the copy centred beside it. */
.ge-demand {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  box-sizing: border-box; min-height: 395px; margin-top: 28px; padding: 10px 10px 0;
  background: url(/img/ge-demand-pattern.png) 0 0 no-repeat,
              linear-gradient(282.07deg, #ff7b51 -17.6%, #8dc840 92.78%);
  border-radius: 30px;
}
.ge-demand > img { align-self: end; }
.ge-demand + .ge-cards { margin-top: 42px; }
.ge-demand-copy { display: flex; align-items: flex-start; gap: 10px; padding-left: 50px; }
.ge-demand-copy > div { max-width: 504px; }
.ge-demand-icon { flex: none; width: 71px; height: 71px; }
.ge-demand > img { margin-right: 40px; }
.ge-demand-title { margin-bottom: 10px; font-size: 30px; font-weight: 600; line-height: 1.4; }
.mdu-page .ge-demand-copy p { font-size: 20px; font-weight: 500; line-height: 1.5; }
/* The copy column here is taller than the photo, and the photo stays at the top. */
.ge-why .split { align-items: start; }
.ge-why .checklist { margin-top: 14px; }
.ge-dark .mdu-closing { margin-top: 49px; }
/* No rule and no gap above this one -- the panel is the whole band. */
.contact-panel-flush { margin-top: 0; }
.mdu-page .ge-contact { grid-template-columns: 314px minmax(0, 1fr) 279px; }
/* This photo is narrower than its column, so it needs centring. */
.mdu-page .ge-contact > img { margin-inline: auto; }

/* Forgelink hero chevron pointing down at the sign-up form, in a hairline ring. */
.chevron {
  display: block; width: fit-content; margin: 40px auto 0; padding: 10px;
  border: 1.6px solid #fff; border-radius: 50%;
}
.chevron svg { display: block; width: 20px; height: 20px; fill: #fff; }

/* Broadcasters CDN: two black hero bands with a grid of near-black feature
   cards between them, each card carrying the AV Send mark. The first hero is
   pulled up under the transparent header, as on the home and MDU pages. */
/* Both black bands are a full 1000px tall with their row centred. */
.cdn-hero {
  display: flex; align-items: center; min-height: 1000px; padding-block: 0;
  background: #000; color: #fff;
}
.cdn-hero-top { margin-top: -90px; }
.cdn-hero .wrap { width: min(1140px, calc(100% - 40px)); }
.cdn-hero .split { grid-template-columns: 672px 448px; gap: 20px; align-items: center; }
.cdn-hero .split > * { padding-inline: 10px; }
.cdn-hero-2 .split { grid-template-columns: 448px 672px; }
/* The card grid and the contact band sit on a half-strength grey wash. */
.cdn-wash { background: rgba(221, 221, 221, .5); }
.cdn-hero h2 { font-size: 60px; font-weight: 800; line-height: 1; color: #fff; }
.cdn-hero p { margin-top: 20px; font-size: 28px; font-weight: 400; line-height: 1.25; }
/* The wordmark is cropped to a band rather than shown at its own proportions. */
.cdn-wordmark { width: 428px; max-width: 100%; height: 80px; object-fit: cover; margin-bottom: 20px; }
.cdn-band-title { padding-block: 10px; }
.cdn-band-strap { padding-block: 18px 36px; }
.cdn-title { font-size: 80px; font-weight: 600; line-height: 1; color: #0a0a0a; }
.cdn-strap { font-size: 24px; font-weight: 500; line-height: 1.2; color: var(--text); }
.cdn-section-title { font-size: 42px; font-weight: 700; line-height: 1; color: #000; text-align: center; }
.cdn-features-band { padding-block: 95px 85px; }
.cdn-features-band .wrap, .cdn-band-title .wrap, .cdn-band-strap .wrap { width: min(1140px, calc(100% - 40px)); }
.cdn-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.cdn-feature { background: #020202; color: #fff; padding: 35px 30px; border-radius: 10px; }
.cdn-feature img { width: 24px; height: 24px; margin-bottom: 20px; }
.cdn-feature h3 { margin-bottom: 20px; font-size: 24px; font-weight: 600; line-height: 1.25; color: #fff; }
.cdn-feature p { font-size: 17px; font-weight: 400; line-height: 1.25; color: #fff; }
.cdn-feature p:last-child { margin-bottom: 0; }

/* Contact block: a black card of Silicondust details, then a white partner card. */
.cdn-contact { padding-block: 84px 85px; }
.cdn-contact .wrap { width: min(1140px, calc(100% - 40px)); }
.cdn-card { margin-inline: 10px; padding: 25px 0; border-radius: 10px; }
.cdn-contact .contact-list li { margin-bottom: 5px; font-size: 16px; line-height: 1.23; }
.cdn-contact .contact-list a { font-size: 18px; line-height: 1.78; }
.cdn-card-dark .contact-list { margin-top: 6px; }
.cdn-card + .cdn-card { margin-top: 40px; }
.cdn-card-dark { background: #000; color: #fff; }
.cdn-card-light { background: #fff; padding-bottom: 35px; }
.cdn-partner-logo .rule { margin: 12px 0; }
.cdn-card-dark .cdn-card-inner { width: 256px; margin: 0 116px 0 auto; }
.cdn-card-dark .contact-list li, .cdn-card-dark .contact-list a { color: #fff; }
/* Pill button with the orange wash used on this page only. */
.button-flyer {
  display: inline-flex; align-items: center; gap: 18px; white-space: nowrap;
  padding: 15px 40px; border-radius: 100px; color: #fff;
  font-size: 18px; font-weight: 500; line-height: 1;
  background: linear-gradient(#ee6829 0%, #ff9430 100%);
}
.button-flyer .button-icon { width: 18px; height: 18px; }
.button-flyer:hover { color: #fff; text-decoration: none; opacity: .9; }
.cdn-partner { display: grid; grid-template-columns: 586px 453px; gap: 81px; align-items: start; }
.cdn-partner-logo { text-align: center; }
.cdn-partner-logo img { margin: 0 auto; }

/* The WordPress page title, on the press release and the menu-parent pages. */
.page-header { width: min(1140px, calc(100% - 40px)); margin-inline: auto; }
.entry-title {
  margin: 8px 0 16px; font-size: 40px; font-weight: 500; line-height: 1.2;
  color: var(--ink);
}

/* Press release (ATSC3-CA). The release is set as running copy: muted grey
   headings and the tight paragraph leading of the original document. */
/* 20px of clear space follows the release, before the footer. */
.atsc3-page { padding-block: 18px 24px; margin-bottom: 20px; }
.atsc3-page .wrap { width: min(1140px, calc(100% - 40px)); }
.atsc3-page h2 { font-size: 32px; font-weight: 500; line-height: 1.2; color: var(--text); }
.atsc3-page .stack > h1 + p { margin-top: 16px; }
.atsc3-page .stack > p + .press-logos { margin-top: 95px; }
.atsc3-page .stack > .press-logos + h2 { margin-top: 38px; }
.atsc3-page .stack > h2 + p { margin-top: 15px; }
.atsc3-page .stack > p + p { margin-top: 14.4px; }
.press-logos {
  display: grid; grid-template-columns: repeat(2, 550px); gap: 20px;
  align-items: start; justify-content: start;
}
.press-logos img { width: 550px; max-width: 100%; height: auto; }

/* Forgelink: banner over a grey band with the mailing-list form. Like the home,
   MDU and CDN heroes, the black band is pulled up under the header. */
.forgelink-hero {
  margin-top: -90px; padding-block: 287.7px 199.1px;
  background: #000; color: #fff; text-align: center;
}
.forgelink-hero img {
  width: 800px; height: 350px; margin-inline: auto;
  object-fit: cover; border-radius: 40px;
}
.forgelink-hero h1 { margin-top: 20px; font-size: 60px; font-weight: 800; line-height: 60px; color: #fff; }
.signup { background: #54545c; color: #fff; }
.signup { padding-block: 85px; text-align: center; }
.signup-lead { margin-bottom: 34.4px; font-size: 28px; line-height: 42px; }
/* The form sits on a white card, so it keeps the ordinary body colours. */
.signup-card {
  width: 600px; max-width: 100%; margin-inline: auto; padding: 50px 35px;
  background: #fff; border-radius: 40px; color: var(--ink); text-align: left;
}
.signup form { padding-top: 20px; }
/* Padding rather than a margin, so the gap to the next label is not collapsed
   away by the label's own lead. */
.field { padding-bottom: 15.9px; }
.field-row { display: grid; grid-template-columns: 158.1fr 183.8fr 158.1fr; gap: 15px; }
.signup label {
  display: block; margin: 5px 0 3px; padding-bottom: 10px;
  font-size: 16px; font-weight: 400; line-height: 16px; color: var(--ink);
}
.signup .asterisk { position: relative; top: 5px; font-size: 24px; line-height: 24px; color: #e85c41; }
/* The text is inset with an indent rather than padding, as the live form is. */
.signup input, .signup select {
  box-sizing: border-box; width: 100%; height: 42px; padding: 8px 0; text-indent: 15px;
  font: inherit; font-size: 16px; line-height: 24px; border: 0; border-radius: 3px;
  background: #ebebeb; color: #444;
}
.signup select { padding: 5px 0; border: 1.6px solid #ebebeb; border-radius: 5px; }
.signup-note { margin: 0 0 10px; font-size: 21px; font-weight: 400; line-height: normal; }
.signup .hidden-field { position: absolute; left: -9999px; }
.signup input.signup-submit {
  width: 100%; height: 40px; margin-top: 17px; padding: 0 22px; cursor: pointer;
  font: inherit; font-size: 21px; font-weight: 400; line-height: 32px;
  border: 0; border-radius: 5px; color: #fff;
  background: linear-gradient(to right, #e85057 0%, #e88165 100%);
}
.signup-privacy { margin: 10px 0 0; font-size: 11px; line-height: 15px; }

/* -------------------------------------------------- entrance animations --
   Elementor fades its headings and text in as they scroll into view.
   js/reveal.js adds .is-visible; without scripting the rules below never
   apply and everything is simply visible from the start.

   Plain .reveal only touches opacity, so it can be put on an element that
   already carries a transform of its own (the tilted How It Works cards).
   .reveal-up and .reveal-zoom add movement for elements that have none.
   .reveal-d1 to .reveal-d4 stagger a row of cards the way Elementor's
   animation_delay does. */
.js-reveal .reveal { opacity: 0; }
.js-reveal .reveal-up { transform: translateY(30px); }
.js-reveal .reveal-zoom { transform: scale(.9); }
.js-reveal .reveal.is-visible {
  opacity: 1;
  transition: opacity .8s ease var(--reveal-delay, 0s), transform .8s ease var(--reveal-delay, 0s);
}
.js-reveal .reveal-up.is-visible, .js-reveal .reveal-zoom.is-visible { transform: none; }
.reveal-d1 { --reveal-delay: .1s; }
.reveal-d2 { --reveal-delay: .2s; }
.reveal-d3 { --reveal-delay: .3s; }
.reveal-d4 { --reveal-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
  .js-reveal .reveal.is-visible { transition: none; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1024px) {
  .band { padding-block: 75px; }
  .band-tall, .photo-band { padding-block: 75px; }
  .photo-band { min-height: 50vh; }
  .hero { min-height: 55vh; }
  .steps, .buy-grid { grid-template-columns: repeat(2, 1fr); }
  .cdn-features, .use-cases, .spec-columns { grid-template-columns: repeat(2, 1fr); }
  .how-steps { flex-wrap: wrap; gap: 30px; }
  .how-step { flex: 1 1 40%; }
  .tech-specs { padding-block: 75px; }
  .cdn-title { font-size: 52px; }
}
@media (max-width: 900px) {
  /* The full menu is too tall to sit in the header at this width, so it goes
     behind the hamburger and stacks. Hover has no equivalent on touch either,
     so the submenus are shown inline under their parent rather than on hover. */
  .site-header { flex-wrap: wrap; padding: 10px 16px; }
  .nav-toggle { display: block; }
  .site-nav {
    flex-direction: column; align-items: stretch;
    width: 100%; order: 3; padding-bottom: 8px;
  }
  .js-nav .site-nav { display: none; }
  .js-nav .site-nav.is-open { display: flex; }
  .site-nav a, .nav-parent { padding: 10px 4px; }
  .nav-item { display: block; }
  .nav-parent::after { display: none; }
  .nav-item .submenu {
    position: static; opacity: 1; pointer-events: auto; transform: none;
    min-width: 0; margin: 0 0 4px 16px; padding: 0;
    background: none; box-shadow: none;
  }
  .nav-item .submenu a { padding: 6px 4px; font-size: 14px; }
  /* Once the hero is a single column the copy can no longer sit beside the
     artwork, so the photo is pinned to the top at its natural aspect ratio
     (16:9 -> 56.25% of the width) and the copy is padded clear of it onto
     plain black, the way the live site handles the same breakpoint. */
  .hero {
    margin-top: 0; min-height: 0;
    padding: calc(56.25vw + 24px) 16px 40px;
    background-size: 100% auto; background-position: center top;
  }
  .hero-inner, .about-intro { grid-template-columns: minmax(0, 1fr); }
  .hero-text { grid-column: 1; }
  .hero-text h1 { font-size: 38px; }
  .hero-text p { font-size: 21px; }
  .split, .mdu-hero-inner, .contact-block,
  .spec-footer, .tech-specs .spec-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .split-reverse > *:first-child { order: 0; }
  .split h2, .cdn-hero h2, .mdu-section-title { font-size: 34px; }
  .cdn-title { font-size: 36px; }
  .cdn-strap, .cdn-hero p { font-size: 20px; }
  .cards, .buy-grid, .tech-features { grid-template-columns: minmax(0, 1fr); }
  .tech-features { padding: 30px 24px; }
  .tech-title { font-size: 32px; }
  .home-title, .home-title-plain, .dvr-explainer .home-heading { font-size: 30px; }
  .band-copy-centre h2 { font-size: 36px; }
  .footer-panel { grid-template-columns: minmax(0, 1fr); }
  .footer-social { grid-column: 1; }
}
@media (max-width: 600px) {
  .band, .band-tall, .photo-band { padding-block: 50px; }
  /* On a phone the hero artwork is scaled to 160% so the product is still
     legible, which makes it 90% of the viewport width tall. */
  .hero { padding-top: calc(90vw + 24px); background-size: 160% auto; }
  .steps, .cdn-features, .use-cases, .spec-columns { grid-template-columns: minmax(0, 1fr); }
  .how-steps { flex-direction: column; }
  .how-arrow { transform: rotate(90deg); }
  .device-row { gap: 24px; }
  .site-footer { padding: 24px 16px; }
  .compare td { padding: 8px 6px; font-size: 12px; }
  .forgelink-hero h1 { font-size: 34px; }
  .dvr-explainer { background-image: none; background: linear-gradient(90deg, var(--grey) 0%, #fff 100%); }
  .dvr-columns { grid-template-columns: minmax(0, 1fr); text-align: left; }
}

@media (max-width: 1024px) {
  .mdu-page .split h2 { font-size: 38px; }
  .band-xtall { padding-block: 75px; }
}
@media (max-width: 900px) {
  .mdu-page .contact-block { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mdu-page .mdu-tagline { font-size: 24px; }
  .mdu-page .split h2 { font-size: 32px; }
  /* The header stacks at this width, so the hero no longer tucks under it. */
  .mdu-hero, .forgelink-hero { margin-top: 0; padding-block: 60px; }
  .cdn-hero-top { margin-top: 0; padding-top: 60px; }
  .mdu-page .card-row { flex-direction: column; }
  /* Two-column layouts built on fixed pixel widths have to stack here or they
     push the page wider than the screen. */
  .cdn-hero .split, .cdn-partner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .press-logos { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .ge-cards { grid-template-columns: minmax(0, 1fr); }
  /* The four-column table is the one thing that cannot stack, so it is tightened
     instead and allowed to scroll on its own if it still will not fit. */
  .compare { font-size: 11px; }
  .compare td { padding: 6px 3px; }
}