:root{
  /* ----- Light mode (default) ----- */
  /* CTA gradient (Contact Melissa / Ready to Share) */
  --cta-gold-start: #fde68a;
  --cta-gold-mid:   #facc15;
  --cta-gold-end:   #eab308;
  --cta-gold-text:  #111111;
  /* Page + surfaces */
  --bg:    #f3f3f3;     /* page background */
  --paper: #ffffff;     /* cards / shell */

  /* Text */
  --ink:   #111111;
  --text:  #1f2937;
  --muted: #777777;

  /* Lines / borders */
  --line:  #d6d6d6;
  --rail:  #e5e7eb;
  --ring:  #e9eef9;

  /* Status / brand (refreshed for clearer states) */
  --ok:     #16a34a;  /* done */
  --warn:   #fbbf24;  /* doing */
  --todo:   #9ca3af;  /* todo */
  --accent: #384df6;

  --status-ok:   #16a34a;
  --status-warn: #fbbf24;
  --status-todo: #9ca3af;
  --status-rail: #dedede;
  --hero-min-height: 320px;

  /* Layout */
  --radius: 14px;
  --gap: clamp(12px, 2vw, 20px);

  color-scheme: light dark;
}

/* ============================================================
   DARK MODE OVERRIDES
   ============================================================ */

@media (prefers-color-scheme: dark){
:root{
  /* ----- Light mode (default) ----- */
    --bg:    #000000;   /* full page background */
    --paper: #05070a;   /* shell / cards */

    --ink:   #f9fafb;
    --text:  #f9fafb;
    --muted: #9ca3af;

    --line:  #1f2933;
    --rail:  #1b2737;
    --ring:  #1b2430;

    --status-rail: #2d3748;
  }
}


/* ============================================================
   BASE RESET
   ============================================================ */

*,
*::before,
*::after{
  box-sizing: border-box;
}

html, body{
  margin: 0;
  padding: 0;
}

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* ============================================================
   SHELL / HEADER
   ============================================================ */

.site-shell{
  max-width: min(70rem, 77vw);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  box-shadow: 0 22px 45px rgba(0,0,0,.04);
  position: relative;
  /* overflow removed to allow global overlays */
}

/* Sharp hero image at top */
.hero-bg{
  position: absolute;
  inset: 0 0 auto 0;
  height: 280px;
  background-image: url("https://downloads.ptphotos.co/listing/20251005-100brisbane/photos/100%20Brisbane%20Court-001.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Dark overlay on hero for legibility (clear at top, dark at bottom) */
.hero-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, .14),
      rgba(0, 0, 0, .24),
      rgba(0, 0, 0, .42)
    );
}

/* ============================================================
   HERO IMAGE CROSSFADE
   ============================================================ */

.hero-bg{
  position: absolute;
  inset: 0 0 auto 0;
  min-height: var(--hero-min-height);
  height: auto;
  overflow: hidden;
}

.hero-layer{
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2.8s ease-in-out;
  will-change: opacity;
  pointer-events: none;
}

.hero-layer.active{
  opacity: 1;
}

/* soft white wash during transition */
.hero-layer::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.22);
  opacity: 0;
  transition: opacity 2.8s ease-in-out;
  pointer-events: none;
}

/* white wash ONLY during crossfade */
.hero-layer.fading::after{
  opacity: 1;
}

@media (prefers-color-scheme: dark){
.site-shell{
  max-width: min(70rem, 77vw);
  margin: 0 auto;
  min-height: 100vh;
  background: linear-gradient(
    to bottom,
    #000000 0%,
    #0a0a0a 40%,
    #121212 100%
  );
  box-shadow: 0 22px 45px rgba(0,0,0,.04);
  position: relative;
  overflow: hidden;
}
}


.site-header{
position: relative;
z-index: 1;
min-height: 320px;
height: auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: 1.25rem 1.75rem 0;
border-bottom: none;
text-align: center;
background: transparent;
}

.site-title{
position: absolute;
bottom: 1.1rem;                 /* controls distance ABOVE nav */
left: 50%;
transform: translateX(-50%);

margin: .15rem 0 .35rem;
padding: .35rem 1.5rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);

font-weight: 500;
white-space: nowrap;
font-size: 1.1rem;
letter-spacing: .12em;
text-transform: uppercase;
}


.logo-wrap{
position: absolute;
top: .5rem;                       /* smaller = closer to top */
left: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
}

.logo{
  height: 60px;
  width: 60px;              /* ✅ force square */
  object-fit: contain;      /* keeps logo from distorting */
  padding: 4px;             /* balances white space inside the circle */
  border-radius: 50%;       /* ✅ perfect circle */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (prefers-color-scheme: dark){
  .site-title{
    background: rgba(0,0,0,.45);
  }

  .logo{
    background: rgba(0,0,0,.45);
  }
}

  .utility-link:not(.utility-highlight){
    background: rgba(0,0,0,.85);
    border-color: rgba(255,255,255,.2);
    color: #9ca3af;
  }

  .utility-link:hover{
    background: rgba(0,0,0,.99);
    color: #f9fafb;
  }

.utility-highlight{
  background: linear-gradient(
    180deg,
    var(--cta-gold-start),
    var(--cta-gold-mid),
    var(--cta-gold-end)
  );
  border-color: rgba(0,0,0,.25);
  color: var(--cta-gold-text);
  }

  .download-dropdown,
  .utility-link{
    background: #000000;
    color: #ffffff;
    border-color: #000000;
  }


/* ============================================================
   UTILITY NAV (SECONDARY ACTIONS)
   ============================================================ */

.utility-nav{
  position: absolute;
  top: .6rem;
  right: 1.5rem;
  display: inline-flex;
  gap: .65rem;
  align-items: center;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  z-index: 2;
}
  .utility-highlight{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.25),
      0 6px 20px rgba(0,0,0,.55);
  }

.utility-link{
  display: inline-flex;
  align-items: center;
  padding: .32rem .75rem;
  border-radius: 3px;
  text-decoration: none;

  background: #000000;
  color: #ffffff;

  border: 1px solid #000000;

  transition:
    background .12s ease,
    color .12s ease,
    border-color .12s ease;
}

.utility-link.utility-highlight:hover{
  background: linear-gradient(
    180deg,
    var(--cta-gold-start),
    var(--cta-gold-mid),
    var(--cta-gold-end)
  );
  filter: brightness(1.06) saturate(1.05);
}

/* Active state for utility links (FAQ / Feedback) */
.utility-link.active:not(.utility-highlight){
  background: #111111;
  color: #ffffff;
  border-color: #333333;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Special but restrained */
.utility-highlight{
  background: linear-gradient(
    180deg,
    var(--cta-gold-start),
    var(--cta-gold-mid),
    var(--cta-gold-end)
  );
  color: var(--cta-gold-text);
  border-color: rgba(0,0,0,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 18px rgba(0,0,0,.18);
}

.utility-link.utility-highlight:hover{
  filter: brightness(1.05);
}

.utility-link.utility-highlight:active{
  filter: brightness(.96);
}

.utility-highlight:active{
  filter: brightness(.96);
}

/* Trademark styling */
.utility-link .tm{
  font-size: .55em;
  margin-left: .15em;
  opacity: .7;
}

/* Download wrapper (dropdown comes later) */
.utility-download{
  position: relative;
}

.utility-download-toggle{
  all: unset;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* ============================================================
   DOWNLOAD DROPDOWN (UTILITY NAV)
   ============================================================ */

.download-control{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  position: relative;
}

/* Hidden but accessible native select */
#download-select{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Custom dropdown shell */
.download-dropdown{
  position: relative;
  min-width: 220px;
  padding: .38rem .75rem;
  border-radius: 3px;

  background: #000000;
  color: #ffffff;
  border: 1px solid #000000;

  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.download-dropdown:hover{
  background: #111111;
  color: #ffffff;
}

.download-dropdown .chevron{
  margin-left: .6rem;
  font-size: .7em;
  opacity: .7;
}

/* Dropdown menu */
.download-dropdown .menu{
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  padding: .25rem 0;

  border-radius: 3px;
  background: #000000;
  border: 1px solid #222222;

  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  z-index: 50;

  text-align: left;
  overflow: hidden;
}

.download-dropdown.open .menu{
  display: block;
}

.download-dropdown .menu button{
  all: unset;
  width: 100%;
  padding: .45rem .75rem;
  cursor: pointer;
  font-size: .7rem;
  letter-spacing: .08em;

  text-align: left;
  justify-content: flex-start;
}

.download-dropdown .menu button:hover{
  background: rgba(255,255,255,.08);
}

.download-dropdown .menu button:hover{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Download action button */
.download-control .primary{
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.download-control .primary:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* ============================================================
   NAV TABS
   ============================================================ */

.site-nav{
position: absolute;
bottom: -2.1rem;                  /* hangs below hero */
left: 50%;
transform: translateX(-50%);
display: inline-flex;
gap: .25rem;
padding: .25rem;
border-radius: 999px;

/* light mode */
background: rgba(255,255,255,.92);
border: 1px solid var(--line);

backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}

.site-nav .tab{
  display: inline-flex;
  align-items: center;
  padding: .48rem .95rem;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #4b5563;
  border-radius: 999px;
  white-space: nowrap;   /* ← this */
  transition:
    color .18s ease,
    background .18s ease,
    transform .15s ease;
}

.site-nav .tab:hover{
  color: #111111;
}

.site-nav .tab.active{
  color: #111111;
  background: var(--ring);
  box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 600;
}

/* -------- DARK MODE OVERRIDE (MUST COME AFTER BASE .site-nav) -------- */

@media (prefers-color-scheme: dark){
  .site-nav{
    background: rgba(0,0,0,.55);
    border-color: rgba(255,255,255,.18);
  }

  .site-nav .tab{
    color: #d1d5db;
  }

  .site-nav .tab:hover{
    color: #f9fafb;
    background: rgba(255,255,255,.08);
  }

  .site-nav .tab.active{
    background: rgba(255,255,255,.18);
    color: #f9fafb;
  }
}

/* ============================================================
   MAIN
   ============================================================ */

.site-main{
padding: 4rem 1.75rem 3rem;       /* extra top padding so content clears nav */
position: relative;
/* no z-index so overlays inside .site-main can stack above header/nav */
}

h2{
  text-align: center;
  margin: 0 0 .4rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sub{
  text-align: center;
  color: var(--muted);
  margin-bottom: 1.75rem;
}

/* ============================================================
   SHARED PILL BUTTON (used by downloads, videos, reels, etc.)
   ============================================================ */

.dl-pill{
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .45rem 1.1rem;
  border-radius: 999px;

  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;

  background: linear-gradient(
    180deg,
    var(--cta-gold-start),
    var(--cta-gold-mid),
    var(--cta-gold-end)
  );
  color: var(--cta-gold-text);

  border: 1px solid rgba(0,0,0,.15);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 18px rgba(0,0,0,.18);

  transition:
    filter .12s ease,
    transform .12s ease;
}

.dl-pill:hover{
  filter: brightness(1.05);
  transform: translateY(-0.5px);
}

.dl-pill:active{
  filter: brightness(.96);
}

/* ===============================
   FOOTER
   =============================== */

.site-footer{
  margin-top: 4rem;
  padding: 2.5rem 1.5rem 3rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
  text-align: center;
}

.footer-inner{
  max-width: 40rem;
  margin: 0 auto;
}

.footer-logo img{
  height: 42px;
  opacity: .85;
}

.footer-text{
  margin: 1rem 0 .75rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted);
}

.footer-meta{
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =====================================
   CRAFTED FOOTER VARIANT (CLIENT PORTAL)
   ===================================== */

.footer-crafted{
  padding-top: 1.5rem;
}

.footer-crafted .footer-kicker{
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .65rem;
}

.footer-crafted .footer-client{
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .55rem;
}

.footer-crafted .footer-byline{
  font-size: .78rem;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: .75rem;
}

.footer-crafted .footer-meta{
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.6rem;
}

.footer-crafted .footer-mark img{
  width: 52px;
  height: auto;
  opacity: .9;
}

.nav-toggle{
  display: none;             /* hidden by default (desktop) */
  border: 0;
  padding: 0;
  background: transparent;
}

.nav-toggle-box{
display: inline-block;
width: 22px;
height: 20px;
position: relative;
}

.nav-toggle-inner,
.nav-toggle-inner::before,
.nav-toggle-inner::after{
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: #4b5563;
  left: 0;
  transition:
    transform .15s ease,
    top .15s ease,
    opacity .15s ease,
    background .15s ease;
}

.nav-toggle-inner{
top: 50%;
transform: translateY(-50%);
}

.nav-toggle-inner::before{
content: "";
top: -7px;
}

.nav-toggle-inner::after{
content: "";
top: 7px;
}

/* When nav is open, animate icon into an "X" */
.site-nav.nav-open + .nav-toggle .nav-toggle-inner{
  background: transparent;
}

.site-nav.nav-open + .nav-toggle .nav-toggle-inner::before{
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.site-nav.nav-open + .nav-toggle .nav-toggle-inner::after{
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* ==========================================
   MOBILE LAYOUT: COLLAPSE NAV INTO TOGGLE
   ========================================== */

@media (max-width: 768px){
.site-header{
position: relative;
align-items: center;
padding: .75rem 1rem;
}

.site-title{
font-size: .95rem;
padding: .25rem 1rem;
}

/* compact mobile nav panel in top-right */
.site-nav{
position: absolute;
top: 3rem;
right: 1rem;
left: auto;
bottom: auto;
transform: none;
display: none;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: .4rem 0;
width: 230px;
max-width: calc(100% - 2rem);
border-radius: 1rem;
background: rgba(17,24,39,.94);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}

/* show when JS adds nav-open */
.site-nav.nav-open{
display: flex;
}

.site-nav .tab{
justify-content: center;
padding: .6rem 1rem;
border-radius: 0;
font-size: .8rem;
letter-spacing: .16em;
color: #e5e7eb;
}

.site-nav .tab:first-child{
border-radius: 1rem 1rem 0 0;
}

.site-nav .tab:last-child{
border-radius: 0 0 1rem 1rem;
}

.site-nav .tab.active{
background: rgba(255,255,255,.16);
color: #ffffff;
box-shadow: none;
}

/* -------------------------------
   MOBILE UTILITY LINKS (HAMBURGER)
   ------------------------------- */

.mobile-utility-group{
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.mobile-utility-link{
  display: flex;
  justify-content: center;
  padding: .55rem 1rem;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #9ca3af;
}

.mobile-utility-link:hover{
  color: #f9fafb;
}

/* Active state (FAQ / Feedback) */
.mobile-utility-link.active{
  color: #e5e7eb;
  background: rgba(255,255,255,.06);
}

/* Ready-to-Share highlight */
.mobile-utility-highlight{
  margin-top: .35rem;
  font-weight: 700;
  color: #facc15;
  background: rgba(250,204,21,.14);
  border-radius: .75rem;
}

.mobile-utility-highlight:hover{
  background: rgba(250,204,21,.22);
}

/* circular hamburger button */
.nav-toggle{
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: .65rem;
right: 1rem;
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255,255,255,.92);
cursor: pointer;
}
}

/* =========================================
   MOBILE-ONLY UTILITY LINKS (DEFAULT HIDDEN)
   ========================================= */

.mobile-utility-group{
  display: none;
}

/* ============================================================
   DOWNLOAD CONFIRM POPUP
   ============================================================ */

.download-confirm{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.download-confirm.open{
  display: flex;
}

.download-confirm-card{
  width: min(94vw, 420px);
  background: var(--paper);
  border-radius: 1.25rem;
  padding: 1.75rem 2rem 1.6rem;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  text-align: center;
}

.download-confirm .title{
  margin: 0 0 .35rem;
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.download-confirm .choice{
  margin: .35rem 0 1.4rem;
  font-size: 1.05rem;
  color: var(--muted);
}

.download-confirm .actions{
  display: flex;
  justify-content: center;
  gap: .6rem;
}

.download-confirm button{
  padding: .55rem 1.3rem;
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--paper);
}

.download-confirm .confirm{
  background: var(--ring);
  font-weight: 600;
}

.download-confirm button:hover{
  filter: brightness(1.05);
}

.site-main{
  padding-top: 4rem;
}





/* dark-mode tweak for the toggle on mobile */
@media (max-width: 768px) and (prefers-color-scheme: dark){
  .nav-toggle{
    border-color: rgba(255,255,255,.25);
    background: rgba(0,0,0,.55);
  }

  .nav-toggle-inner,
  .nav-toggle-inner::before,
  .nav-toggle-inner::after{
    background: #e5e7eb;
  }
}

@media (max-width: 768px){
  .utility-nav{
    display: none;
  }
.mobile-utility-group{
  display: flex;
}
}

/* ============================================================
   FORCE-HIDE MOBILE UTILITY LINKS ON NON-MOBILE
   ============================================================ */

@media (min-width: 769px){
  .mobile-utility-group{
    display: none !important;
  }
}

/* ============================================================
/* ============================================================
   UPGRADE CARD — FIT & FINISH POLISH
   ============================================================ */

/* Single visual column that everything aligns to */
.upgrade-center-wrap {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

/* Paragraphs already centered — keep them readable */
.upgrade-center-wrap > p {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.60rem;
}

/* Visual stays centered naturally */
.upgrade-visual {
  margin-left: auto;
  margin-right: auto;
}

/* List container centered, contents left-aligned */
.upgrade-copy ul {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  text-align: left;
  max-width: 40ch;
}

/* CTA explicitly styled as button */
.upgrade-cta-button {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

/* Keep subtext visually grouped with CTA */
.upgrade-subtext {
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}

/* Overall card: slightly softer, more intentional (no top padding) */
.upgrades-not-included {
  padding: 0 2.25rem 2.1rem;
  border-radius: 1.1rem;
}

/* Headline: tighten tracking + breathing room */
.upgrade-copy h2 {
  margin-bottom: .65rem;
  letter-spacing: .055em;
  line-height: 1.25;
}

/* Intro paragraph: slightly wider + calmer rhythm */
.upgrade-copy > p {
  margin-bottom: 1.25rem;
  max-width: 38ch;
  line-height: 1.5;
}

/* Visual container: feel intentional, not embedded */
.upgrade-visual {
  margin: 1.1rem auto 1.6rem;
}

.upgrade-visual .upgrades-embed {
  max-width: 420px;
}

.upgrade-visual .upgrades-aspect {
  border-radius: .85rem;
  box-shadow:
    0 10px 24px rgba(0,0,0,.08),
    0 2px 6px rgba(0,0,0,.06);
}

/* Caption: slightly tighter + quieter */
.visual-caption {
  margin-top: .4rem;
  font-size: .78rem;
  opacity: .9;
}

/* Section subhead */
.upgrade-copy h3 {
  margin-top: 1.6rem;
  margin-bottom: .75rem;
}

/* Feature list: better legibility + balance */
.upgrade-copy ul {
  margin-bottom: 1.25rem;
  padding-left: 1.25rem;
  line-height: 1.45;
}

.upgrade-copy li {
  margin-bottom: .45rem;
}

.upgrade-microcopy {
  margin: 1.2rem 0 1.7rem;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: .02em;
}

/* CTA: slightly more presence without shouting */
.upgrade-cta-button {
  margin-top: 1.25rem;
  margin-bottom: .35rem;
  padding: .65rem 1.4rem;
  font-size: .78rem;
  letter-spacing: .15em;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
}

/* Subtext: tuck in neatly */
.upgrade-subtext {
  margin-top: .65rem;
  font-size: .78rem;
  opacity: .9;
}

.upgrades-aspect{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: .75rem;
  overflow: hidden;
  background: #050816;
}

.upgrades-aspect iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.upgrades-embed.videos-embed--portrait .videos-aspect{
  aspect-ratio: 9 / 16;
}

/* Mobile: reduce vertical air just a touch */
@media (max-width: 640px) {
  .upgrades-not-included {
    padding: 0rem 1.25rem 1.9rem;
  }

  .upgrade-copy h2 {
    font-size: 1.25rem;
  }

  .upgrade-visual {
    margin-bottom: 1.4rem;
  }
}

/* =========================================
   NOT PURCHASED / UPGRADE PREVIEW STATE
   ========================================= */

.upgrades-not-included .upgrade-center-wrap{
  position: relative;
  max-width: 520px;
  margin: 0 auto;

  padding: 1.5rem 1.4rem 1.6rem;

  border: 2px dotted rgba(0,0,0,.18);
  border-radius: 1.1rem;

  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,.015),
      rgba(0,0,0,.015) 6px,
      rgba(0,0,0,.03) 6px,
      rgba(0,0,0,.03) 12px
    ),
    var(--paper);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 8px 20px rgba(0,0,0,.03);
}

@media (prefers-color-scheme: dark){
  .upgrades-not-included .upgrade-center-wrap{
    border: 2px dotted rgba(255,255,255,.28);

    background:
      repeating-linear-gradient(
        45deg,
        rgba(255,255,255,.035),
        rgba(255,255,255,.035) 6px,
        rgba(255,255,255,.06) 6px,
        rgba(255,255,255,.06) 12px
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.02)
      ),
      var(--paper);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 0 0 1px rgba(255,255,255,.06),
      0 14px 34px rgba(0,0,0,.75),
      0 0 0 1px rgba(255,255,255,.04);
  }

  /* Corner label */
  .upgrades-not-included .upgrade-center-wrap::before{
    background: var(--paper);
    color: rgba(255,255,255,.6);
  }
}

/* Slightly mute all content except CTA */
.upgrades-not-included .upgrade-center-wrap > *:not(.dl-pill){
  color: var(--muted);
}

/* Keep the CTA feeling intentional */
.upgrades-not-included .dl-pill{
  opacity: 1;
  filter: none;
}

/* Optional: soften embedded video to “preview” */
.upgrades-not-included .upgrades-embed{
  opacity: .85;
  filter: saturate(.9) contrast(.95);
}

/* Optional micro-detail: corner label feel */
.upgrades-not-included .upgrade-center-wrap::before{
  content: "Available Upgrade";
  position: absolute;
  top: -.55rem;
  left: 1.1rem;

  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;

  background: var(--paper);
  padding: .2rem .45rem;
  color: var(--muted);
}

/* ============================================================
   MOBILE TUNING
   ============================================================ */

@media (max-width: 640px){
  .upgrades-not-included{
    padding: 0 1.25rem 1.9rem;
  }

  .upgrade-copy h2{
    font-size: 1.25rem;
  }

  .upgrade-visual{
    margin-bottom: 1.4rem;
  }
}

/* ============================================================
   NAVIGATION GATE - SERVICES ORDERED, NOT COMPLETE
   ============================================================ */
/* ============================================================
   NAV GATE POPUP (matches download-confirm)
   ============================================================ */

.nav-gate-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.nav-gate-modal.open{
  display: flex;
}

.nav-gate-card{
  width: min(94vw, 420px);
  background: var(--paper);
  border-radius: 1.25rem;
  padding: 1.75rem 2rem 1.6rem;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  text-align: center;
}

.nav-gate-card .title{
  margin: 0 0 .35rem;
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nav-gate-card .message{
  margin: .35rem 0 1.4rem;
  font-size: 1.05rem;
  color: var(--muted);
}

.nav-gate-card .actions{
  display: flex;
  justify-content: center;
  gap: .6rem;
}

.nav-gate-card button{
  padding: .55rem 1.3rem;
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--paper);
}

.nav-gate-card button:hover{
  filter: brightness(1.05);
}

/* Gallery section */

.photos-gallery{
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 1.4rem 1.6rem 1.6rem;
}

.photos-gallery-title{
  margin: 0 0 .3rem;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}

.photos-gallery-hint{
  margin: 0 0 1rem;
  font-size: .85rem;
  color: var(--muted);
  text-align: center;
}