/*
 * Preview-only additions on top of the real css/main.css.
 * Mirrors the site's existing design tokens (see scss/abstracts/_variables.scss)
 * so this can be ported into scss/sections/_pricing.scss as-is once approved —
 * nothing here should need restyling when it moves into the real build.
 */

/* Desktop navbar: links centered, login grouped right next to the theme
   toggle (the base layout spaces all items evenly, leaving login stranded
   mid-way between the links and the toggle). */
@media (min-width: 993px) {
  .navbar__inner {
    position: relative;
    justify-content: flex-start !important;
  }

  /* menu pill exactly at the page's centre, independent of the logo's and
     icons' widths; the icons push to the right edge */
  .navbar__links {
    position: absolute !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
  }

  .navbar__auth-btn--icon {
    margin-left: auto !important;
  }
}

/* Navbar bar fully transparent: no grey tint, frost, border or shadow —
   the glass menu pill and icons float on the page by themselves */
.navbar,
.navbar.scrolled,
[data-theme="light"] .navbar,
[data-theme="light"] .navbar.scrolled {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ── Header menu as a Liquid Glass pill with a squeezing bubble ────
   Same pill on every width: in the header on desktop, a floating island
   at the bottom of the screen on mobile (see Mobile nav island below). */
.navbar__links {
  position: relative;
  isolation: isolate;
  gap: 0.15rem !important;
  padding: 4px;
  border-radius: 999px;
  /* fully clear: no tint, only the glass itself (lens + light) */
  background: transparent;
  backdrop-filter: blur(7px) saturate(170%) brightness(1.05);
  backdrop-filter: url(#liquid-lens) blur(7px) saturate(170%) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(170%) brightness(1.05);
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.55),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 18px rgba(255, 255, 255, 0.05),
    0 6px 20px rgba(0, 0, 0, 0.35);
}

.navbar__links > li {
  position: relative;
  z-index: 1;
}

.navbar__links .nav-link {
  display: block;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
}

/* no underline under the titles — the bubble marks the page */
.navbar__links .nav-link::after,
.navbar__links .nav-link::before {
  display: none !important;
}

/* the bubble: lime-tinted glass that stretches from title to title */
.nav-bubble {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(207, 250, 58, 0.14);
  box-shadow:
    inset 1px 1px 0 -0.5px rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(207, 250, 58, 0.22),
    0 4px 14px rgba(207, 250, 58, 0.12);
  opacity: 0;
  transition:
    left 420ms cubic-bezier(0.3, 1.25, 0.5, 1) var(--lead-l, 0ms),
    right 420ms cubic-bezier(0.3, 1.25, 0.5, 1) var(--lead-r, 0ms),
    transform 200ms ease,
    opacity 200ms ease;
}

/* squeezes thinner while it's stretched between two titles */
.nav-bubble.is-moving {
  transform: scaleY(0.8);
}

[data-theme="light"] .navbar__links {
  background: transparent;
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.95),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 6px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .nav-bubble {
  background: rgba(207, 250, 58, 0.45);
  box-shadow:
    inset 1px 1px 0 -0.5px rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(120, 160, 20, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .nav-bubble { transition: opacity 150ms ease !important; }
  .nav-bubble.is-moving { transform: none; }
}

/* ── Mobile nav island ──────────────────────────────────────────────
   Under 993px nav-scroll.js moves the menu pill out of the header into
   <body> (a fixed element inside the header would slide away with it
   when the header hides), and it floats here, a little above the bottom
   edge. The hamburger menu is no longer needed. */
@media (max-width: 992px) {
  body > .navbar__links {
    display: flex !important;
    position: fixed;
    /* centred without a transform (iPhone places those unreliably); the
       transform is reserved for nav-scroll.js, which pins the island to the
       visible screen when the page is zoomed or the keyboard is open */
    left: 0;
    right: 0;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translate(var(--vv-x, 0px), var(--vv-y, 0px)) scale(var(--vv-s, 1));
    transform-origin: 50% 100%;
    transition: opacity 160ms ease;
    z-index: 1050;
    gap: 0 !important;
    overflow: hidden;
    /* full Real Liquid Glass (global/effects/real-liquid-glass.md): same
       lens as desktop; Safari can't lens, so it gets the desktop's low frost
       rather than a heavy blur, plus the edge glow and light sheen */
    -webkit-backdrop-filter: blur(7px) saturate(170%) brightness(1.05);
    box-shadow:
      inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.55),
      inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.22),
      inset 0 0 0 1px rgba(255, 255, 255, 0.10),
      inset 0 0 22px rgba(255, 255, 255, 0.06),
      0 18px 50px rgba(0, 0, 0, 0.45),
      0 2px 6px rgba(0, 0, 0, 0.25);
  }

  body > .navbar__links::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(120% 60% at 15% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
      radial-gradient(90% 50% at 100% 100%, rgba(255, 255, 255, 0.08), transparent 60%);
  }

  /* hidden while the on-screen keyboard is up */
  body > .navbar__links.is-kb {
    opacity: 0;
    pointer-events: none;
  }

  [data-theme="light"] body > .navbar__links {
    box-shadow:
      inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.95),
      inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.6),
      inset 0 0 0 1px rgba(0, 0, 0, 0.06),
      0 18px 50px rgba(0, 0, 0, 0.18),
      0 2px 6px rgba(0, 0, 0, 0.08);
  }

  body > .navbar__links .nav-link {
    padding: 0.85rem 0.95rem;
    font-size: 0.72rem;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }

  .navbar__hamburger {
    display: none !important;
  }

  /* top bar: logo left, login + theme grouped on the right */
  .navbar__inner {
    justify-content: flex-start !important;
    gap: 0.6rem;
  }

  .navbar__auth-btn--icon {
    margin-left: auto !important;
  }

  .navbar__inner .theme-toggle {
    margin: 0 !important;
  }

  /* keep each block's content and the footer clear of the island */
  main:not(.admin-page) section {
    padding-bottom: calc(2rem + 64px) !important;
  }

  .footer {
    padding-bottom: calc(2rem + 64px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Login as an icon-only round button, matching the theme toggle's size */
.navbar__auth-btn--icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* No pulsing dot, no gradient/glow: an exact twin of the theme toggle */
.navbar__auth-btn--icon::before,
.navbar__auth-btn--icon::after {
  display: none !important;
}

.navbar__auth-btn--icon {
  background: transparent !important;
  border: 1px solid #CFFA3A !important;
  color: #CFFA3A !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}

.navbar__auth-btn--icon:hover {
  background: rgba(207, 250, 58, 0.12) !important;
}

[data-theme="light"] .navbar__auth-btn--icon {
  background: transparent !important;
  border-color: #444444 !important;
  color: #444444 !important;
  box-shadow: none !important;
}

[data-theme="light"] .navbar__auth-btn--icon:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: #222222 !important;
  color: #222222 !important;
}

.navbar__auth-btn--icon svg {
  width: 14px;
  height: 14px;
  position: relative;
  z-index: 1;
}

/* Dashboard (signed-in admins): a third round glass icon between login and
   the theme toggle. main.js shows/hides it through its inline display, which
   the shared icon rule's display !important would otherwise override. */
.navbar__dashboard[style*="display: none"] {
  display: none !important;
}

.navbar__inner .navbar__dashboard {
  margin: 0 !important;
}

/* on the dashboard itself the icon shows as the current page */
.navbar__dashboard[aria-current="page"] {
  color: #CFFA3A !important;
  background: rgba(207, 250, 58, 0.14) !important;
}

[data-theme="light"] .navbar__dashboard[aria-current="page"] {
  color: #4A6300 !important;
  background: rgba(207, 250, 58, 0.45) !important;
}

/* Websites hero: desktop + tablet + phone of one real client site */
.device-trio {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 640 / 440;
  margin-inline: auto;
}

.device-trio img {
  display: block;
  width: 100%;
  height: auto;
}

.device-trio__desktop {
  position: absolute;
  top: 0;
  left: 14%;
  width: 72%;
  z-index: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--pvm-border-soft);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  background: #161616;
}

.device-trio__desktop .modules-hero__mockup-bar {
  padding: 0.55rem 0.9rem;
  margin: 0;
  background: #161616;
}

.device-trio__tablet {
  position: absolute;
  right: 12%;
  bottom: 0;
  width: 20%;
  z-index: 3;
  border: 6px solid #111;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
  background: #111;
}

.device-trio__phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11%;
  z-index: 4;
  border: 4px solid #111;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
  background: #111;
}

/* Portfolio entrance (class set by websites-preview.html when the block
   comes into view): the deck fades in and plays its own hover effect on
   the front window (see the script); the caption follows */
@media (prefers-reduced-motion: no-preference) {
  #websites-work .site-deck,
  #pvm-work .site-deck {
    opacity: 0;
    transition: opacity 500ms ease;
  }

  #websites-work .site-deck__caption,
  #pvm-work .site-deck__caption {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms ease 320ms, transform 700ms cubic-bezier(0.2, 0.9, 0.3, 1) 320ms;
  }

  #websites-work.is-in .site-deck,
  #websites-work.is-in .site-deck__caption,
  #pvm-work.is-in .site-deck,
  #pvm-work.is-in .site-deck__caption {
    opacity: 1;
    transform: none;
  }
}

/* Websites portfolio deck: overlapping browser windows */
.site-deck {
  position: relative;
  height: calc(var(--card-w, 560px) * 0.625 + 36px);
  touch-action: pan-y;
  outline: none;
}

.site-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--card-w, 560px);
  padding: 0;
  border: 1px solid var(--pvm-border-soft);
  border-radius: 12px;
  overflow: hidden;
  background: var(--pvm-surface-2);
  cursor: pointer;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  transition: transform 520ms cubic-bezier(0.22, 0.9, 0.3, 1), opacity 300ms ease, filter 300ms ease;
  will-change: transform;
}

.site-card:focus-visible {
  outline: 2px solid var(--pvm-accent);
  outline-offset: 3px;
}

.site-card__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--pvm-surface-3);
  border-bottom: 1px solid var(--pvm-border-soft);
}

.site-card__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FF5F57;
}

.site-card__bar i:nth-child(2) { background: #FFBD2E; }
.site-card__bar i:nth-child(3) { background: #28CA41; }

.site-card__bar {
  position: relative;
}

.site-card__bar small {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--pvm-text-muted);
}

/* centered address pill in each window's top bar — opens the live site */
.site-card__url {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 70%;
  padding: 2px 4px;
  border: none;
  background: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--pvm-text-soft);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.site-card__url:hover,
.site-card__url:focus-visible {
  color: var(--pvm-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.site-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  -webkit-user-drag: none;
}

.site-deck__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}

.site-deck__caption .work-slider__arrow {
  flex-shrink: 0;
}

.site-deck__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  min-width: 0;
  flex: 0 1 520px;
}

@media (max-width: 600px) {
  .site-deck__caption {
    gap: 0.75rem;
  }
}

/* Pricing cards in a row all share the tallest card's height; the feature
   list grows (flex: 1) so every "Get a Quote" button lines up at the bottom */
.pricing__grid {
  align-items: stretch !important;
}

/* ── "What You Get": one row of cards across the full width ──────── */
@media (min-width: 901px) {
  /* only grids with up to 4 cards (Websites, Apps) go single-row */
  .modules-features__grid:not(:has(> :nth-child(5))) {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1.25rem !important;
  }
}

.modules-features .module-feature-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  padding: 2rem 1.5rem !important;
  border-radius: 20px;
  border: 1px solid var(--pvm-border-soft);
  background: linear-gradient(180deg, var(--pvm-surface-2) 0%, var(--pvm-dark) 100%);
  transition: transform 300ms cubic-bezier(0.22, 0.9, 0.3, 1), border-color 300ms ease, box-shadow 300ms ease;
}

.modules-features .module-feature-card::before {
  content: '';
  position: absolute;
  top: -60%;
  left: 50%;
  width: 140%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(207, 250, 58, 0.14), transparent);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.modules-features .module-feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(207, 250, 58, 0.35);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
}

.modules-features .module-feature-card:hover::before {
  opacity: 1;
}

.modules-features .module-feature-card__icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  margin: 0 !important;
}

.modules-features .module-feature-card__title {
  margin: 0 !important;
}

.modules-features .module-feature-card__desc {
  margin: 0 !important;
  max-width: 30ch;
}

/* phones: the cards become a swipeable row instead of a tall stack */
@media (max-width: 900px) {
  .modules-features__grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem !important;
    padding: 1rem 0.25rem 1.5rem;
    margin: -1rem -0.25rem -1.5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .modules-features__grid::-webkit-scrollbar {
    display: none;
  }

  .modules-features__grid > .module-feature-card {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }
}

.site-deck__tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pvm-accent-text);
}

.site-deck__name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--pvm-white);
  margin: 0;
}

.site-deck__desc {
  font-size: 0.9rem;
  color: var(--pvm-text-soft);
  margin: 0;
}

.site-deck__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.site-deck__count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--pvm-text-muted);
  margin-inline: 0.4rem;
  font-variant-numeric: tabular-nums;
}

/* Websites portfolio: horizontally sliding row at every width */
.work-slider {
  position: relative;
}

.work__grid.work__grid--slider {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* overflow-x clips y too: room for hover lift + shadow */
  padding: 1rem 0.25rem 1.5rem;
  margin: -1rem -0.25rem -1.5rem;
}

.work__grid--slider::-webkit-scrollbar {
  display: none;
}

.work__grid--slider > .work-card {
  flex: 0 0 min(540px, 82%);
  scroll-snap-align: start;
  grid-column: auto !important;
  grid-row: auto !important;
}

.work-slider__controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.work-slider__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--pvm-border-soft);
  background: var(--pvm-surface-2);
  color: var(--pvm-white);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.work-slider__arrow:hover {
  border-color: var(--pvm-accent);
  color: var(--pvm-accent-text);
}

.work-slider__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Mobile nav: shrinks on scroll-down, hides on further scroll-down,
   reappears on scroll-up, back to full size at the very top. */
@media (max-width: 900px) {
  .navbar {
    transition: background 300ms ease, padding 300ms ease, transform 280ms ease;
  }

  .navbar__inner {
    transition: height 220ms ease;
  }

  .navbar--compact .navbar__inner {
    height: 52px;
  }

  .navbar--hidden {
    transform: translateY(-100%);
  }
}

/* Site-wide full-screen snap scroll: each top-level section becomes one
   "block" that scrolling snaps to and settles on, content centered
   vertically within that viewport-height block. scroll-margin-top keeps
   each block's content clear of the fixed 80px navbar when it lands at
   the very top of the viewport. */
html:not(:has(main.admin-page)) {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

main:not(.admin-page) section {
  height: 100vh !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  /* NOT center: centering a flex item taller than its box makes the
     overflow unreachable in some browsers (content silently vanishes
     instead of being scrollable) — top-align so overflow is always a
     normal, reachable internal scroll instead. */
  justify-content: flex-start !important;
  overflow-y: auto !important;
  /* never sideways: wide fans/decks clip at the edge instead of making a
     horizontal scrollbar or letting the page drift left/right on phones */
  overflow-x: hidden !important;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* The navbar is fixed over the top of every block, so each block
     reserves its height as top padding; content lives below it. */
  padding-top: 124px !important;
  padding-bottom: 2rem !important;
}

/* Mobile (for now): no snapping and no one-screen blocks — the page
   scrolls freely and each block is as tall as its content */
@media (max-width: 900px) {
  html,
  html:not(:has(main.admin-page)) {
    scroll-snap-type: none;
  }

  main:not(.admin-page) section {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    overflow-x: clip !important;
    scroll-snap-align: none;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* only the first block sits under the fixed header */
  main:not(.admin-page) section:first-child {
    padding-top: 92px !important;
  }
}

/* Sections short enough to fit still look centered, just via margin
   on the inner wrapper rather than flex justify-content. */
main:not(.admin-page) section > [class$="__inner"] {
  margin-block: auto;
}

/* The footer sits outside <main>, so it wasn't a snap point and mandatory
   snapping pulled every scroll past the last block back up — it needs its
   own stop, aligned to the bottom of the screen */
.footer {
  scroll-snap-align: end;
}

/* Sections whose own layout is a grid of two columns (hero-style) need
   that preserved on their *inner* wrapper, not fought by the section
   becoming a column flexbox above. */
main:not(.admin-page) section > [class$="__inner"] {
  width: 100%;
}

/* Denser grids need smaller cards to fit one screen on desktop too */
main:not(.admin-page) section .pricing-card {
  padding: 1.5rem 1.25rem !important;
  gap: 1rem !important;
}

main:not(.admin-page) section .pricing-card__features {
  gap: 0.35rem !important;
}

main:not(.admin-page) section .pricing-card__features li {
  font-size: 0.78rem !important;
}

main:not(.admin-page) section .module-feature-card {
  padding: 1.25rem !important;
}

:root {
  --pvm-accent: #CFFA3A;
  --pvm-accent-text: #CFFA3A;
  --pvm-dark: #0F1012;
  --pvm-surface-2: #15161A;
  --pvm-surface-3: #1C1E24;
  --pvm-border-soft: rgba(255, 255, 255, 0.08);
  --pvm-white: #FFFFFF;
  --pvm-text-soft: rgba(255, 255, 255, 0.72);
  --pvm-text-muted: rgba(255, 255, 255, 0.58);
  --pvm-grey-dark: #2C2C2C;
}

/* Our custom components (portfolio, pillars, billing toggle, subscribe
   form/success panel) are all built on these tokens, so redefining them
   here is enough to make every one of those pieces follow the site's
   existing [data-theme="light"] system (see scss/base/_light-mode.scss)
   instead of staying hardcoded to dark-mode colors. */
[data-theme="light"] {
  --pvm-accent-text: #6B8A1E;
  --pvm-dark: #FFFFFF;
  --pvm-surface-2: #FFFFFF;
  --pvm-surface-3: #EDECEA;
  --pvm-border-soft: rgba(0, 0, 0, 0.1);
  --pvm-white: #111111;
  --pvm-text-soft: #555555;
  --pvm-text-muted: #777777;
  --pvm-grey-dark: #BBBBBB;
}

/* ── Real-screenshot frames (replaces fake UI mockups) ─────────── */
.device-frame {
  width: 220px;
  margin: 0 auto;
  border-radius: 32px;
  border: 6px solid #000;
  background: #000;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.device-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.browser-frame {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--pvm-border-soft);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.browser-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  background: rgba(255, 170, 0, 0.12);
  color: #FFAA00;
  border: 1px solid rgba(255, 170, 0, 0.25);
  margin-bottom: 0.75rem;
}

/* ── App screenshot stack (Apps page hero): one screen in front,
   the rest peeking from behind on the right; hover a sliver to
   preview it, scroll to move through the stack. ─────────────── */
.app-stack {
  position: relative;
  width: 200px;
  height: 420px;
  margin: 0 auto;
  touch-action: pan-y; /* page still scrolls vertically; horizontal swipes stay ours, not the browser's */
}

.app-stack__card {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  border: 6px solid #000;
  background: #000;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 420ms cubic-bezier(0.22, 0.9, 0.3, 1),
              opacity 320ms ease,
              filter 320ms ease;
  will-change: transform;
}

.app-stack__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

.app-stack__hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--pvm-text-muted);
  margin-top: 1.25rem;
}

/* ── Homepage pillar cards ──────────────────────────────────────── */
.pillars {
  padding-block: 6rem;
  background: var(--pvm-dark);
}

.pillars__inner {
  max-width: 1600px;
  margin: 0 auto;
  padding-inline: 2rem;
}

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1100px) {
  .pillars__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pillars__grid { grid-template-columns: 1fr; }
}

.pillar-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--pvm-surface-2);
  border: 1px solid var(--pvm-border-soft);
  border-radius: 16px;
  padding: 2rem;
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease;
}

.pillar-card:hover {
  border-color: rgba(207, 250, 58, 0.35);
  transform: translateY(-4px);
}

.pillar-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(207, 250, 58, 0.1);
  color: var(--pvm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pillar-card h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--pvm-white);
  margin: 0;
}

.pillar-card p {
  color: var(--pvm-text-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  flex: 1;
}

.pillar-card__cta {
  color: var(--pvm-accent-text);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ── Portfolio / proof section ─────────────────────────────────── */
.modules-portfolio {
  padding-block: 7rem;
  background: var(--pvm-dark);
}

.modules-portfolio__inner {
  max-width: 1600px;
  margin: 0 auto;
  padding-inline: 2rem;
}

.modules-portfolio__header {
  max-width: 620px;
  margin-bottom: 2rem;
}

/* Portfolio and "What You Get" headings centered, matching How It Works
   and Pricing, so every block's heading sits on the same axis. */
.modules-portfolio__header,
.modules-features__header {
  text-align: center;
  margin-inline: auto !important;
}

.modules-portfolio__header h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin-bottom: 1rem;
  color: var(--pvm-white);
}

.modules-portfolio__header h2 em {
  font-style: normal;
  color: var(--pvm-accent);
}

/* light mode: same treatment the real site uses for headline accents */
[data-theme="light"] .modules-portfolio__header h2 em {
  color: #111111;
  text-decoration: underline;
  text-decoration-color: #CFFA3A;
  text-underline-offset: 4px;
}

.modules-portfolio__header p {
  font-size: 1.125rem;
  color: var(--pvm-text-soft);
  line-height: 1.6;
}

.modules-portfolio__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.modules-portfolio__grid .pricing-card__name {
  margin-top: 1.5rem;
}

/* "Our Apps" cards: no card chrome, just a big screenshot with text
   underneath — the frame around them was the thing to remove. */
.app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1rem;
}

.app-card .device-frame {
  width: 220px;
  margin-bottom: 0.5rem;
}

@media (min-width: 701px) {
  .app-stack {
    width: 280px;
    height: 580px;
  }

  /* sized by screen height so the two app cards always fit one block */
  .app-card .device-frame {
    width: clamp(170px, 19.5vh, 280px);
  }
}

.app-card .pricing-card__name {
  margin-top: 0 !important;
}

.app-card .pricing-card__tagline {
  max-width: 320px;
}

/* Apps second block: Android (top) and iOS (bottom) between the two apps */
@media (min-width: 901px) {
  .modules-portfolio__grid--apps {
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
  }
}

.app-platforms {
  align-self: start;  /* the script lines it up with the phones' middle */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;        /* Android & iOS stacked close together */
  opacity: 0.45;      /* semi-transparent */
}

.app-platforms__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--pvm-text-muted);
}


.app-platforms__item span {
  font-size: 2rem;
  line-height: 1.1;
}

/* each name in its own platform's style of type, like a wordmark */
.app-platforms__android {
  font-family: 'Poppins', 'Google Sans', 'Product Sans', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.app-platforms__ios {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;   /* no uppercase: keeps "iOS" spelled correctly */
}

.app-platforms__amp {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--pvm-text-muted);
  line-height: 1;
}

/* Entrance when the block comes into view (class set by apps-preview.html):
   CR1000 slides in from the left, Lingvorium from the right, the platforms
   fade up between them */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .modules-portfolio__grid--apps > .app-card {
    opacity: 0;
    transition: transform 950ms cubic-bezier(0.2, 0.9, 0.3, 1), opacity 700ms ease;
  }

  .modules-portfolio__grid--apps > .app-card:first-child {
    transform: translateX(-90px);
  }

  .modules-portfolio__grid--apps > .app-card:last-child {
    transform: translateX(90px);
    transition-delay: 110ms;
  }

  .modules-portfolio__grid--apps .app-platforms {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms ease 380ms, transform 700ms cubic-bezier(0.2, 0.9, 0.3, 1) 380ms;
  }

  .modules-portfolio__grid--apps.is-in > .app-card {
    opacity: 1;
    transform: none;
  }

  .modules-portfolio__grid--apps.is-in .app-platforms {
    opacity: 0.45;
    transform: none;
  }
}

/* phones: hidden — the apps are a swipe row and each card's store badges
   already name the platforms */
@media (max-width: 900px) {
  .app-platforms {
    display: none;
  }
}

.app-card__desc {
  max-width: 420px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--pvm-text-soft);
}

.app-card__desc strong {
  color: var(--pvm-white);
}

.app-store-badges {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.app-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  text-decoration: none;
}

.app-store-badge__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.app-store-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.app-store-badge__text small {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.8;
}

.app-store-badge__text span {
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

@media (max-width: 900px) {
  .modules-portfolio__grid {
    grid-template-columns: 1fr;
  }
}

/* Apps page: "Our Apps" cards become a swipeable row on mobile instead
   of stacking full-width — each card peeks the next one so it reads as
   "scroll sideways for more", matching the screenshot stack above it. */
@media (max-width: 900px) {
  .modules-portfolio__grid--apps {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    /* overflow-x: auto forces overflow-y to clip too, so pad top/bottom
       enough that the hover lift + shadow don't get cut off */
    padding: 1.5rem 0.25rem 2rem;
    margin: -1.5rem -0.25rem -2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .modules-portfolio__grid--apps::-webkit-scrollbar {
    display: none;
  }

  .modules-portfolio__grid--apps > .app-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
  }
}

/* Mobile type tightening for the portfolio section: the desktop sizes
   (built for a half-width column) read oversized stacked full-width. */
@media (max-width: 640px) {
  .modules-portfolio__header h2 {
    font-size: 1.6rem;
  }

  .modules-portfolio__header p {
    font-size: 0.95rem;
  }

  .modules-portfolio .pricing-card__name {
    font-size: 1.25rem;
    margin-top: 1rem;
  }

  .modules-portfolio .pricing-card__tagline {
    font-size: 0.85rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ── Billing cycle toggle ──────────────────────────────────────── */
.billing-toggle {
  display: inline-flex;
  gap: 0.25rem;
  background: var(--pvm-surface-2);
  border: 1px solid var(--pvm-border-soft);
  border-radius: 9999px;
  padding: 0.25rem;
  margin: 0 auto 3rem;
}

.billing-toggle__option {
  position: relative;
  border: none;
  background: transparent;
  color: var(--pvm-text-soft);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 200ms ease, color 200ms ease;
}

.billing-toggle__option.active {
  background: var(--pvm-accent);
  color: #060606;
}

.billing-toggle__save-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.15);
}

.billing-toggle__option:not(.active) .billing-toggle__save-badge {
  background: rgba(207, 250, 58, 0.14);
  color: var(--pvm-accent-text);
}

/* The site's .pricing__grid is a fixed 4-column grid (for the 4 real
   service packages) — PVM only has 3 plans, so give it its own 3-column
   track and constrain + center the block instead of leaving an empty
   4th column that pushes the cards off-center. */
.pricing__grid--pvm {
  margin-top: 0;
  grid-template-columns: repeat(3, 1fr) !important;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .pricing__grid--pvm {
    grid-template-columns: 1fr !important;
    max-width: 420px;
  }
}

/* Pricing cards: the same swipeable-row treatment as the Apps portfolio
   cards, applied to every pricing grid (Websites, Apps, Modules all
   share this base class) at mobile width, instead of stacking full-width. */
@media (max-width: 700px) {
  .pricing__grid {
    display: flex;
    grid-template-columns: none;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    /* overflow-x: auto forces overflow-y to clip too, so pad top/bottom
       enough that the hover lift + shadow don't get cut off */
    padding: 1.5rem 0.25rem 2rem;
    margin: -1.5rem -0.25rem -2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pricing__grid::-webkit-scrollbar {
    display: none;
  }

  .pricing__grid > .pricing-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
}

.pricing__header + .billing-toggle,
#pvm-plan-cards > .billing-toggle {
  display: flex;
  width: max-content;
}

#pvm-plan-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Modules pricing block: header + billing toggle + 3 taller plan cards
   must share one screen, so tighten the spacing between them */
@media (min-width: 901px) {
  #pvm-pricing .pricing__header {
    margin-bottom: 0.75rem;
  }

  #pvm-pricing .billing-toggle {
    margin-bottom: 1.5rem;
  }

  #pvm-pricing .pricing-card__tagline {
    margin-bottom: 0;
    line-height: 1.45;
  }
}

/* ── Card additions: tagline + price row ───────────────────────── */
.pricing-card__tagline {
  font-size: 0.875rem;
  color: var(--pvm-text-muted);
  margin-top: -0.75rem;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.pricing-card__price-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--pvm-white);
  letter-spacing: -0.02em;
}

.pricing-card__price-period {
  color: var(--pvm-text-muted);
  font-size: 1rem;
}

.pricing-card__price-note {
  font-size: 0.8rem;
  color: var(--pvm-text-muted);
  margin-top: -1rem;
}

/* ── Signup form ────────────────────────────────────────────────── */
.pvm-subscribe-form {
  max-width: 560px;
  margin: 0 auto;
  background: var(--pvm-surface-2);
  border: 1px solid var(--pvm-border-soft);
  border-radius: 16px;
  padding: 2.5rem;
}

.pvm-subscribe-form__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--pvm-surface-3);
  border: 1px solid var(--pvm-border-soft);
  border-radius: 10px;
  padding: 0.9rem 1.2rem;
  margin-bottom: 1.75rem;
  font-size: 0.9rem;
  color: var(--pvm-text-soft);
}

.pvm-subscribe-form__summary strong {
  color: var(--pvm-white);
}

.pvm-subscribe-form__field {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pvm-subscribe-form__field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pvm-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pvm-subscribe-form__field input {
  background: var(--pvm-dark);
  border: 1px solid var(--pvm-border-soft);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--pvm-white);
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
}

.pvm-subscribe-form__field input:focus {
  outline: none;
  border-color: var(--pvm-accent);
}

.pvm-subscribe-form__note {
  font-size: 0.75rem;
  color: var(--pvm-text-muted);
  margin-top: 1rem;
  text-align: center;
}

/* ── Success panel ──────────────────────────────────────────────── */
.pvm-success {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.pvm-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: rgba(207, 250, 58, 0.12);
  color: var(--pvm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.5rem;
}

.pvm-success__link-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--pvm-surface-2);
  border: 1px solid var(--pvm-border-soft);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin: 1.5rem 0;
}

.pvm-success__link-box code {
  flex: 1;
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--pvm-accent-text);
  overflow-x: auto;
  white-space: nowrap;
}

.pvm-success__snippet {
  text-align: left;
  background: var(--pvm-dark);
  border: 1px solid var(--pvm-border-soft);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--pvm-text-soft);
  white-space: pre-wrap;
  word-break: break-all;
  margin: 1rem 0 1.75rem;
}

.pvm-help-request {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--pvm-border-soft);
}

.pvm-help-request textarea {
  width: 100%;
  min-height: 90px;
  background: var(--pvm-dark);
  border: 1px solid var(--pvm-border-soft);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--pvm-white);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  margin: 1rem 0;
  resize: vertical;
}

.pvm-help-request__confirm {
  color: var(--pvm-accent-text);
  font-size: 0.9rem;
  margin-top: 1rem;
}

[hidden] { display: none !important; }

/* ── Liquid Glass device frames ────────────────────────────────────
   Apple-style glass bezel for every phone/tablet mockup: the rim blurs,
   saturates and (in Chromium, via the #liquid-glass SVG filter in each
   page) refracts whatever sits behind it, with specular highlights along
   the edges. Safari can't refract through CSS, so it gets blur + light. */
.device-frame,
.app-stack__card,
.device-trio__phone,
.device-trio__tablet {
  --glass-pad: 7px;
  --glass-r: 38px;
  padding: var(--glass-pad) !important;
  border: none !important;
  border-radius: var(--glass-r) !important;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(255, 255, 255, 0.07) 38%,
    rgba(255, 255, 255, 0.04) 62%,
    rgba(255, 255, 255, 0.20) 100%) !important;
  backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: url(#liquid-glass) blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.70),
    inset 0 -1px 1px rgba(255, 255, 255, 0.20),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.30),
    inset -1px 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 30px 60px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden;
}

.device-frame {
  position: relative;
}

.device-frame img,
.app-stack__card img,
.device-trio__phone img,
.device-trio__tablet img {
  border-radius: calc(var(--glass-r) - var(--glass-pad));
}

/* specular streak across the rim only (masked out of the screen) */
.device-frame::after,
.app-stack__card::after,
.device-trio__phone::after,
.device-trio__tablet::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: var(--glass-pad);
  border-radius: inherit;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0) 24%,
    rgba(255, 255, 255, 0) 72%,
    rgba(255, 255, 255, 0.25) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  z-index: 2;
}

/* ── Real Liquid Glass on first-block screenshot frames ──────────────
   The approved recipe from global/effects/real-liquid-glass.md (same
   values as the login popover): lens refraction via #liquid-lens, light
   frost, specular edges, sheen under the content. Applies to the Websites
   hero trio and the Apps hero phones. */
.app-stack__card,
.device-trio__desktop,
.device-trio__laptop-screen,
.device-trio__tablet,
.device-trio__phone {
  isolation: isolate;
  border: none !important;
  background: rgba(22, 23, 28, 0.32) !important;
  backdrop-filter: blur(7px) saturate(170%) brightness(1.05) !important;
  backdrop-filter: url(#liquid-lens) blur(7px) saturate(170%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(170%) brightness(1.05) !important;
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.55),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 22px rgba(255, 255, 255, 0.06),
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* swap the older rim streak for the approved specular sheen */
.app-stack__card::after,
.device-trio__tablet::after,
.device-trio__phone::after {
  display: none !important;
}

.app-stack__card::before,
.device-trio__desktop::before,
.device-trio__laptop-screen::before,
.device-trio__tablet::before,
.device-trio__phone::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 60% at 15% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(90% 50% at 100% 100%, rgba(255, 255, 255, 0.08), transparent 60%);
  mix-blend-mode: screen;
}

.app-stack__card > *,
.device-trio__desktop > *,
.device-trio__laptop-screen > *,
.device-trio__tablet > *,
.device-trio__phone > * {
  position: relative;
  z-index: 2;
}

/* laptop: glass screen on a slim glass keyboard base */
.device-trio__laptop {
  position: absolute;
  left: 2%;
  bottom: 2%;
  width: 48%;
  z-index: 2;
}

.device-trio__laptop-screen {
  position: relative;
  overflow: hidden;
  padding: 6px !important;
  border-radius: 12px 12px 4px 4px !important;
}

.device-trio__laptop-screen img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-radius: 7px 7px 2px 2px;
}

.device-trio__laptop-base {
  position: relative;
  height: 11px;
  margin: 0 -7%;
  border-radius: 2px 2px 14px 14px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.14) 45%,
    rgba(0, 0, 0, 0.25) 100%);
  backdrop-filter: blur(7px) saturate(170%);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 12px 22px rgba(0, 0, 0, 0.45);
}

/* the thumb notch where the lid opens */
.device-trio__laptop-base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 16%;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 0 0 6px 6px;
  background: rgba(0, 0, 0, 0.28);
}

[data-theme="light"] .device-trio__laptop-base {
  background: linear-gradient(180deg, #ffffff 0%, #e4e4e1 55%, #c9c9c5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 22px rgba(0, 0, 0, 0.16);
}

/* the desktop window gets a thin glass rim too, with its bar on the glass */
.device-trio__desktop {
  padding: 6px !important;
  border-radius: 16px !important;
}

.device-trio__desktop .modules-hero__mockup-bar {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0.35rem 0.6rem 0.55rem !important;
}

.device-trio__desktop img {
  border-radius: 10px;
}

[data-theme="light"] .app-stack__card,
[data-theme="light"] .device-trio__desktop,
[data-theme="light"] .device-trio__laptop-screen,
[data-theme="light"] .device-trio__tablet,
[data-theme="light"] .device-trio__phone {
  background: rgba(255, 255, 255, 0.38) !important;
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.95),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 18px 50px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* ── Login: Liquid Glass popover docked beside the login icon ─────────
   glass-login.js sets left/top next to the icon and --lg-ox/--lg-oy to the
   icon's center, so the panel grows out of the icon and folds back into it.
   Each state's own transition shapes the motion *into* that state. */
.login-modal {
  z-index: 1100 !important;   /* above the fixed navbar (1000) — the panel docks over it */
  /* closing: the panel shrinks back into the icon first, then vanishes */
  transition: opacity 90ms ease 400ms !important;
}

.login-modal.is-open {
  /* opening: visible instantly, so the bubble is seen leaving the icon */
  transition: opacity 0s !important;
}

/* popovers don't dim the page; the overlay just catches outside clicks */
.login-modal__overlay {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.login-modal__box {
  position: fixed !important;
  top: 88px;
  right: auto;
  left: calc(100vw - 344px);
  margin: 0 !important;
  width: min(320px, calc(100vw - 24px)) !important;
  max-width: none !important;
  padding: 1.4rem 1.3rem 1.3rem !important;
  animation: none !important;
  overflow: hidden;
  isolation: isolate;
  /* clear glass: light frost, lens refraction does the work */
  background: rgba(22, 23, 28, 0.32) !important;
  backdrop-filter: blur(7px) saturate(170%) brightness(1.05);
  backdrop-filter: url(#liquid-lens) blur(7px) saturate(170%) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(170%) brightness(1.05);
  border: none !important;
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.55),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 22px rgba(255, 255, 255, 0.06),
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.25) !important;
  border-radius: 999px !important;
  transform-origin: 50% 50%;
  /* closed: an icon-sized glass bubble centred exactly on the login icon */
  transform: translate(var(--lg-dx, 140px), var(--lg-dy, -230px)) scale(0.094);
  opacity: 1;
  transition:
    transform 400ms cubic-bezier(0.55, 0, 0.7, 0.3),
    border-radius 340ms ease-in;
}

/* specular light catching the glass: bright top-left, soft bottom-right */
.login-modal__box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 60% at 15% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(90% 50% at 100% 100%, rgba(255, 255, 255, 0.08), transparent 60%);
  mix-blend-mode: screen;
}

.login-modal.is-open .login-modal__box {
  transform: translate(0, 0) scale(1);
  border-radius: 26px !important;
  opacity: 1;
  /* a softer spring that spreads the growth out so the float is visible */
  transition:
    transform 620ms cubic-bezier(0.32, 1.12, 0.42, 1),
    border-radius 520ms cubic-bezier(0.35, 1, 0.45, 1);
}

/* contents fade in once the panel has grown */
.login-modal__box > :not(.login-modal__close) {
  position: relative;
}

.login-modal__box > * {
  z-index: 2;
  transition: opacity 220ms ease, filter 220ms ease;
  opacity: 0;
  filter: blur(5px);
}

.login-modal.is-open .login-modal__box > * {
  opacity: 1;
  filter: none;
  transition-delay: 260ms;
}

/* compact form for a popover */
.login-modal__box .login-modal__icon {
  display: none !important;
}

.login-modal__box .login-modal__title {
  font-size: 1.15rem !important;
  margin: 0 0 0.15rem !important;
  text-align: left !important;
}

.login-modal__box .login-modal__sub {
  font-size: 0.78rem !important;
  margin: 0 0 1rem !important;
  text-align: left !important;
}

.login-modal__box .login-modal__close {
  top: 0.9rem !important;
  right: 0.9rem !important;
  /* above the title, whose full-width box otherwise covers it and eats the click */
  z-index: 5 !important;
}

/* liquid neck layer (glass-login.js): lives under the panel, over the page */
.login-goo {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* blobs are drawn solid (the goo threshold works on alpha), and the
   translucency is applied after the filter via the group's opacity */
.login-goo g {
  fill: #ffffff;
  opacity: 0.48;
}

[data-theme="light"] .login-goo g {
  opacity: 0.9;
}

[data-theme="light"] .login-goo {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}

.login-modal__box {
  z-index: 1 !important;
}

/* ── Websites page, blocks 3–5: every card in Real Liquid Glass ─────
   What You Get, How It Works and Pricing cards use the approved recipe
   (global/effects/real-liquid-glass.md); hover lift stays as before. */
.glass-cards .modules-features .module-feature-card,
.glass-cards .modules-how__step,
.glass-cards .pricing .pricing-card {
  position: relative;
  isolation: isolate;
  border: none !important;
  background: rgba(22, 23, 28, 0.32) !important;
  backdrop-filter: blur(7px) saturate(170%) brightness(1.05);
  backdrop-filter: url(#liquid-lens) blur(7px) saturate(170%) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(170%) brightness(1.05);
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.55),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 22px rgba(255, 255, 255, 0.06),
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* the featured package keeps a lime tint and a lime-lit rim */
.glass-cards .pricing .pricing-card--featured {
  background: rgba(207, 250, 58, 0.07) !important;
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.55),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(207, 250, 58, 0.35),
    inset 0 0 26px rgba(207, 250, 58, 0.08),
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(207, 250, 58, 0.08) !important;
}

/* "What You Get" cards styled exactly like the "How It Works" cards:
   same radius, round lime badge, Inter title, muted description, hover */
.glass-cards .modules-features .module-feature-card {
  display: block !important;
  text-align: center;
  padding: 2rem 1.5rem !important;
  border-radius: 16px !important;
  transition: transform 0.25s ease !important;
}

.glass-cards .modules-features .module-feature-card:hover {
  transform: translateY(-4px) !important;
}

.glass-cards .modules-features .module-feature-card::before {
  display: none !important;   /* drop the old lime hover glow */
}

.glass-cards .modules-features .module-feature-card__icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(207, 250, 58, 0.12) !important;
  border: 1px solid rgba(207, 250, 58, 0.25) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem !important;
}

.glass-cards .modules-features .module-feature-card__icon svg {
  width: 20px;
  height: 20px;
}

.glass-cards .modules-features .module-feature-card__title {
  font-family: 'Inter', 'Segoe UI', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  margin: 0 0 0.5rem !important;
  letter-spacing: normal !important;
}

.glass-cards .modules-features .module-feature-card__desc {
  font-size: 0.875rem !important;
  color: rgba(255, 255, 255, 0.45) !important;
  line-height: 1.6 !important;
  max-width: none !important;
  margin: 0 !important;
}

[data-theme="light"] .glass-cards .modules-features .module-feature-card__icon {
  background: rgba(150, 190, 0, 0.1) !important;
  border-color: rgba(150, 190, 0, 0.25) !important;
}

[data-theme="light"] .glass-cards .modules-features .module-feature-card__icon svg {
  stroke: #7A9A0A !important;
}

[data-theme="light"] .glass-cards .modules-features .module-feature-card__title {
  color: #111111 !important;
}

[data-theme="light"] .glass-cards .modules-features .module-feature-card__desc {
  color: rgba(0, 0, 0, 0.45) !important;
}

/* specular sheen across the top-left, under the card's content */
.glass-cards .modules-features .module-feature-card::after,
.glass-cards .modules-how__step::after,
.glass-cards .pricing .pricing-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(120% 60% at 15% 0%, rgba(255, 255, 255, 0.12), transparent 55%),
    radial-gradient(90% 50% at 100% 100%, rgba(255, 255, 255, 0.05), transparent 60%);
  mix-blend-mode: screen;
}

[data-theme="light"] .glass-cards .modules-features .module-feature-card,
[data-theme="light"] .glass-cards .modules-how__step,
[data-theme="light"] .glass-cards .pricing .pricing-card {
  background: transparent !important;   /* clear glass: no tint */
  /* no brightening on a light page — that turned the glass into white panels */
  backdrop-filter: blur(4px) saturate(140%) !important;
  backdrop-filter: url(#liquid-lens) blur(4px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(140%) !important;
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 1),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px rgba(0, 0, 0, 0.09),
    inset 0 -12px 24px rgba(0, 0, 0, 0.025),
    0 18px 44px rgba(0, 0, 0, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

/* glass reflection: a soft diagonal sheen across the top-left */
[data-theme="light"] .glass-cards .modules-features .module-feature-card::after,
[data-theme="light"] .glass-cards .modules-how__step::after,
[data-theme="light"] .glass-cards .pricing .pricing-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: normal;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 32%, rgba(255, 255, 255, 0) 55%);
}

[data-theme="light"] .glass-cards .pricing .pricing-card--featured {
  background: transparent !important;
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.95),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.6),
    inset 0 0 0 1.5px rgba(150, 190, 30, 0.55),
    0 18px 50px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* Portfolio arrows, dark mode: clear glass — no tint, only the rim light
   (the id outranks the shared glass tint below; hover keeps its tint).
   Light mode keeps the shared rules, so they match the header icons. */
html:not([data-theme="light"]) #websites-work .site-deck__caption .work-slider__arrow:not(:hover),
html:not([data-theme="light"]) #pvm-work .site-deck__caption .work-slider__arrow:not(:hover) {
  background: transparent !important;
}

/* ── Header icons (login + theme) in Real Liquid Glass ──────────────
   Same recipe as global/effects/real-liquid-glass.md, at button scale. */
.navbar__auth-btn--icon,
.theme-toggle,
.navbar__hamburger,
.site-deck__caption .work-slider__arrow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: none !important;
  color: #D4D4D8 !important;   /* light grey glyphs on dark */
  background: rgba(22, 23, 28, 0.32) !important;
  backdrop-filter: blur(7px) saturate(170%) brightness(1.05) !important;
  backdrop-filter: url(#liquid-lens) blur(7px) saturate(170%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(170%) brightness(1.05) !important;
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.55),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 8px rgba(255, 255, 255, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.35) !important;
  transition: transform 260ms cubic-bezier(0.3, 1.4, 0.5, 1), background 200ms ease, box-shadow 220ms ease !important;
}

.navbar__auth-btn--icon::after,
.theme-toggle::after,
.navbar__hamburger::after,
.site-deck__caption .work-slider__arrow::after {
  content: '';
  display: block !important;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(120% 70% at 25% 0%, rgba(255, 255, 255, 0.28), transparent 60%);
  mix-blend-mode: screen;
}

.navbar__auth-btn--icon svg,
.theme-toggle svg,
.theme-toggle span {
  position: relative;
  z-index: 1;
}

.navbar__auth-btn--icon:hover,
.theme-toggle:hover,
.navbar__hamburger:hover,
.site-deck__caption .work-slider__arrow:hover {
  transform: scale(1.08) !important;
  background: rgba(207, 250, 58, 0.12) !important;
  color: #FFFFFF !important;
}

.navbar__auth-btn--icon:active,
.theme-toggle:active,
.navbar__hamburger:active,
.site-deck__caption .work-slider__arrow:active {
  transform: scale(0.94) !important;
}

/* light mode: resting look = the former light hover (bright white glass,
   dark icon); hover now adds a small lift and a deeper shadow */
[data-theme="light"] .navbar__auth-btn--icon,
[data-theme="light"] .theme-toggle,
[data-theme="light"] .navbar__hamburger,
[data-theme="light"] .site-deck__caption .work-slider__arrow {
  color: #111111 !important;
  background: rgba(255, 255, 255, 0.6) !important;
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.95),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .navbar__auth-btn--icon:hover,
[data-theme="light"] .theme-toggle:hover,
[data-theme="light"] .navbar__hamburger:hover,
[data-theme="light"] .site-deck__caption .work-slider__arrow:hover {
  transform: translateY(-1px) scale(1.06) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  color: #000000 !important;
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1),
    0 8px 20px rgba(0, 0, 0, 0.16) !important;
}

.login-modal__box .login-modal__form {
  gap: 0.7rem !important;
}

.login-modal__box .login-modal__field {
  gap: 0.3rem !important;
}

.login-modal__box .login-modal__field label {
  font-size: 0.72rem !important;
}

.login-modal__box .login-modal__field input {
  padding: 0.6rem 0.8rem !important;
  font-size: 0.85rem !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.login-modal__box .login-modal__submit {
  padding: 0.7rem 1rem !important;
  font-size: 0.8rem !important;
  border-radius: 12px !important;
  margin-top: 0.2rem;
}

.login-modal__box #login-form-error {
  margin-bottom: 0 !important;
}

/* light mode: light glass with dark text */
[data-theme="light"] .login-modal__box {
  background: rgba(255, 255, 255, 0.38) !important;
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.95),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 18px 50px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .login-modal__box .login-modal__title { color: #111111 !important; }
[data-theme="light"] .login-modal__box .login-modal__sub { color: #555555 !important; }
[data-theme="light"] .login-modal__box .login-modal__field label { color: #333333 !important; }
[data-theme="light"] .login-modal__box .login-modal__close { color: #333333 !important; }

[data-theme="light"] .login-modal__box .login-modal__field input {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #111111 !important;
}

@media (prefers-reduced-motion: reduce) {
  .login-modal__box,
  .login-modal.is-open .login-modal__box {
    transition: opacity 150ms ease !important;
    transform: none !important;
  }
}

.device-trio__phone { --glass-pad: 4px; --glass-r: 18px; }
.device-trio__tablet { --glass-pad: 6px; --glass-r: 18px; }

[data-theme="light"] .device-frame,
[data-theme="light"] .app-stack__card,
[data-theme="light"] .device-trio__phone,
[data-theme="light"] .device-trio__tablet {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.35) 40%,
    rgba(255, 255, 255, 0.25) 62%,
    rgba(255, 255, 255, 0.7) 100%) !important;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08),
    0 24px 50px rgba(0, 0, 0, 0.16) !important;
}

/* Mobile: cards stay put — no hover lift (a tap leaves :hover stuck on
   phones, so the card would jump up and stay there) */
@media (max-width: 900px) {
  .module-feature-card:hover,
  .glass-cards .modules-features .module-feature-card:hover,
  .modules-features .module-feature-card:hover,
  .modules-how__step:hover,
  .pricing-card:hover,
  .pillar-card:hover,
  .service-card:hover,
  .work-card:hover,
  .process__step:hover,
  .app-card:hover {
    transform: none !important;
  }
}

/* Mobile: a smaller login window (centred by glass-login.js) */
@media (max-width: 900px) {
  .login-modal__box {
    width: min(280px, calc(100vw - 48px)) !important;
    padding: 1.1rem 1rem 1rem !important;
  }

  .login-modal__box .login-modal__title {
    font-size: 1.25rem !important;
  }

  .login-modal__box .login-modal__sub {
    font-size: 0.8rem !important;
    margin-bottom: 0.9rem !important;
  }

  .login-modal__box .login-modal__field {
    margin-bottom: 0.6rem !important;
  }

  .login-modal__box .login-modal__field label {
    font-size: 0.75rem !important;
    margin-bottom: 0.3rem !important;
  }

  /* 16px: below that, iPhone zooms the page in when a field is focused */
  .login-modal__box .login-modal__field input {
    padding: 0.65rem 0.8rem !important;
    font-size: 1rem !important;
  }

  .login-modal__box #login-form-error {
    margin-bottom: 0.4rem !important;
  }

  .login-modal__box .login-modal__submit {
    padding: 0.8rem 1rem !important;
    font-size: 0.9rem !important;
    min-height: 46px;
  }
}

/* Mobile: the hero devices are 2-4x smaller than on desktop, so their glass
   frames and corners shrink with them (the desktop values read as thick pills) */
@media (max-width: 700px) {
  .device-trio__desktop {
    padding: 3px !important;
    border-radius: 9px !important;
  }

  .device-trio__desktop img {
    border-radius: 6px;
  }

  .device-trio__desktop .modules-hero__mockup-bar {
    padding: 0.25rem 0.45rem 0.35rem !important;
  }

  .device-trio__laptop-screen {
    padding: 3px !important;
    border-radius: 7px 7px 2px 2px !important;
  }

  .device-trio__laptop-screen img {
    border-radius: 4px 4px 1px 1px;
  }

  .device-trio__laptop-base {
    height: 8px;
  }

  .device-trio__tablet { --glass-pad: 3px; --glass-r: 10px; }
  .device-trio__phone { --glass-pad: 2.5px; --glass-r: 9px; }
}

/* ── Mobile polish ────────────────────────────────────────────────────
   Touch-sized controls, readable type, no iOS focus-zoom, full-width
   buttons. Measured with a phone audit (tap targets >= 40px, field text
   16px, nothing cut off at 360-430px wide). */
html {
  -webkit-text-size-adjust: 100%;
}

a, button, [role="button"], input, select, textarea, label, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 992px) {
  /* the old slide-in menu is replaced by the bottom island */
  .mobile-nav,
  .mobile-nav-overlay {
    display: none !important;
  }

  /* header icons: a 40px touch target (30px on desktop) */
  .navbar__inner .navbar__auth-btn--icon,
  .navbar__inner .theme-toggle,
  .navbar__inner .navbar__dashboard {
    width: 40px !important;
    height: 40px !important;
  }

  .navbar__inner .navbar__auth-btn--icon svg,
  .navbar__inner .navbar__dashboard svg,
  .navbar__inner .theme-toggle svg {
    width: 18px;
    height: 18px;
  }

  .navbar__inner {
    gap: 0.5rem;
  }
}

/* small phones: tighter island so all four titles fit in one row */
@media (max-width: 380px) {
  body > .navbar__links .nav-link {
    padding: 0.85rem 0.6rem;
    font-size: 0.68rem;
  }
}

/* very small phones (320px): tighter menu and header icons */
@media (max-width: 340px) {
  body > .navbar__links .nav-link {
    padding: 0.85rem 0.5rem;
    font-size: 0.64rem;
  }

  .navbar__inner .navbar__auth-btn--icon,
  .navbar__inner .theme-toggle,
  .navbar__inner .navbar__dashboard {
    width: 36px !important;
    height: 36px !important;
  }
}

@media (max-width: 700px) {
  /* forms: 16px text (no iOS zoom on focus) */
  main input,
  main select,
  main textarea {
    font-size: 16px !important;
  }

  /* hero + closing buttons: equal, full width, easy to hit with a thumb */
  .modules-hero__actions,
  .modules-cta__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    max-width: 420px;
  }

  .modules-cta__actions {
    margin-inline: auto;
  }

  .modules-hero__actions .btn,
  .modules-cta__actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }

  /* let hero headlines wrap naturally ("...Way to / Sell Real Estate") */
  .modules-hero h2 br {
    display: none;
  }

  /* Plans: billing switch fits the screen as three equal choices */
  #pvm-plan-cards > .billing-toggle {
    display: flex !important;
    width: 100% !important;
    max-width: 420px;
    gap: 0.2rem;
    margin-bottom: 1.25rem;
  }

  .billing-toggle__option {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    min-height: 48px;
    padding: 0.45rem 0.2rem;
    font-size: 0.8rem;
    line-height: 1.15;
    text-align: center;
  }

  .billing-toggle__save-badge {
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
  }

  /* pricing heading: same look as the other sections (it had no style) */
  .pricing__header {
    margin-bottom: 2rem;
  }

  .pricing__header h2 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(2rem, 8vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.04em;
    margin-bottom: 1rem;
  }

  .pricing__header h2 em {
    font-style: normal;
    color: #CFFA3A;
  }

  .pricing__header p {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
  }

  [data-theme="light"] .pricing__header p {
    color: rgba(0, 0, 0, 0.55);
  }

  main:not(.admin-page) section .pricing-card__features li {
    font-size: 0.875rem !important;
  }

  .app-store-badge {
    min-height: 44px;
  }

  /* footer: bigger icons and links, readable fine print */
  .footer__social-link {
    width: 44px;
    height: 44px;
  }

  .footer__col a {
    display: inline-block;
    padding: 0.65rem 0;
  }

  .footer__bottom p {
    font-size: 0.8125rem;
  }
}

/* light theme: small lime labels were unreadable on the cream background */
[data-theme="light"] .section-label {
  color: #6B8700;
}

/* ── Island echo (js/island-echo.js): the menu's glass without the SVG lens ──
   Browsers that cannot bend the backdrop (iPhone Safari/Chrome, Firefox) show a
   live, smeared, colour-split copy of the page behind the bottom menu. */
.island-echo {
  display: none;
}

@media (max-width: 992px) {
  .island-echo-on body > .navbar__links > .island-echo {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }

  .island-echo__blur {
    position: absolute;
    inset: -110px;
    filter: blur(4px) saturate(170%) brightness(1.05);
  }

  .island-echo__smear {
    position: absolute;
    inset: 0;
    filter: url(#island-smear);
  }

  .island-echo__page {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    will-change: transform;
    pointer-events: none;
  }

  /* the glass tint sits over the copy, under the menu titles */
  .island-echo-on body > .navbar__links > .island-echo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(22, 23, 28, 0.32);
  }

  [data-theme="light"].island-echo-on body > .navbar__links > .island-echo::after,
  [data-theme="light"] .island-echo-on body > .navbar__links > .island-echo::after {
    background: rgba(255, 255, 255, 0.38);
  }

  /* ?echo=1 on a Chromium browser: switch the real lens off to preview the fallback */
  .echo-forced body > .navbar__links {
    backdrop-filter: blur(7px) saturate(170%) brightness(1.05) !important;
  }
}

/* ── Logged in, on a phone ───────────────────────────────────────────
   Public pages: header Dashboard · Logout · Theme, bottom bar as usual.
   Admin page only (html.is-admin): header Dashboard · Menu · Logout · Theme,
   page links under the menu button, and no bottom bar (it covered the
   dashboard's own bottom navigation). html.is-authed is set by main.js / the
   page's early script. */
@media (max-width: 992px) {
  .is-authed.is-admin body > .navbar__links {
    display: none !important;
  }

  /* the slide-down menu is back, for logged-in users only */
  .is-authed.is-admin .mobile-nav,
  .is-authed.is-admin .mobile-nav-overlay {
    display: block !important;
  }

  .is-authed.is-admin .mobile-nav .navbar__auth-btn--mobile {
    display: none;
  }

  .is-authed.is-admin .navbar__hamburger {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    margin: 0 !important;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    z-index: 1;
  }

  .is-authed.is-admin .navbar__hamburger span {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 2px;
    background: currentColor;
  }

  .is-authed.is-admin .navbar__hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .is-authed.is-admin .navbar__hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* order: Dashboard, Menu, Logout, Theme (logo stays first, group on the right) */
  .is-authed .navbar__logo                       { margin-right: auto; }   /* pushes the icon group to the right edge, whichever icons are showing */
  .is-authed .navbar__inner .navbar__dashboard   { order: 1; }
  .is-authed .navbar__inner .navbar__hamburger   { order: 2; }
  .is-authed .navbar__inner .navbar__auth-btn--icon[data-login] { order: 3; margin-left: 0 !important; }
  .is-authed .navbar__inner .theme-toggle        { order: 4; }

  /* four icons need room: the logo box (205px wide, mostly empty on the right) shrinks */
  .is-authed .navbar__logo,
  .is-authed .navbar__logo-img {
    width: 150px;
    max-width: 150px;
  }

  .is-authed .navbar__inner {
    gap: 0.4rem;
  }

  /* the header already has Dashboard and the menu's own close (the X) */
  .is-authed.is-admin .mobile-nav #admin-link-mobile,
  .is-authed.is-admin .mobile-nav__close {
    display: none !important;
  }

  .is-authed.is-admin .mobile-nav__links a.active {
    color: #CFFA3A;
  }

  [data-theme="light"].is-authed .mobile-nav__links a.active {
    color: #4A6300;
  }

}

/* logged-in header on small phones: smaller logo box and icons so all four icons fit */
@media (max-width: 380px) {
  .is-authed .navbar__logo,
  .is-authed .navbar__logo-img {
    width: 116px;
    max-width: 116px;
  }

  .is-authed .navbar__inner .navbar__dashboard,
  .is-authed .navbar__inner .navbar__auth-btn--icon,
  .is-authed .navbar__inner .theme-toggle,
  .is-authed .navbar__inner .navbar__hamburger {
    width: 36px !important;
    height: 36px !important;
  }

  .is-authed .navbar__inner {
    gap: 0.3rem;
  }
}

/* a logged-in visitor sees the Dashboard icon straight away (main.js hides it again if the session turns out to be over) */
.is-authed #admin-link {
  display: inline-flex !important;
}

.is-authed li#admin-link {
  display: list-item !important;
}

/* ── Footer spacing ───────────────────────────────────────────────────
   8-point rhythm. Three blocks (brand, Explore, Contact) in a three-column
   grid — the old four-column grid left an empty column and big gaps. */
.footer {
  padding-top: 4rem;
}

.footer__brand .footer__logo-img {
  margin-bottom: 0.75rem;
  margin-left: -28px;   /* the animation box has empty space on its left: line the artwork up with the text below */
}

.footer__brand p {
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.footer__col h3 {
  margin-bottom: 1rem;
}

.footer__col ul {
  gap: 0.625rem;
}

.footer__bottom {
  margin-top: 2.5rem;
  padding-block: 1.25rem;
}

@media (min-width: 901px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2.5rem;
  }
}

/* tablet and phone: brand across the top, Explore and Contact side by side */
@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .footer {
    padding-top: 2.5rem;
  }

  .footer__brand .footer__logo-img {
    height: 56px;
    width: 160px;
    margin-bottom: 0.5rem;
    margin-left: -23px;
  }

  .footer__brand p {
    margin-bottom: 1rem;
  }

  .footer__col h3 {
    margin-bottom: 0.25rem;
  }

  /* link rows are 44px tall on their own (touch target), so no extra gap */
  .footer__col ul {
    gap: 0;
  }

  .footer__bottom {
    margin-top: 1.5rem;
    padding-block: 1rem;
    gap: 0.25rem;
  }
}

/* ── Smooth page changes ──────────────────────────────────────────────
   Switching pages cross-fades the content while the header and the bottom
   menu stay exactly where they are (Chrome, Edge, Safari 18+; others just
   navigate as usual). */
@view-transition {
  navigation: auto;
}

.navbar {
  view-transition-name: site-header;
}

@media (max-width: 992px) {
  body > .navbar__links {
    view-transition-name: site-island;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ── True black / true white ──────────────────────────────────────────
   Dark theme: black page, black footer. Light theme: white page, white
   footer. The <html> colour is what shows in the overscroll area and behind
   the browser's own top and bottom bars on a phone. */
html {
  background: #000000;
  color-scheme: dark;
}

html[data-theme="light"] {
  background: #FFFFFF;
  color-scheme: light;
}

body {
  background:
    radial-gradient(circle at top left, rgba(207, 250, 58, 0.06), transparent 24%),
    linear-gradient(135deg, #000000 0%, #040405 100%);
  background-color: #000000;
}

[data-theme="light"] body {
  background: #FFFFFF;
  background-color: #FFFFFF;
}

.footer {
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .footer {
  background: #FFFFFF;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* the light footer needs dark text and a dark logo */
[data-theme="light"] .footer .footer__logo-img {
  filter: none;
}

[data-theme="light"] .footer__brand p,
[data-theme="light"] .footer__col ul a {
  color: #555555;
}

[data-theme="light"] .footer__col h3 {
  color: #111111;
}

[data-theme="light"] .footer__social-link {
  color: #555555;
  border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .footer__bottom {
  border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .footer__bottom p {
  color: #777777;
}

[data-theme="light"] .footer__bottom span {
  color: #4A6300;
}

[data-theme="light"] .footer__col ul a:hover,
[data-theme="light"] .footer__social-link:hover {
  color: #4A6300;
  border-color: #4A6300;
}

/* the page sections no longer paint their own greys: the black (dark) or white (light)
   base shows from the very top to the footer */
main:not(.admin-page) > section,
[data-theme="light"] main:not(.admin-page) > section {
  background: transparent !important;
}

/* ── See-through browser bars (iPhone) ────────────────────────────────
   The page runs under the status bar and Safari's toolbar (viewport-fit=cover,
   no theme-color), so the header and the first block are pushed below the
   notch; the bottom menu already sits above the home bar. */
.navbar {
  padding-top: env(safe-area-inset-top, 0px);
}

@media (max-width: 900px) {
  main:not(.admin-page) > section:first-child {
    padding-top: calc(92px + env(safe-area-inset-top, 0px)) !important;
  }
}

/* ── Login window on phones: same motion, same curves, ~38% shorter ─────
   (glass-login.js speeds the liquid neck up by the same factor) */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .login-modal {
    transition: opacity 60ms ease 250ms !important;
  }

  .login-modal__box {
    will-change: transform;
    transition:
      transform 250ms cubic-bezier(0.55, 0, 0.7, 0.3),
      border-radius 210ms ease-in !important;
  }

  .login-modal.is-open .login-modal__box {
    transition:
      transform 385ms cubic-bezier(0.32, 1.12, 0.42, 1),
      border-radius 320ms cubic-bezier(0.35, 1, 0.45, 1) !important;
  }

  .login-modal__box > * {
    transition: opacity 140ms ease, filter 140ms ease !important;
  }

  .login-modal.is-open .login-modal__box > * {
    transition-delay: 160ms !important;
  }
}

/* ── Admin page in the public pages' look ───────────────────────────────
   Same true-black (or white) page with the lime corner glow, Real Liquid
   Glass cards, Space Grotesk headings, uppercase labels, the site's buttons
   and form fields. The sections menu is a glass pill with the sliding lime
   bubble: in the sidebar on desktop, and on phones the same floating island
   as the public pages' bottom menu (short titles so all five fit). */
main.admin-page .admin-content,
[data-theme="light"] main.admin-page .admin-content {
  background: transparent;
  border-top: none;
}

main.admin-page .admin-content::before,
main.admin-page .admin-content::after {
  display: none;
}

/* the cards' glass shadow must not be cut off at the column's edge (the
   container already clips sideways, with room to spare) */
main.admin-page .admin-main {
  overflow: visible;
}

/* the panels are sections, not boxes: heading on the page, cards below */
main.admin-page :is(.admin-overview, .mission-control, .admin-users, .admin-office),
[data-theme="light"] main.admin-page :is(.admin-overview, .mission-control, .admin-users, .admin-office) {
  margin-top: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

main.admin-page :is(.admin-overview__head, .mission-control__head, .admin-users__head, .admin-office__head) {
  margin-bottom: 2rem;
}

/* programmatic focus after switching panels: no lime frame around the title */
main.admin-page h2[tabindex="-1"]:focus {
  outline: none;
}

/* ── Type ── */
main.admin-page :is(.admin-overview__title, .mission-control__title, .admin-users__title, .admin-office__title) {
  margin: 0.5rem 0 0.75rem;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}

main.admin-page :is(.admin-overview__sub, .mission-control__sub, .admin-users__sub, .admin-office__sub) {
  display: block;
  max-width: 46rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  -webkit-line-clamp: unset;
  overflow: visible;
}

main.admin-page :is(.admin-card__title, .admin-sidebar__title) {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}

main.admin-page .mission-card__head h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

/* small labels: the contact form's label style */
main.admin-page :is(.admin-kpi-card__label, .admin-card__label, .stat .stat__label, .metric-list__caption, .admin-users__field span, .admin-users__table th, .admin-sidebar__meta span) {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #BBBBBB;
}

main.admin-page .admin-sidebar__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #CFFA3A;
}

main.admin-page .admin-kpi-card__value {
  margin-top: 0.5rem;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}

main.admin-page :is(.admin-card__value, .stat .stat__value, .task-state strong, .metric-list > div strong, .admin-sidebar__meta strong) {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

main.admin-page :is(.admin-card__text, .admin-users__status, .admin-users__check, .admin-office__updated, .task-state span, .metric-list > div span, .role-item p, .timeline-item__meta, .decision-item__reason, .decision-item__meta, .mission-empty) {
  color: rgba(255, 255, 255, 0.6);
}

/* ── Cards: Real Liquid Glass, as on the Websites and Apps pages ── */
main.admin-page :is(.admin-kpi-card, .admin-card, .mission-card) {
  position: relative;
  isolation: isolate;
  border: none;
  border-radius: 16px;
  background: rgba(22, 23, 28, 0.32);
  backdrop-filter: blur(7px) saturate(170%) brightness(1.05);
  backdrop-filter: url(#liquid-lens) blur(7px) saturate(170%) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(170%) brightness(1.05);
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.55),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 22px rgba(255, 255, 255, 0.06),
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease;
}

main.admin-page .admin-kpi-card {
  padding: 1.5rem;
}

main.admin-page :is(.admin-card, .mission-card) {
  padding: 2rem 1.5rem;
}

main.admin-page .admin-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
}

/* specular sheen across the top-left, under the content (replaces the lime hover wash) */
main.admin-page :is(.admin-kpi-card, .admin-card, .mission-card)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  background:
    radial-gradient(120% 60% at 15% 0%, rgba(255, 255, 255, 0.12), transparent 55%),
    radial-gradient(90% 50% at 100% 100%, rgba(255, 255, 255, 0.05), transparent 60%);
  mix-blend-mode: screen;
}

/* rows inside a card: quiet fills, no frames */
main.admin-page :is(.stat, .task-state, .metric-list > div, .role-item, .decision-item, .timeline-item) {
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

main.admin-page :is(.stat--secondary, .metric-list--synced > div) {
  background: transparent;
}

main.admin-page :is(.admin-card--profile .admin-card__content > .admin-profile-field, .admin-users__table th, .admin-users__table td) {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

main.admin-page .admin-card__group + .admin-card__group {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* ── Buttons: the site's buttons ── */
main.admin-page :is(.admin-btn, .admin-office__refresh) {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: #FFFFFF;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

main.admin-page .admin-btn {
  padding: 0.9rem 1.5rem;
}

main.admin-page :is(.admin-btn, .admin-office__refresh):hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(207, 250, 58, 0.6);
  background: rgba(255, 255, 255, 0.03);
  color: #CFFA3A;
}

/* a form's own action is the lime button */
main.admin-page form .admin-btn[type="submit"] {
  border: none;
  background: linear-gradient(135deg, #CFFA3A 0%, #DFFF5B 100%);
  color: #060606;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

main.admin-page form .admin-btn[type="submit"]:hover:hover {
  color: #060606;
  background: linear-gradient(135deg, #CFFA3A 0%, #DFFF5B 100%);
  filter: brightness(1.05);
}

main.admin-page .admin-btn--danger {
  border-color: rgba(255, 107, 107, 0.45);
  color: #FF8E8E;
}

main.admin-page .admin-btn--danger:hover:not(:disabled) {
  border-color: rgba(255, 107, 107, 0.8);
  color: #FF8E8E;
}

main.admin-page .admin-btn--inline {
  padding: 0.5rem 0.8rem;
  font-size: 0.6875rem;
}

main.admin-page .admin-office__refresh {
  padding: 0.6rem 1rem;
}

/* ── Fields: the contact form's fields ── */
main.admin-page .admin-users__field :is(input, select, textarea) {
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.03);
  color: #FFFFFF;
  font-size: 0.875rem;
}

main.admin-page .admin-users__field :is(input, select, textarea):focus {
  border-color: rgba(207, 250, 58, 0.6);
  box-shadow: none;
}

@media (max-width: 992px) {
  /* 16px text: iPhone does not zoom into the field */
  main.admin-page .admin-users__field :is(input, select, textarea) {
    font-size: 1rem;
  }
}

/* ── Sections menu (desktop sidebar) ── */
@media (min-width: 993px) {
  main.admin-page .admin-sidebar {
    border: none;
    border-radius: 16px;
    background: rgba(22, 23, 28, 0.32);
    backdrop-filter: blur(7px) saturate(170%) brightness(1.05);
    backdrop-filter: url(#liquid-lens) blur(7px) saturate(170%) brightness(1.05);
    -webkit-backdrop-filter: blur(12px) saturate(170%) brightness(1.05);
    box-shadow:
      inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.55),
      inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.22),
      inset 0 0 0 1px rgba(255, 255, 255, 0.10),
      inset 0 0 22px rgba(255, 255, 255, 0.06),
      0 18px 50px rgba(0, 0, 0, 0.45),
      0 2px 6px rgba(0, 0, 0, 0.25);
  }

  main.admin-page .admin-sidebar__title {
    margin: 0.5rem 0 1.5rem;
  }

  main.admin-page .admin-sidebar__nav {
    position: relative;
    gap: 0.15rem;
  }

  main.admin-page .admin-sidebar__meta {
    border-top-color: rgba(255, 255, 255, 0.08);
  }
}

main.admin-page .admin-sidebar__link {
  position: relative;
  z-index: 1;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #BBBBBB;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 1.15rem;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

main.admin-page .admin-sidebar__link:hover,
main.admin-page .admin-sidebar__link.is-active {
  border-color: transparent;
  background: transparent;
  transform: none;
}

main.admin-page .admin-sidebar__link:hover {
  color: #FFFFFF;
}

main.admin-page .admin-sidebar__link.is-active {
  color: #CFFA3A;
}

main.admin-page .admin-sidebar__link svg,
main.admin-page .admin-sidebar__short {
  display: none;
}

/* the bubble (main.js): placed by left/top/width/height so it works down the
   sidebar and across the island alike; same lime glass and spring as the menu */
main.admin-page .admin-sidebar__nav > .nav-bubble {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  transition:
    left 420ms cubic-bezier(0.3, 1.25, 0.5, 1),
    top 420ms cubic-bezier(0.3, 1.25, 0.5, 1),
    width 420ms cubic-bezier(0.3, 1.25, 0.5, 1),
    height 420ms cubic-bezier(0.3, 1.25, 0.5, 1),
    transform 200ms ease,
    opacity 200ms ease;
}

/* ── Sections menu on phones: the public bottom island ── */
@media (max-width: 992px) {
  /* same top space as the public pages' first block; bottom clears the island */
  main.admin-page .admin-content {
    padding-top: calc(92px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(2rem + 64px + env(safe-area-inset-bottom, 0px));
  }

  main.admin-page .admin-sidebar__nav {
    left: 0;
    right: 0;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: none;
    z-index: 1050;
    gap: 0;
    padding: 4px;
    overflow: hidden;
    isolation: isolate;
    border: none;
    border-radius: 999px;
    background: transparent;
    backdrop-filter: blur(7px) saturate(170%) brightness(1.05);
    backdrop-filter: url(#liquid-lens) blur(7px) saturate(170%) brightness(1.05);
    -webkit-backdrop-filter: blur(7px) saturate(170%) brightness(1.05);
    box-shadow:
      inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.55),
      inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.22),
      inset 0 0 0 1px rgba(255, 255, 255, 0.10),
      inset 0 0 22px rgba(255, 255, 255, 0.06),
      0 18px 50px rgba(0, 0, 0, 0.45),
      0 2px 6px rgba(0, 0, 0, 0.25);
    transition: opacity 160ms ease;
  }

  main.admin-page .admin-sidebar__nav::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(120% 60% at 15% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
      radial-gradient(90% 50% at 100% 100%, rgba(255, 255, 255, 0.08), transparent 60%);
  }

  /* hidden while typing (the keyboard is up) */
  body:has(main.admin-page :is(input, select, textarea):focus) .admin-sidebar__nav {
    opacity: 0;
    pointer-events: none;
  }

  main.admin-page .admin-sidebar__link {
    width: auto;
    height: auto;
    padding: 0.85rem 0.95rem;
    border-radius: 999px;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  main.admin-page .admin-sidebar__link:hover {
    background: transparent;
  }

  main.admin-page .admin-sidebar__short {
    display: inline;
  }
}

/* small phones: the public menu's own sizes */
@media (max-width: 380px) {
  main.admin-page .admin-sidebar__link {
    padding: 0.85rem 0.6rem;
    font-size: 0.68rem;
  }
}

@media (max-width: 340px) {
  main.admin-page .admin-sidebar__link {
    padding: 0.85rem 0.5rem;
    font-size: 0.64rem;
  }
}

/* ── Light theme ── */
[data-theme="light"] main.admin-page :is(.admin-overview__title, .mission-control__title, .admin-users__title, .admin-office__title, .admin-card__title, .admin-sidebar__title, .mission-card__head h3, .admin-kpi-card__value, .admin-card__value, .stat .stat__value, .task-state strong, .metric-list > div strong, .admin-sidebar__meta strong, .admin-users__table td) {
  color: #111111;
}

[data-theme="light"] main.admin-page :is(.admin-overview__sub, .mission-control__sub, .admin-users__sub, .admin-office__sub, .admin-card__text, .admin-users__status, .admin-users__check, .admin-office__updated, .task-state span, .metric-list > div span, .role-item p, .timeline-item__meta, .decision-item__reason, .decision-item__meta, .mission-empty) {
  color: #555555;
}

[data-theme="light"] main.admin-page :is(.admin-kpi-card__label, .admin-card__label, .stat .stat__label, .metric-list__caption, .admin-users__field span, .admin-users__table th, .admin-sidebar__meta span) {
  color: #555555;
}

[data-theme="light"] main.admin-page .admin-sidebar__eyebrow {
  color: #6B8700;
}

[data-theme="light"] main.admin-page :is(.admin-kpi-card, .admin-card, .mission-card) {
  background: transparent;
  backdrop-filter: blur(4px) saturate(140%);
  backdrop-filter: url(#liquid-lens) blur(4px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 1),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px rgba(0, 0, 0, 0.09),
    inset 0 -12px 24px rgba(0, 0, 0, 0.025),
    0 18px 44px rgba(0, 0, 0, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] main.admin-page :is(.admin-kpi-card, .admin-card, .mission-card)::after {
  mix-blend-mode: normal;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 32%, rgba(255, 255, 255, 0) 55%);
}

[data-theme="light"] main.admin-page :is(.stat, .task-state, .metric-list > div, .role-item, .decision-item, .timeline-item) {
  border: none;
  background: rgba(0, 0, 0, 0.035);
}

[data-theme="light"] main.admin-page :is(.stat--secondary, .metric-list--synced > div) {
  background: transparent;
}

[data-theme="light"] main.admin-page :is(.admin-card--profile .admin-card__content > .admin-profile-field, .admin-users__table th, .admin-users__table td),
[data-theme="light"] main.admin-page .admin-card__group + .admin-card__group,
[data-theme="light"] main.admin-page .admin-sidebar__meta {
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] main.admin-page :is(.admin-btn, .admin-office__refresh) {
  border-color: rgba(0, 0, 0, 0.2);
  background: transparent;
  color: #111111;
}

[data-theme="light"] main.admin-page :is(.admin-btn, .admin-office__refresh):hover:not(:disabled) {
  border-color: #4A6300;
  background: transparent;
  color: #4A6300;
}

[data-theme="light"] main.admin-page form .admin-btn[type="submit"] {
  background: linear-gradient(135deg, #CFFA3A 0%, #DFFF5B 100%);
  color: #060606;
}

[data-theme="light"] main.admin-page .admin-btn--danger {
  border-color: rgba(214, 48, 49, 0.45);
  color: #D63031;
}

[data-theme="light"] main.admin-page .admin-btn--danger:hover:not(:disabled) {
  border-color: #D63031;
  color: #D63031;
}

[data-theme="light"] main.admin-page .admin-users__field :is(input, select, textarea) {
  border-color: rgba(0, 0, 0, 0.12);
  background-color: rgba(0, 0, 0, 0.03);
  color: #111111;
}

[data-theme="light"] main.admin-page .admin-users__field :is(input, select, textarea):focus {
  border-color: #6B8700;
}

[data-theme="light"] main.admin-page .admin-sidebar__link {
  color: #555555;
}

[data-theme="light"] main.admin-page .admin-sidebar__link:hover,
[data-theme="light"] main.admin-page .admin-sidebar__link.is-active {
  color: #111111;
}

@media (min-width: 993px) {
  [data-theme="light"] main.admin-page .admin-sidebar {
    border: none;
    background: transparent;
    backdrop-filter: blur(4px) saturate(140%);
    backdrop-filter: url(#liquid-lens) blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    box-shadow:
      inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 1),
      inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.8),
      inset 0 0 0 1px rgba(0, 0, 0, 0.09),
      inset 0 -12px 24px rgba(0, 0, 0, 0.025),
      0 18px 44px rgba(0, 0, 0, 0.10),
      0 2px 6px rgba(0, 0, 0, 0.05);
  }
}

@media (max-width: 992px) {
  [data-theme="light"] main.admin-page .admin-sidebar__nav {
    background: transparent;
    box-shadow:
      inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.95),
      inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.6),
      inset 0 0 0 1px rgba(0, 0, 0, 0.06),
      0 18px 50px rgba(0, 0, 0, 0.18),
      0 2px 6px rgba(0, 0, 0, 0.08);
  }
}

/* short admin sections: the page's black/white ground and corner glow reach the bottom of the screen */
body:has(main.admin-page) {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Products: the Type and Name pickers side by side, stacked on phones */
main.admin-page .admin-products__pickers {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

main.admin-page .admin-products__pickers .admin-users__field--module {
  flex: 0 1 320px;
  max-width: 320px;
}

@media (max-width: 576px) {
  main.admin-page .admin-products__pickers .admin-users__field--module {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* PVM licences: hint under a field, the users card below the licences */
main.admin-page [hidden] {
  display: none !important;
}

main.admin-page .admin-users__hint {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] main.admin-page .admin-users__hint {
  color: #6B6B6B;
}

main.admin-page .admin-pvm-users {
  margin-top: 1.5rem;
}

main.admin-page .admin-pvm-users__form {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 1rem;
  margin: 1.25rem 0 0.5rem;
}

main.admin-page .admin-pvm-users__form .admin-btn {
  width: auto;
  margin: 0;
}

@media (max-width: 900px) {
  main.admin-page .admin-pvm-users__form {
    grid-template-columns: 1fr;
  }

  main.admin-page .admin-pvm-users__form .admin-btn {
    width: 100%;
  }
}

/* PVM licences: a building row is picked by clicking it */
main.admin-page .admin-pvm-row {
  cursor: pointer;
}

main.admin-page .admin-pvm-row.is-selected td {
  background: rgba(207, 250, 58, 0.08);
}

/* long building IDs and emails wrap inside their cell instead of stretching the cards past the screen */
main.admin-page .admin-users__grid > * {
  min-width: 0;
}

main.admin-page .admin-users__table td {
  overflow-wrap: anywhere;
}

main.admin-page .admin-pvm-row td[data-label="Building"] {
  word-break: break-all;
}

/* next to the fixed sidebar there is no room for two cards side by side below 1200px: stack them */
@media (min-width: 993px) and (max-width: 1200px) {
  main.admin-page .admin-users__grid {
    grid-template-columns: 1fr;
  }

  main.admin-page .admin-users__grid > * {
    grid-column: 1 / -1;
  }
}

/* ── Users of a licence: compact list ── */
main.admin-page .admin-users__grid > .admin-pvm-users {
  grid-column: 1 / -1;
}

main.admin-page .admin-pvm-users {
  margin-top: 0;
}

main.admin-page .admin-pvm-userlist {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

main.admin-page .admin-pvm-user {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

main.admin-page .admin-pvm-user--empty {
  display: block;
  color: rgba(255, 255, 255, 0.6);
}

main.admin-page .admin-pvm-user__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 0.8125rem/1 'Space Grotesk', 'Inter', sans-serif;
  color: #CFFA3A;
  background: rgba(207, 250, 58, 0.12);
}

main.admin-page .admin-pvm-user.is-disabled .admin-pvm-user__avatar {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

main.admin-page .admin-pvm-user__email {
  margin: 0;
  font-weight: 600;
  color: #FFFFFF;
  overflow-wrap: anywhere;
}

main.admin-page .admin-pvm-user__meta {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}

main.admin-page .admin-pvm-user__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

main.admin-page .admin-pvm-user__actions .admin-btn {
  margin: 0;
}

/* what to send the user (new account / new password) */
main.admin-page .admin-pvm-credentials {
  margin: 1rem 0 0.5rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: rgba(207, 250, 58, 0.08);
  box-shadow: inset 0 0 0 1px rgba(207, 250, 58, 0.3);
}

main.admin-page .admin-pvm-credentials__title {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: #CFFA3A;
}

main.admin-page .admin-pvm-credentials__text {
  margin: 0 0 0.75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 500 0.875rem/1.6 'Inter', 'Segoe UI', sans-serif;
  color: #FFFFFF;
  user-select: all;
}

[data-theme="light"] main.admin-page .admin-pvm-user {
  border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] main.admin-page .admin-pvm-user__email,
[data-theme="light"] main.admin-page .admin-pvm-credentials__text {
  color: #111111;
}

[data-theme="light"] main.admin-page .admin-pvm-user__meta,
[data-theme="light"] main.admin-page .admin-pvm-user--empty {
  color: #555555;
}

[data-theme="light"] main.admin-page .admin-pvm-user__avatar,
[data-theme="light"] main.admin-page .admin-pvm-credentials__title {
  color: #4A6300;
}

[data-theme="light"] main.admin-page .admin-pvm-credentials {
  background: rgba(150, 190, 0, 0.1);
  box-shadow: inset 0 0 0 1px rgba(107, 135, 0, 0.35);
}

/* phones: name and status on top, the three buttons in a row below */
@media (max-width: 640px) {
  main.admin-page .admin-pvm-user {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  main.admin-page .admin-pvm-user__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* stacked layouts: licence list, then its users, then the long licence form */
@media (max-width: 1200px) {
  main.admin-page #admin-products .admin-users__grid > .admin-users__list-wrap { order: 1; }
  main.admin-page #admin-products .admin-users__grid > .admin-pvm-users { order: 2; }
  main.admin-page #admin-products .admin-users__grid > .admin-users__create { order: 3; }
}

/* iPhone Safari gives date fields a built-in minimum width: keep them inside the card */
main.admin-page .admin-users__field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
  min-height: 3rem;
  box-sizing: border-box;
}

main.admin-page .admin-users__field input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

/* phones: each building is one compact line; tapping it opens its users */
@media (max-width: 576px) {
  main.admin-page .admin-users__table tr.admin-pvm-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.2rem 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
  }

  main.admin-page .admin-users__table tr.admin-pvm-row td {
    display: block;
    padding: 0;
    border: 0;
    grid-column: 1;
  }

  main.admin-page .admin-users__table tr.admin-pvm-row td::before {
    display: none;
  }

  main.admin-page .admin-users__table tr.admin-pvm-row td[data-label="Building"] {
    font-weight: 600;
  }

  main.admin-page .admin-users__table tr.admin-pvm-row td[data-label="Client"],
  main.admin-page .admin-users__table tr.admin-pvm-row td[data-label="Users"] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
  }

  main.admin-page .admin-users__table tr.admin-pvm-row td[data-label="Users"]::before {
    display: inline;
    content: 'Users: ';
    position: static;
    margin: 0;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
  }

  main.admin-page .admin-users__table tr.admin-pvm-row td[data-label="Licence"] {
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  /* the whole line is the button; "Delete licence" shows on the selected one */
  main.admin-page .admin-users__table tr.admin-pvm-row td[data-label="Actions"] {
    grid-column: 1 / -1;
  }

  main.admin-page .admin-users__table tr.admin-pvm-row td[data-label="Actions"] button[data-pvm-select],
  main.admin-page .admin-users__table tr.admin-pvm-row:not(.is-selected) td[data-label="Actions"] {
    display: none;
  }

  [data-theme="light"] main.admin-page .admin-users__table tr.admin-pvm-row td[data-label="Client"],
  [data-theme="light"] main.admin-page .admin-users__table tr.admin-pvm-row td[data-label="Users"] {
    color: #555555;
  }
}

/* wide screens: licence form on the left; the list and, under it, the users on the right */
@media (min-width: 1201px) {
  main.admin-page #admin-products .admin-users__grid {
    grid-auto-flow: row dense;
    align-items: start;
  }

  main.admin-page #admin-products .admin-users__grid > .admin-users__create {
    grid-column: 1 / span 4;
    grid-row: 1 / span 2;
  }

  main.admin-page #admin-products .admin-users__grid > .admin-users__list-wrap,
  main.admin-page #admin-products .admin-users__grid > .admin-pvm-users {
    grid-column: 5 / -1;
  }
}

/* PVM links: viewer link under each building, links box per licence, Manager link above the list */
main.admin-page .admin-pvm-row__id {
  display: block;
  font-weight: 600;
}

main.admin-page .admin-pvm-row__link,
main.admin-page .admin-pvm-links__url,
main.admin-page .admin-pvm-manager-link a {
  color: #CFFA3A;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
  word-break: break-all;
  text-decoration: underline;
  text-underline-offset: 2px;
}

main.admin-page .admin-pvm-row__link {
  display: block;
  margin-top: 0.2rem;
  font-weight: 400;
}

main.admin-page .admin-pvm-manager-link {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}

main.admin-page .admin-pvm-links {
  list-style: none;
  margin: 1rem 0 0.5rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

main.admin-page .admin-pvm-links__item {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

main.admin-page .admin-pvm-links__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #BBBBBB;
}

main.admin-page .admin-pvm-links__item .admin-btn {
  margin: 0;
  text-decoration: none;
}

@media (max-width: 760px) {
  main.admin-page .admin-pvm-links__item {
    grid-template-columns: minmax(0, 1fr);
  }
}

[data-theme="light"] main.admin-page .admin-pvm-row__link,
[data-theme="light"] main.admin-page .admin-pvm-links__url,
[data-theme="light"] main.admin-page .admin-pvm-manager-link a {
  color: #4A6300;
}

[data-theme="light"] main.admin-page .admin-pvm-manager-link,
[data-theme="light"] main.admin-page .admin-pvm-links__label {
  color: #555555;
}

[data-theme="light"] main.admin-page .admin-pvm-links__item {
  background: rgba(0, 0, 0, 0.035);
}

/* compact on every screen: the address is the link, one small Copy beside it;
   header buttons of the users panel side by side */
main.admin-page .admin-pvm-links__item {
  grid-template-columns: 11rem minmax(0, 1fr) auto;
}

main.admin-page .admin-pvm-links__copy,
main.admin-page .admin-pvm-users .admin-users__list-head .admin-btn {
  width: auto !important;
  flex: 0 0 auto;
}

main.admin-page .admin-pvm-users .admin-users__list-head .admin-users__actions {
  flex-direction: row;
  flex-wrap: nowrap;
}

@media (max-width: 760px) {
  main.admin-page .admin-pvm-links__item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.15rem 0.75rem;
  }

  main.admin-page .admin-pvm-links__label {
    grid-column: 1 / -1;
  }
}

main.admin-page .admin-pvm-row .pill {
  white-space: nowrap;
}

/* ── Phones: PVM licences as sliding pages (like a phone's settings) ── */
main.admin-page .admin-pvm-backbar,
main.admin-page .admin-pvm-overview {
  display: none;
}

@media (max-width: 992px) {
  /* one page at a time */
  main.admin-page #admin-products[data-pvm-view="list"] .admin-users__create,
  main.admin-page #admin-products[data-pvm-view="list"] .admin-pvm-users,
  main.admin-page #admin-products[data-pvm-view="licence"] > .admin-users__head,
  main.admin-page #admin-products[data-pvm-view="licence"] > .admin-products__pickers,
  main.admin-page #admin-products[data-pvm-view="licence"] .admin-users__list-wrap,
  main.admin-page #admin-products[data-pvm-view="licence"] .admin-users__create,
  main.admin-page #admin-products[data-pvm-view="licence"] .admin-pvm-users,
  main.admin-page #admin-products[data-pvm-view="users"] > .admin-users__head,
  main.admin-page #admin-products[data-pvm-view="users"] > .admin-products__pickers,
  main.admin-page #admin-products[data-pvm-view="users"] .admin-users__list-wrap,
  main.admin-page #admin-products[data-pvm-view="users"] .admin-users__create,
  main.admin-page #admin-products[data-pvm-view="details"] > .admin-users__head,
  main.admin-page #admin-products[data-pvm-view="details"] > .admin-products__pickers,
  main.admin-page #admin-products[data-pvm-view="details"] .admin-users__list-wrap,
  main.admin-page #admin-products[data-pvm-view="details"] .admin-pvm-users {
    display: none !important;
  }

  main.admin-page #admin-products[data-pvm-view="licence"] .admin-pvm-overview {
    display: block;
  }

  /* the licence page carries the links; the users page doesn't repeat them */
  main.admin-page #admin-products[data-pvm-view] #pvm-links {
    display: none;
  }

  /* Back, top left; stays at the top while the page scrolls */
  main.admin-page #admin-products[data-pvm-view]:not([data-pvm-view="list"]) .admin-pvm-backbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 5;
    margin: 0 -16px 1rem;
    padding: 0.6rem 16px;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
  }

  [data-theme="light"] main.admin-page #admin-products[data-pvm-view]:not([data-pvm-view="list"]) .admin-pvm-backbar {
    background: rgba(255, 255, 255, 0.78);
  }

  main.admin-page .admin-pvm-backbar__back {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    max-width: 100%;
    padding: 0 0.25rem 0 0;
    background: none;
    border: 0;
    color: #CFFA3A;
    font: 500 1rem/1.2 'Inter', 'Segoe UI', sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  main.admin-page .admin-pvm-backbar__back span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 9rem;
  }

  main.admin-page .admin-pvm-backbar__title {
    font: 600 1rem/1.2 'Inter', 'Segoe UI', sans-serif;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 11rem;
  }

  [data-theme="light"] main.admin-page .admin-pvm-backbar__back {
    color: #4A6300;
  }

  [data-theme="light"] main.admin-page .admin-pvm-backbar__title {
    color: #111111;
  }

  /* slide: forward comes in from the right, back from the left */
  main.admin-page #admin-products.pvm-slide-forward > :not(.admin-pvm-backbar) {
    animation: pvm-slide-in-right 340ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  main.admin-page #admin-products.pvm-slide-back > :not(.admin-pvm-backbar) {
    animation: pvm-slide-in-left 340ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }
}

@keyframes pvm-slide-in-right {
  from { transform: translateX(100%); }
  to { transform: none; }
}

@keyframes pvm-slide-in-left {
  from { transform: translateX(-35%); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  main.admin-page #admin-products.pvm-slide-forward > *,
  main.admin-page #admin-products.pvm-slide-back > * {
    animation: none !important;
  }
}

/* the licence page: status, then rows like a phone's settings */
main.admin-page .admin-pvm-overview__state {
  margin: 0.25rem 0 0.75rem;
}

main.admin-page .admin-pvm-nav {
  display: grid;
  margin: 1rem 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

main.admin-page .admin-pvm-nav__row {
  display: grid;
  grid-template-columns: 1fr auto 8px;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0 1rem;
  border: 0;
  background: none;
  color: #FFFFFF;
  font: 500 1rem/1.2 'Inter', 'Segoe UI', sans-serif;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

main.admin-page .admin-pvm-nav__row + .admin-pvm-nav__row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

main.admin-page .admin-pvm-nav__row:active {
  background: rgba(255, 255, 255, 0.06);
}

main.admin-page .admin-pvm-nav__value {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9375rem;
}

main.admin-page .admin-pvm-nav__row svg {
  color: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] main.admin-page .admin-pvm-nav {
  background: rgba(0, 0, 0, 0.035);
}

[data-theme="light"] main.admin-page .admin-pvm-nav__row {
  color: #111111;
}

[data-theme="light"] main.admin-page .admin-pvm-nav__row + .admin-pvm-nav__row {
  border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] main.admin-page .admin-pvm-nav__value,
[data-theme="light"] main.admin-page .admin-pvm-nav__row svg {
  color: #6B6B6B;
}

/* phones: Back replaces the users page's Close */
@media (max-width: 992px) {
  main.admin-page #admin-products[data-pvm-view] #pvm-users-close {
    display: none;
  }
}

/* ── Admin on phones: an iPhone-like home screen ───────────────────────
   Weather and clock widgets, app icons (rounded squares in Liquid Glass);
   sections slide in with ‹ Home. Computers keep the sidebar layout.
   Only the dashboard's own bottom bar is hidden; the website's stays. */
main.admin-page .phone-home,
main.admin-page .phone-backbar {
  display: none;
}

@media (max-width: 992px) {
  /* Home and ‹ Back do the navigating on phones */
  main.admin-page .admin-sidebar__nav,
  main.admin-page .admin-sidebar {
    display: none !important;
  }

  main.admin-page .admin-content {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  }

  /* home on: only the home screen; home off: the section with ‹ Home */
  body.phone-home-on main.admin-page .phone-home {
    display: block;
  }

  body.phone-home-on main.admin-page .admin-main > .admin-panel {
    display: none !important;
  }

  body:not(.phone-home-on) main.admin-page .phone-backbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 5;
    margin: 0 -16px 0.5rem;
    padding: 0.6rem 16px;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
  }

  [data-theme="light"] body:not(.phone-home-on) main.admin-page .phone-backbar {
    background: rgba(255, 255, 255, 0.78);
  }

  /* deeper in Products the licence pages show their own back bar instead */
  main.admin-page .admin-main:has(#admin-products.is-active[data-pvm-view]:not([data-pvm-view="list"])) .phone-backbar {
    display: none !important;
  }

  /* slides: a section comes in from the right; Home comes back from the left */
  main.admin-page .admin-main.phone-slide-forward > .phone-backbar,
  main.admin-page .admin-main.phone-slide-forward > .admin-panel.is-active {
    animation: pvm-slide-in-right 340ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  main.admin-page .admin-main.phone-slide-back > .phone-home {
    animation: pvm-slide-in-left 340ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }
}

@media (max-width: 992px) and (prefers-reduced-motion: reduce) {
  main.admin-page .admin-main.phone-slide-forward > *,
  main.admin-page .admin-main.phone-slide-back > * {
    animation: none !important;
  }
}

main.admin-page .phone-home__bar {
  display: flex;
  justify-content: flex-end;
  min-height: 2.25rem;
}

main.admin-page .phone-home__done {
  padding: 0.4rem 1rem;
  border: 0;
  border-radius: 999px;
  background: #CFFA3A;
  color: #060606;
  font: 600 0.9375rem/1.2 'Inter', 'Segoe UI', sans-serif;
  cursor: pointer;
}

/* widgets: two square glass tiles */
main.admin-page .phone-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

main.admin-page .phone-widget {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 16px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(22, 23, 28, 0.32);
  backdrop-filter: blur(7px) saturate(170%) brightness(1.05);
  backdrop-filter: url(#liquid-lens) blur(7px) saturate(170%) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(170%) brightness(1.05);
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.55),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 22px rgba(255, 255, 255, 0.06),
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.25);
}

main.admin-page .phone-widget p {
  margin: 0;
}

main.admin-page .phone-widget__place {
  font: 600 0.9375rem/1.2 'Inter', 'Segoe UI', sans-serif;
  color: #FFFFFF;
}

main.admin-page .phone-widget--clock .phone-widget__place {
  color: #CFFA3A;
}

main.admin-page .phone-widget__big {
  margin-top: 2px !important;
  font: 500 2.75rem/1.05 'Inter', 'Segoe UI', sans-serif;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

main.admin-page .phone-widget__icon {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  color: #CFFA3A;
}

main.admin-page .phone-widget__icon svg {
  width: 100%;
  height: 100%;
}

main.admin-page .phone-widget__line {
  margin-top: auto !important;
  font: 600 0.8125rem/1.3 'Inter', 'Segoe UI', sans-serif;
  color: #FFFFFF;
}

main.admin-page .phone-widget__line + .phone-widget__line {
  margin-top: 2px !important;
}

main.admin-page .phone-widget__line--dim {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

/* app icons: rounded squares like a phone's, names under them */
main.admin-page .phone-apps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 8px;
}

main.admin-page .phone-app {
  display: flex;
  justify-content: center;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

main.admin-page .phone-app__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

main.admin-page .phone-app__icon {
  width: 62px;
  height: 62px;
  border-radius: 22.5%;
  display: grid;
  place-items: center;
  color: #CFFA3A;
  background: rgba(22, 23, 28, 0.32);
  backdrop-filter: blur(7px) saturate(170%) brightness(1.05);
  backdrop-filter: url(#liquid-lens) blur(7px) saturate(170%) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(170%) brightness(1.05);
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.55),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 18px rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.4);
  transition: transform 160ms ease;
}

main.admin-page .phone-app__icon svg {
  width: 30px;
  height: 30px;
}

main.admin-page .phone-app__button:active .phone-app__icon {
  transform: scale(0.92);
}

main.admin-page .phone-app__label {
  font: 500 0.75rem/1.2 'Inter', 'Segoe UI', sans-serif;
  color: #FFFFFF;
  text-align: center;
}

main.admin-page .phone-home__hint {
  margin: 28px 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.45);
}

/* edit mode: icons wiggle; the held one lifts and follows the finger */
main.admin-page .phone-home.is-editing .phone-app {
  touch-action: none;
}

main.admin-page .phone-home.is-editing .phone-app:not(.is-dragging) .phone-app__icon {
  animation: phone-wiggle 0.28s ease-in-out infinite alternate;
}

main.admin-page .phone-home.is-editing .phone-app:nth-child(even):not(.is-dragging) .phone-app__icon {
  animation-delay: -0.14s;
}

main.admin-page .phone-app.is-dragging {
  position: relative;
  z-index: 10;
  opacity: 0.92;
}

@keyframes phone-wiggle {
  from { transform: rotate(-2.2deg); }
  to { transform: rotate(2.2deg); }
}

@media (prefers-reduced-motion: reduce) {
  main.admin-page .phone-home.is-editing .phone-app .phone-app__icon {
    animation: none !important;
    outline: 2px dashed rgba(207, 250, 58, 0.6);
    outline-offset: 3px;
  }
}

/* light theme */
[data-theme="light"] main.admin-page .phone-widget,
[data-theme="light"] main.admin-page .phone-app__icon {
  background: transparent;
  backdrop-filter: blur(4px) saturate(140%);
  backdrop-filter: url(#liquid-lens) blur(4px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 1),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px rgba(0, 0, 0, 0.09),
    0 12px 30px rgba(0, 0, 0, 0.10);
}

[data-theme="light"] main.admin-page .phone-widget__place,
[data-theme="light"] main.admin-page .phone-widget__big,
[data-theme="light"] main.admin-page .phone-widget__line,
[data-theme="light"] main.admin-page .phone-app__label {
  color: #111111;
}

[data-theme="light"] main.admin-page .phone-widget__line--dim,
[data-theme="light"] main.admin-page .phone-home__hint {
  color: #555555;
}

[data-theme="light"] main.admin-page .phone-widget--clock .phone-widget__place,
[data-theme="light"] main.admin-page .phone-widget__icon,
[data-theme="light"] main.admin-page .phone-app__icon {
  color: #4A6300;
}

/* phones, inside a section: the back bar is the top bar (as on a phone); the
   site header (logo, menu, logout, theme) shows on the Home screen only, so it
   can never sit on top of ‹ Back */
@media (max-width: 992px) {
  body:not(.phone-home-on):has(main.admin-page) #navbar {
    display: none !important;
  }

  body:not(.phone-home-on) main.admin-page .admin-content {
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
  }
}

/* phones: the licence list stays one tidy line per building; its links are on the licence's page */
@media (max-width: 576px) {
  main.admin-page .admin-users__table tr.admin-pvm-row .admin-pvm-row__link {
    display: none;
  }
}

main.admin-page a.phone-app__button {
  text-decoration: none;
}

/* ── Expiring and Clients: tappable rows ── */
main.admin-page .admin-pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

main.admin-page .admin-pick-list__empty {
  padding: 1rem 0;
  color: rgba(255, 255, 255, 0.6);
}

main.admin-page .admin-pick-list__row,
main.admin-page .admin-client {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.9rem 1.1rem;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  text-align: left;
  font: inherit;
}

main.admin-page .admin-pick-list__row {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

main.admin-page .admin-pick-list__row:hover,
main.admin-page .admin-pick-list__row:active {
  background: rgba(255, 255, 255, 0.07);
}

main.admin-page .admin-pick-list__main {
  display: grid;
  min-width: 0;
}

main.admin-page .admin-pick-list__title {
  margin: 0;
  font-weight: 600;
  color: #FFFFFF;
  overflow-wrap: anywhere;
}

main.admin-page .admin-pick-list__sub {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  overflow-wrap: anywhere;
}

main.admin-page .admin-pick-list .pill {
  white-space: nowrap;
}

main.admin-page .admin-clients__search {
  max-width: 28rem;
  margin-bottom: 1.25rem;
}

main.admin-page .admin-client__main {
  min-width: 0;
}

main.admin-page .admin-client__products {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
}

main.admin-page .admin-client__chip {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  color: #CFFA3A;
  background: rgba(207, 250, 58, 0.1);
}

main.admin-page .admin-client__actions .admin-btn {
  margin: 0;
  text-decoration: none;
}

@media (max-width: 576px) {
  main.admin-page .admin-client {
    grid-template-columns: minmax(0, 1fr);
  }

  main.admin-page .admin-client__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  main.admin-page .admin-client__actions .admin-btn {
    width: auto !important;
  }
}

[data-theme="light"] main.admin-page .admin-pick-list__row,
[data-theme="light"] main.admin-page .admin-client {
  background: rgba(0, 0, 0, 0.035);
}

[data-theme="light"] main.admin-page .admin-pick-list__title {
  color: #111111;
}

[data-theme="light"] main.admin-page .admin-pick-list__sub,
[data-theme="light"] main.admin-page .admin-pick-list__empty {
  color: #555555;
}

[data-theme="light"] main.admin-page .admin-client__chip {
  color: #4A6300;
  background: rgba(107, 135, 0, 0.12);
}

/* red number on a home screen icon, like a phone's */
main.admin-page .phone-app__icon {
  position: relative;
}

main.admin-page .phone-app__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #FF3B30;
  color: #FFFFFF;
  font: 600 0.75rem/1 'Inter', 'Segoe UI', sans-serif;
  box-shadow: 0 0 0 2px #000000;
}

[data-theme="light"] main.admin-page .phone-app__badge {
  box-shadow: 0 0 0 2px #FFFFFF;
}

/* ── Tasks and reminders ── */
main.admin-page .admin-tasks__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

/* segmented control, as on a phone */
main.admin-page .admin-tasks__tabs {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

main.admin-page .admin-tasks__tabs button {
  padding: 0.5rem 0.9rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font: 600 0.875rem/1.2 'Inter', 'Segoe UI', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

main.admin-page .admin-tasks__tabs button[aria-selected="true"] {
  background: rgba(207, 250, 58, 0.16);
  color: #CFFA3A;
}

main.admin-page .admin-task-form {
  margin-bottom: 1.25rem;
}

main.admin-page .admin-task-form__fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

main.admin-page .admin-task-form__wide {
  grid-column: 1 / -1;
}

main.admin-page .admin-task-form__actions {
  margin-top: 1.25rem;
  flex-direction: row;
  flex-wrap: wrap;
}

main.admin-page .admin-task-form__actions .admin-btn {
  width: auto !important;
  margin: 0;
}

main.admin-page .admin-task-form input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
  min-height: 3rem;
  box-sizing: border-box;
}

@media (max-width: 576px) {
  main.admin-page .admin-task-form__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  main.admin-page .admin-tasks__tabs {
    width: 100%;
  }

  main.admin-page .admin-tasks__tabs button {
    flex: 1 1 0;
    padding: 0.55rem 0.4rem;
    font-size: 0.8125rem;
  }
}

/* a task: round tick on the left, the task to tap on the right */
main.admin-page .admin-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

main.admin-page .admin-task__check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: none;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

main.admin-page .admin-task.is-done .admin-task__check {
  border-color: #CFFA3A;
  background: #CFFA3A;
}

main.admin-page .admin-task.is-done .admin-task__check::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 7px;
  height: 12px;
  border: solid #060606;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

main.admin-page .admin-task__main {
  display: grid;
  gap: 0.15rem;
  justify-items: start;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

main.admin-page .admin-task.is-done .admin-pick-list__title {
  text-decoration: line-through;
  opacity: 0.55;
}

main.admin-page .admin-task.is-overdue .admin-pick-list__sub {
  color: #FF6B6B;
}

main.admin-page .admin-task .admin-client__chip {
  margin-top: 0.3rem;
}

/* phone Home: "Tasks: 2 due today · 1 overdue ›" under the widgets */
main.admin-page .phone-home__due {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: -12px 0 24px;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 59, 48, 0.14);
  color: #FF8E8E;
  font: 600 0.9375rem/1.2 'Inter', 'Segoe UI', sans-serif;
  text-align: left;
  cursor: pointer;
}

/* reminder banner, inside the dashboard */
.task-reminder {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  z-index: 3000;
  width: min(440px, calc(100% - 24px));
  transform: translateX(-50%);
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: rgba(22, 23, 28, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px rgba(207, 250, 58, 0.35),
    0 18px 50px rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  animation: task-reminder-in 380ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.task-reminder[hidden] {
  display: none;
}

.task-reminder p {
  margin: 0;
}

.task-reminder__label {
  font: 600 0.75rem/1.2 'Inter', 'Segoe UI', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #CFFA3A;
}

.task-reminder__title {
  margin-top: 0.3rem !important;
  font: 600 1rem/1.35 'Inter', 'Segoe UI', sans-serif;
  overflow-wrap: anywhere;
}

.task-reminder__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.task-reminder__btn {
  flex: 1 1 0;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: #CFFA3A;
  color: #060606;
  font: 600 0.875rem/1 'Inter', 'Segoe UI', sans-serif;
  cursor: pointer;
}

.task-reminder__btn--quiet {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

@keyframes task-reminder-in {
  from { transform: translate(-50%, -140%); }
  to { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .task-reminder { animation: none; }
}

[data-theme="light"] main.admin-page .admin-tasks__tabs {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] main.admin-page .admin-tasks__tabs button {
  color: #555555;
}

[data-theme="light"] main.admin-page .admin-tasks__tabs button[aria-selected="true"] {
  background: rgba(150, 190, 0, 0.18);
  color: #4A6300;
}

[data-theme="light"] main.admin-page .admin-task {
  background: rgba(0, 0, 0, 0.035);
}

[data-theme="light"] main.admin-page .admin-task__check {
  border-color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] main.admin-page .phone-home__due {
  color: #C62828;
  background: rgba(255, 59, 48, 0.1);
}

[data-theme="light"] .task-reminder {
  background: rgba(255, 255, 255, 0.86);
  color: #111111;
  box-shadow:
    inset 0 0 0 1px rgba(107, 135, 0, 0.35),
    0 18px 50px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .task-reminder__label {
  color: #4A6300;
}

[data-theme="light"] .task-reminder__btn--quiet {
  background: rgba(0, 0, 0, 0.06);
  color: #111111;
}

/* phones, inside a section: the top bar's small title is the heading; no big
   label, heading and description taking the first screen */
@media (max-width: 992px) {
  body:not(.phone-home-on) main.admin-page .admin-panel > .admin-users__head,
  body:not(.phone-home-on) main.admin-page .admin-panel > .admin-overview__head,
  body:not(.phone-home-on) main.admin-page .admin-panel .admin-office__head-text {
    display: none;
  }

  body:not(.phone-home-on) main.admin-page .admin-panel .admin-office__head {
    margin-bottom: 1rem;
  }
}

/* ── Client contact card (Clients → a contact) ── */
main.admin-page #admin-clients.is-card .admin-clients__search,
main.admin-page #admin-clients.is-card #clients-list {
  display: none;
}

main.admin-page .admin-client {
  cursor: pointer;
}

main.admin-page .client-card__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 1rem;
}

main.admin-page .client-card__bar .admin-pvm-backbar__back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.25rem 0 0;
  border: 0;
  background: none;
  color: #CFFA3A;
  font: 500 1rem/1.2 'Inter', 'Segoe UI', sans-serif;
  cursor: pointer;
}

main.admin-page .client-card__bar .admin-pvm-backbar__back.is-cancel svg {
  display: none;
}

main.admin-page .client-card__bar .admin-pvm-backbar__title {
  font: 600 1rem/1.2 'Inter', 'Segoe UI', sans-serif;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}

main.admin-page .client-card__action {
  justify-self: end;
  min-height: 44px;
  padding: 0 0 0 0.5rem;
  border: 0;
  background: none;
  color: #CFFA3A;
  font: 600 1rem/1.2 'Inter', 'Segoe UI', sans-serif;
  cursor: pointer;
}

main.admin-page .client-card__head {
  display: grid;
  justify-items: center;
  text-align: center;
  margin: 0.5rem 0 1.5rem;
}

main.admin-page .client-card__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 2rem/1 'Space Grotesk', 'Inter', sans-serif;
  color: #CFFA3A;
  background: rgba(207, 250, 58, 0.12);
}

main.admin-page .client-card__name {
  margin: 0.75rem 0 0;
  font: 700 1.5rem/1.2 'Inter', 'Segoe UI', sans-serif;
  color: #FFFFFF;
  overflow-wrap: anywhere;
}

main.admin-page .client-card__company {
  margin: 0.2rem 0 0;
  color: rgba(255, 255, 255, 0.6);
}

main.admin-page .client-card__quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

main.admin-page .client-card__quick-btn {
  min-width: 88px;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #CFFA3A;
  font: 600 0.875rem/1.2 'Inter', 'Segoe UI', sans-serif;
  text-align: center;
  text-decoration: none;
}

/* details: grouped rows, label above value */
main.admin-page .client-card__fields {
  margin: 0 0 1.5rem;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

main.admin-page .client-card__row {
  padding: 0.75rem 1rem;
}

main.admin-page .client-card__row + .client-card__row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

main.admin-page .client-card__row dt {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

main.admin-page .client-card__row dd {
  margin: 0.2rem 0 0;
  color: #FFFFFF;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

main.admin-page .client-card__row dd a {
  color: #CFFA3A;
  text-decoration: none;
}

main.admin-page .client-card__empty {
  color: rgba(255, 255, 255, 0.35);
}

main.admin-page .client-card__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

main.admin-page .client-card__wide {
  grid-column: 1 / -1;
}

main.admin-page .client-card__label {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #BBBBBB;
}

@media (max-width: 576px) {
  main.admin-page .client-card__form {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 992px) {
  /* the card's bar is the top bar on phones */
  main.admin-page .client-card__bar {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 5;
    margin: 0 -16px 1rem;
    padding: 0.6rem 16px;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
  }

  main.admin-page .admin-main:has(#admin-clients.is-active.is-card) .phone-backbar {
    display: none !important;
  }

  main.admin-page #admin-clients.pvm-slide-forward > * {
    animation: pvm-slide-in-right 340ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  main.admin-page #admin-clients.pvm-slide-back > * {
    animation: pvm-slide-in-left 340ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  main.admin-page #admin-clients.pvm-slide-forward > *,
  main.admin-page #admin-clients.pvm-slide-back > * {
    animation: none !important;
  }
}

[data-theme="light"] main.admin-page .client-card__bar .admin-pvm-backbar__back,
[data-theme="light"] main.admin-page .client-card__action,
[data-theme="light"] main.admin-page .client-card__avatar,
[data-theme="light"] main.admin-page .client-card__quick-btn,
[data-theme="light"] main.admin-page .client-card__row dd a {
  color: #4A6300;
}

[data-theme="light"] main.admin-page .client-card__bar .admin-pvm-backbar__title,
[data-theme="light"] main.admin-page .client-card__name,
[data-theme="light"] main.admin-page .client-card__row dd {
  color: #111111;
}

[data-theme="light"] main.admin-page .client-card__company,
[data-theme="light"] main.admin-page .client-card__row dt,
[data-theme="light"] main.admin-page .client-card__label {
  color: #555555;
}

[data-theme="light"] main.admin-page .client-card__fields,
[data-theme="light"] main.admin-page .client-card__quick-btn {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] main.admin-page .client-card__row + .client-card__row {
  border-top-color: rgba(0, 0, 0, 0.08);
}

@media (max-width: 992px) {
  [data-theme="light"] main.admin-page .client-card__bar {
    background: rgba(255, 255, 255, 0.78);
  }
}

/* narrow phones: the status goes under the name instead of squeezing it */
@media (max-width: 576px) {
  main.admin-page #client-card-products .admin-pick-list__row,
  main.admin-page #expiring-list .admin-pick-list__row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}