/* Ezoah Business — shared polish + responsive layer.
   Pages keep their inline styles; rules here use !important only where an inline style must yield. */

:root {
  --ez-ink: #3A454D;
  --ez-ink-2: #47535C;
  --ez-muted: #55636D;
  --ez-line: #E6EAEC;
  --ez-mist: #F4F6F7;
  --ez-blush: #CC9085;
  --ez-blush-tint: #F8EEEB;
  --ez-blush-text: #9A665C;
  --ez-ease: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; }
::selection { background: var(--ez-blush-tint); color: var(--ez-ink); }

a, button, .btn, .card, .mi, .nav, .chip, input, select, textarea {
  transition: background-color .18s var(--ez-ease), color .18s var(--ez-ease), border-color .18s var(--ez-ease),
    box-shadow .22s var(--ez-ease), transform .22s var(--ez-ease), opacity .18s var(--ez-ease);
}
:focus-visible { outline: 3px solid var(--ez-blush); outline-offset: 2px; border-radius: 10px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }

.btn:hover, a.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(58, 69, 77, .45); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-p:hover { background: #C4857A !important; }
.btn-o:hover { border-color: #A9B3B9 !important; background: #FBFCFC !important; }
.nav:hover { background: var(--ez-mist); color: var(--ez-ink); }
.mi:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.lnk:hover { color: #7F5249; text-decoration: underline; text-underline-offset: 4px; }
a.card:hover, .card a:hover { border-color: #CBD2D6; }
tbody tr { transition: background-color .15s var(--ez-ease); }
tbody tr:hover { background: #FAFBFB; }

/* "All screens" floating tour button */
a[href="screens.html"][aria-label] { transition: transform .22s var(--ez-ease), box-shadow .22s var(--ez-ease); }
a[href="screens.html"][aria-label]:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(58, 69, 77, .6) !important; }

/* Scrollable tables: soft edge hint + thin scrollbar */
div[style*="overflow-x: auto"] { scrollbar-width: thin; scrollbar-color: #CBD2D6 transparent; -webkit-overflow-scrolling: touch; }

/* ---------- Landing page (index.html) ---------- */
.ez-site-hdr {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .86) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
}
.ez-nav a { position: relative; padding: 4px 0; }
.ez-nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2px; border-radius: 2px;
  background: var(--ez-blush); transform: scaleX(0); transition: transform .25s var(--ez-ease);
}
.ez-nav a:hover::after { transform: scaleX(1); }
.ez-menu-btn { display: none; }

.ez-hero {
  background:
    radial-gradient(60% 70% at 85% 0%, rgba(204, 144, 133, .16), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(85, 99, 109, .10), transparent 60%),
    var(--ez-mist) !important;
}
.ez-h1 { font-size: clamp(46px, 7.4vw, 76px) !important; letter-spacing: -.5px; }
.ez-lead { font-size: clamp(21px, 2.6vw, 30px) !important; }
.ez-hero-card { transition: transform .5s var(--ez-ease), box-shadow .5s var(--ez-ease); }
.ez-hero-card:hover { transform: translateY(-4px); box-shadow: 0 32px 60px -20px rgba(58, 69, 77, .3) !important; }

#app h2 { font-size: clamp(28px, 4vw, 40px) !important; text-wrap: balance; }
#app p { text-wrap: pretty; }
#app section button[aria-pressed]:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(58, 69, 77, .4) !important; }
#journey [style*="border-radius: 18px"], #packages [style*="border-radius: 18px; border"], #quality [style*="border-radius: 18px"] {
  transition: transform .25s var(--ez-ease), box-shadow .25s var(--ez-ease), border-color .25s var(--ez-ease);
}
#journey [style*="border-radius: 18px"]:hover, #packages [style*="border-radius: 18px; border"]:hover {
  transform: translateY(-3px); border-color: #DCBFB9 !important; box-shadow: 0 16px 30px -22px rgba(58, 69, 77, .45);
}
#quality [style*="border-radius: 18px"]:hover { transform: translateY(-3px); background: #34404A !important; }

/* Scroll-reveal (CSS-only, so template re-renders never hide content) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #app section:not(.ez-hero) > div > * {
      animation: ez-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
  }
}
@keyframes ez-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .ez-hero > div > * { animation: ez-in .8s var(--ez-ease) both; }
  .ez-hero > div > *:nth-child(2) { animation-delay: .15s; }
}
@keyframes ez-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 960px) {
  .ez-hdr-in { flex-wrap: nowrap !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  .ez-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 12px; border: 1px solid #CBD2D6; background: #fff; color: var(--ez-ink); cursor: pointer;
  }
  .ez-menu-btn .ez-x { display: none; }
  .ez-menu-open .ez-menu-btn .ez-x { display: block; }
  .ez-menu-open .ez-menu-btn .ez-bars { display: none; }
  .ez-site-hdr > div { position: relative; }
  .ez-menu {
    display: none; position: absolute; top: 100%; inset-inline: 0; z-index: 41;
    flex-direction: column; gap: 16px; padding: 8px 24px 20px;
    background: #fff; border-top: 1px solid var(--ez-line);
    box-shadow: 0 28px 36px -28px rgba(58, 69, 77, .4);
  }
  .ez-menu-open .ez-menu { display: flex; animation: ez-drop .22s var(--ez-ease); }
  .ez-menu .ez-nav { flex-direction: column; gap: 0 !important; }
  .ez-menu .ez-nav a { padding: 14px 0; border-bottom: 1px solid #EEF0F2; font-size: 17px; }
  .ez-menu .ez-nav a::after { display: none; }
  .ez-menu .ez-hdr-cta a { flex: 1; justify-content: center; }
}
@media (min-width: 961px) { .ez-menu { display: contents; } }
@keyframes ez-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  #app section > div { padding-top: 56px !important; padding-bottom: 56px !important; padding-inline: 20px !important; gap: 28px !important; }
  .ez-hero > div { padding-top: 40px !important; padding-bottom: 48px !important; gap: 36px !important; }
  .ez-hero-vis { height: auto !important; padding-top: 140px; }
  .ez-pat { width: 220px !important; height: auto !important; opacity: .55 !important; }
  .ez-hero-card { position: relative !important; width: 100% !important; box-sizing: border-box; }
  .ez-hdr-in > a:first-child { gap: 12px !important; min-width: 0; }
  .ez-hdr-in > a:first-child img { height: 38px !important; }
  .ez-hdr-in > a:first-child span { white-space: nowrap; }
  .ez-hdr-in > a:first-child > span:last-child > span:first-child { font-size: 17px !important; }
  .ez-hdr-in > a:first-child > span:last-child > span:last-child { font-size: 9.5px !important; letter-spacing: 1.5px !important; }
  #app section p[style*="font-size: 18px"] { font-size: 16.5px !important; }
  #apply > div > div { padding: 28px 22px !important; border-radius: 22px !important; }
  #apply a { flex: 1 1 auto; justify-content: center; }
  .ez-hero a[style*="height: 54px"] { flex: 1 1 auto; justify-content: center; }
  #about [style*="padding: 32px"] { flex-direction: column; padding: 24px !important; }
  #journey [style*="border-radius: 18px"] {
    display: grid !important; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px !important; padding: 18px !important;
  }
  #journey [style*="border-radius: 18px"] > span:first-child { grid-row: span 2; }
  #quality [style*="minmax(min(100%, 260px)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  #quality [style*="border-radius: 18px"] { padding: 16px !important; }
  #quality [style*="border-radius: 18px"] > span:nth-child(2) { font-size: 16px !important; }
  #quality [style*="border-radius: 18px"] > span:nth-child(3) { font-size: 13.5px !important; line-height: 1.6; }
}
@media (max-width: 400px) {
  .ez-hdr-in > a:first-child > span:last-child > span:last-child { display: none; }
}

/* ---------- Client & apply pages ---------- */
@media (max-width: 640px) {
  .ez { min-height: 100vh !important; }
  .wrap { padding-inline: 16px !important; }
  .card { padding: 18px !important; border-radius: 16px !important; }

  /* header: logo + actions on one row, nav becomes a swipeable strip */
  .ez > header .wrap { row-gap: 10px !important; padding-top: 12px; padding-bottom: 0; }
  .ez > header .wrap > a:first-child img { height: 32px !important; }
  .ez > header .wrap > a:first-child > span:last-child { font-size: 15px !important; }
  .ez > header nav {
    order: 3; flex: 1 1 100%; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
    margin-inline: -16px; padding: 0 16px 10px; border-top: 1px solid #EEF0F2; padding-top: 8px;
  }
  .ez > header nav::-webkit-scrollbar { display: none; }
  .ez > header nav a { white-space: nowrap; }
  .ez > header .wrap > div:last-child > span:last-child > span:last-child { display: none !important; }
  .ez > header .wrap > div:last-child .btn { padding: 0 14px; }
  .ez > header:not(:has(nav)) .wrap { padding-bottom: 12px; }

  .ez h1 { font-size: clamp(22px, 6.4vw, 30px) !important; line-height: 1.35; }

  /* stat tiles: two per row instead of one */
  .ez [style*="minmax(min(100%, 230px)"], .ez [style*="minmax(min(100%, 200px)"], .ez [style*="minmax(min(100%, 220px)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important;
  }
  .ez [style*="font-size: 30px; font-weight: 700"] { font-size: 26px !important; }

  /* label/value rows keep amounts on one line */
  .ez span:has(> .chip) > span:not(.chip) { white-space: nowrap; }

  /* floating tour button collapses to an icon */
  a[href="screens.html"][aria-label] { font-size: 0 !important; gap: 0 !important; width: 48px; padding: 0 !important; justify-content: center; left: 14px !important; bottom: 14px !important; }
  a[href="screens.html"][aria-label] svg { width: 20px; height: 20px; }
  body { padding-bottom: 72px; }
}

/* ---------- Admin console pages ---------- */
@media (max-width: 900px) {
  .ez:has(> .side) { flex-direction: column; flex-wrap: nowrap !important; }
  .side {
    flex: 0 0 auto !important; position: sticky; top: 0; z-index: 30;
    flex-direction: row !important; align-items: center; gap: 6px !important;
    overflow-x: auto; padding: 10px 12px !important; scrollbar-width: none;
    box-shadow: 0 10px 20px -16px rgba(0, 0, 0, .6);
  }
  .side::-webkit-scrollbar { display: none; }
  .side > div:first-child { padding: 0 6px 0 10px !important; flex-shrink: 0; }
  .side > div:first-child img { height: 30px !important; }
  .side > div:first-child > div { display: none; }
  .side .sect { display: none; }
  .side .mi { white-space: nowrap; flex-shrink: 0; padding: 8px 12px; font-size: 14px; }
  .side .mi.on { box-shadow: inset 0 -3px 0 var(--ez-blush) !important; }
  .main { flex: 1 1 auto !important; }
  .top { padding: 12px 16px !important; }
  .top > div:first-child { flex: 1 1 100% !important; }
  .main > div:not(.top) { padding: 20px 16px !important; }
  .fr { grid-template-columns: 110px minmax(0, 1fr) 32px !important; font-size: 13px !important; }
}
@media (max-width: 640px) {
  .top > div:last-child { width: 100%; justify-content: space-between; }
}

/* ---------- Login ---------- */
@media (max-width: 640px) {
  .ez > div[style*="padding: 32px 48px"] { padding: 24px 20px !important; }
}