/* 5 Sep 2026 — hero CTA as quiet liquid glass on the roofline, bare step logos,
   and a page bottom that runs into the browser bar instead of stopping at it. */

/* Hero CTA. Same night-glass family as the sign-in Google button: one translucent
   layer, a thin bright rim, no glossy top half. Anchored to the photo so it rests
   just above the roof instead of hanging under the headline. */
.fixa-hero-photo > .demo-cta--hero {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 35%;
  left: 0;
  width: max-content;
  min-width: 212px;
  min-height: 56px;
  margin: 0 auto;
  padding: 0 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 20px;
  background: rgba(8, 19, 32, 0.56);
  color: #f5f0e7;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 1px rgba(0, 4, 13, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 44px rgba(0, 7, 18, 0.36);
  backdrop-filter: blur(26px) saturate(165%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease,
    background-color 0.28s ease,
    border-color 0.28s ease;
}

/* Rim light: a soft lens highlight along the top edge, not a two-tone gloss. */
.fixa-hero-photo > .demo-cta--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 70% at 50% -30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.025));
  pointer-events: none;
}

.fixa-hero-photo > .demo-cta--hero::after {
  content: none;
}

.fixa-hero-photo > .demo-cta--hero:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(11, 24, 40, 0.66);
  filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 50px rgba(0, 7, 18, 0.42);
}

.fixa-hero-photo > .demo-cta--hero:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.12s;
}

.fixa-hero-photo > .demo-cta--hero:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.78);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .fixa-hero-photo > .demo-cta--hero {
    bottom: 39.5%;
    min-width: 200px;
    min-height: 54px;
    margin: 0 auto;
    padding: 0 30px;
    border-radius: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fixa-hero-photo > .demo-cta--hero,
  .fixa-hero-photo > .demo-cta--hero:hover,
  .fixa-hero-photo > .demo-cta--hero:active {
    transform: none;
    transition: none;
  }
}

/* How it works: the logos stand on their own, larger and centered, no tile behind them. */
.how .card-icon {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 88px;
  align-self: center;
  justify-self: center;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.how .card-icon img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

/* The Drive mark has generous transparent padding in its file; scale it so the
   visible mark matches the phone. */
.how .workspace-icon img {
  width: 108px;
  height: 108px;
}

.how .clipboard-icon {
  font-size: 66px;
  line-height: 1;
}

@media (max-width: 980px) {
  .how .step-cards li {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 26px 24px 24px;
  }

  .how .card-icon {
    min-height: 76px;
  }

  .how .card-icon img {
    width: 76px;
    height: 76px;
  }

  .how .workspace-icon img {
    width: 94px;
    height: 94px;
  }

  .how .clipboard-icon {
    font-size: 58px;
  }
}

@media (max-width: 540px) {
  .how .step-cards li {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 24px 20px 22px;
  }

  .how .card-icon {
    width: auto;
    height: auto;
    min-height: 68px;
    border-radius: 0;
  }

  .how .card-icon img {
    width: 68px;
    height: 68px;
  }

  .how .workspace-icon img {
    width: 84px;
    height: 84px;
  }

  .how .clipboard-icon {
    font-size: 52px;
  }
}

/* Jobs LAD can do. The night card used to float on the paper body colour, so its
   12px frame read as a grey border between two white sections. The wrapper paints
   that frame white; the card itself is unchanged. */
.roles-frame {
  padding: 12px 12px 0;
  background: #fff;
}

.roles-frame > .roles-section {
  margin: 0;
}

/* Rail: the three jobs share the rail height evenly instead of bunching in the
   middle with dead space above and below. The pill reads button offsets, so it
   follows the taller cells. */
@media (min-width: 861px) {
  .roles-rail {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    justify-content: stretch;
    align-content: stretch;
    gap: 6px;
  }

  .roles-rail button {
    height: 100%;
    min-height: 76px;
  }
}

@media (max-width: 700px) {
  .roles-frame {
    padding: 8px 8px 0;
  }
}

/* Home footer. Safari tints its bottom bar from the body background (paper), so a
   white footer ended in a visible step above the bar. Fade the footer from the white
   closing section into the same paper so the page dissolves into the chrome. */
footer {
  border-top: 0;
  background: linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  padding-bottom: calc(55px + env(safe-area-inset-bottom, 0px));
}

/* Sign-in: the photo dissolves into the night colour at the bottom edge, which is
   also the html/body colour and the theme-color, so there is no seam above the bar. */
.signin-page {
  background-image:
    linear-gradient(
      180deg,
      rgba(7, 16, 27, 0.22) 0%,
      rgba(7, 16, 27, 0.4) 48%,
      rgba(7, 16, 27, 0.62) 76%,
      rgba(7, 16, 27, 0.9) 92%,
      #07101b 100%
    ),
    url('/lad-hero-desktop-extended-v1.webp');
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 700px) {
  .signin-page {
    background-image:
      linear-gradient(
        180deg,
        rgba(7, 16, 27, 0.22) 0%,
        rgba(7, 16, 27, 0.42) 50%,
        rgba(7, 16, 27, 0.64) 78%,
        rgba(7, 16, 27, 0.92) 93%,
        #07101b 100%
      ),
      url('/lad-hero-mobile-v1.webp');
  }
}