/* ==========================================================================
   Mac Smart TV — conversion & legibility fixes
   Drop-in override. Load AFTER assets/css/styles.css:
     <link rel="stylesheet" href="assets/css/fixes.css">
   Changes nothing structural. Safe to remove by deleting the one link tag.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The remote cursor stops covering the thing you're about to click.
   app.js adds .remote-hover whenever the pointer is over a link, button or
   price card. styles.css currently answers that by scaling the remote UP 8%
   and brightening it — so it is largest and loudest exactly on top of every
   call to action. Fade it out instead; it still plays everywhere else.
   -------------------------------------------------------------------------- */
.cursor-glow.remote-hover{
  opacity:0 !important;
  transition:opacity .13s ease-out, transform .13s ease-out;
}
.cursor-glow{
  transition:opacity .18s ease-out, transform .18s ease-out;
}

/* --------------------------------------------------------------------------
   2. Headline contrast on the orange hero.
   White on #0062f5 measures ~2.2:1 — below the 4.5:1 minimum and the reason
   the pricing headline reads as a smudge. Black on the same orange is ~7.5:1,
   and black-on-orange is already the brand's own pairing.
   -------------------------------------------------------------------------- */
.orange-hero .scene-copy h1,
.orange-hero .scene-copy h2{
  color:#111 !important;
  text-shadow:none;
}
.orange-hero .scene-copy p,
.orange-hero .scene-copy .lede{
  color:#1a4f9e !important;
  opacity:1 !important;
}
.orange-hero .eyebrow{
  background:#111 !important;
  color:#fff !important;
}
/* Buttons on orange need a hard edge or they float */
.orange-hero .btn.light{
  border:2px solid #111;
}

/* --------------------------------------------------------------------------
   3. Content that never appears if JavaScript hiccups.
   .reveal starts at opacity:0 and only becomes visible when app.js adds
   .visible. If that script fails to run, the page renders blank. Guarantee
   the content for anyone who can't or doesn't get the animation.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important;}
}
.no-js .reveal{opacity:1 !important; transform:none !important;}

/* --------------------------------------------------------------------------
   4. Inner-page heroes stop burying the content.
   The hero runs ~1,150px tall on every page, so on Package Pricing the prices
   sit a full screen and a half below the fold. The home page keeps its full
   hero; secondary pages get a tighter one and a smaller decorative mockup.
   Add class="inner" to the <section class="hero orange-hero"> on every page
   except index.html.
   -------------------------------------------------------------------------- */
.hero.inner{
  padding-top:104px;
  padding-bottom:36px;
  min-height:0;
}
.hero.inner .phone-mockup{
  width:172px;
  height:334px;
  right:6%;
  bottom:auto;
  top:50%;
  transform:translateY(-50%) rotate(-11deg) skewY(4deg);
}
.hero.inner .phone-screen h2{font-size:2.4rem;}
.hero.inner .scene-copy h1{
  font-size:clamp(2.4rem,4.6vw,4.2rem);
  margin:14px 0 10px;
}
@media (max-width:900px){
  .hero.inner .phone-mockup{display:none;}
}

/* --------------------------------------------------------------------------
   4b. The 766px decorative block between the headline and the first price.
   On Package Pricing, <section class="image-showcase"> is 766px tall and
   contains no text at all. Together with the hero that is 1,162px of
   decoration before a customer sees a number.

   PREFERRED FIX (do this in the HTML): cut the entire
   <section class="image-showcase"> ... </section> block and paste it AFTER
   the pricing <section class="section"> block. Prices then start ~396px down
   — above the fold — and the visuals still get their moment further along.

   FALLBACK (if you'd rather not touch the HTML): the rule below crops it.
   Delete these three lines once the HTML move is done.
   -------------------------------------------------------------------------- */
.hero.inner ~ .image-showcase{
  max-height:300px;
  overflow:hidden;
}

/* --------------------------------------------------------------------------
   5. Decoration stops sitting on top of copy at the page edges.
   The mockup and remote are absolutely positioned and overlap the header and
   the left margin at some widths. Keep them behind text and inside the frame.
   -------------------------------------------------------------------------- */
.phone-mockup{z-index:0;}
.scene-copy{position:relative; z-index:2;}
.hero{overflow:hidden;}
@media (max-width:1100px){
  .phone-mockup{opacity:.35;}
}
@media (max-width:820px){
  .phone-mockup{display:none;}
}

/* --------------------------------------------------------------------------
   6. Tap targets and focus.
   Buttons were fine at 55px; links in the header were not, and nothing had a
   visible keyboard focus state.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.price-tab:focus-visible,
.btn:focus-visible{
  outline:3px solid #1e6fe0;
  outline-offset:3px;
  border-radius:999px;
}
.floating-header nav a{
  padding:6px 4px;
}

/* --------------------------------------------------------------------------
   7. Price cards read as prices.
   Tabular figures so the ladder lines up column-to-column instead of drifting.
   -------------------------------------------------------------------------- */
.price-card-mini,
.plan-panel,
.price-tab{
  font-variant-numeric:tabular-nums;
}