@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&display=swap");
/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  tab-size: 4; /* 3 */
  font-family: --theme(
    --default-font-family,
    ui-sans-serif,
    system-ui,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ); /* 4 */
  font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
  font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: --theme(
    --default-mono-font-family,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    'Courier New',
    monospace
  ); /* 1 */
  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
  font-size: 1em; /* 4 */
}

/*
  Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
  Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
      This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

/*
  Restore space after button.
*/

::file-selector-button {
  margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
*/

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

/*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}


:root {
  --ink: #102a43;
  --muted: #61758a;
  --line: #d9e5ec;
  --primary: #0b6f67;
  --primary-dark: #07554f;
  --background: #eef5f6;
}

* { box-sizing: border-box; }
.dashboard-card-form { margin: 0; min-width: 0; }
.dashboard-card-form > .dashboard-card { width: 100%; height: 100%; text-align: right; font: inherit; cursor: pointer; }
html { min-height: 100%; background: var(--background); }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: "Heebo", Arial, sans-serif; font-weight: 400; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.login-shell {
  position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 32px;
  background: #071d2b;
}
.login-shell::before {
  content: ""; position: absolute; inset: 0; opacity: .24; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.login-orb { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.orb-one { width: 420px; height: 420px; top: -210px; right: -90px; background: rgba(0, 232, 199, .22); }
.orb-two { width: 500px; height: 500px; bottom: -310px; left: -120px; background: rgba(60, 107, 255, .22); }
.login-stage {
  position: relative; z-index: 1; width: min(100%, 1050px); min-height: 620px; display: grid; grid-template-columns: 1.08fr .92fr;
  overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 34px; background: #f7fbfc;
  box-shadow: 0 35px 100px rgba(0,0,0,.36);
}
.login-visual {
  position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 42px 48px; color: #fff;
  background: radial-gradient(circle at 20% 15%, rgba(87,255,224,.22), transparent 31%), linear-gradient(145deg, #0a847d 0%, #075369 58%, #092f54 100%);
}
.visual-brand, .mobile-brand { display: flex; align-items: center; gap: 11px; font-weight: 800; }
.matan-brand-logo { display: block; width: min(100%, 265px); height: 72px; object-fit: contain; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(2,16,30,.2); }
.visual-logo { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.28); border-radius: 15px; color: #fff; background: rgba(255,255,255,.13); backdrop-filter: blur(10px); }
.visual-copy { position: relative; z-index: 2; margin: auto 0; }
.visual-pill { width: fit-content; display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.1); font-size: .82rem; font-weight: 700; }
.visual-copy h2 { margin: 20px 0 16px; font-size: clamp(3.2rem, 5vw, 5rem); font-weight: 800; line-height: .97; letter-spacing: -.055em; }
.visual-copy p { max-width: 390px; margin: 0; color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.7; }
.visual-stats { position: relative; z-index: 2; display: flex; gap: 44px; }
.visual-stats div { display: grid; gap: 3px; }
.visual-stats strong { font-size: 1.55rem; letter-spacing: -.04em; }
.visual-stats span { color: rgba(255,255,255,.64); font-size: .78rem; }
.wave-line { position: absolute; left: -80px; width: 620px; height: 270px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; transform: rotate(-18deg); }
.wave-one { bottom: -170px; }
.wave-two { bottom: -118px; left: -42px; }
.login-card {
  position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(42px, 6vw, 76px); color: var(--ink); background: #f7fbfc;
}
.mobile-brand { display: none; color: var(--ink); }
.mobile-brand .matan-brand-logo { width: 225px; height: 62px; border: 1px solid #e5ebee; box-shadow: 0 8px 24px rgba(17,46,60,.1); }
.mobile-brand .visual-logo { color: #fff; border-color: transparent; background: linear-gradient(145deg, #0b766e, #159f93); }
.brand-mark {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #fff;
  background: linear-gradient(145deg, #0b766e, #159f93); box-shadow: 0 12px 26px rgba(11,111,103,.22);
}
.brand-mark.small { width: 48px; height: 48px; border-radius: 15px; }
.eyebrow { margin: 24px 0 7px; color: var(--primary); font-size: .78rem; font-weight: 800; letter-spacing: .05em; }
.login-kicker { width: fit-content; margin: 0 0 13px; padding: 7px 11px; border-radius: 9px; color: #08756f; background: #dff6f1; font-size: .78rem; font-weight: 800; }
.login-card h1 { margin: 0; font-size: clamp(2.5rem, 5vw, 3.35rem); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.login-copy { margin: 15px 0 34px; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.login-form { display: grid; gap: 10px; }
.login-form label { font-size: .9rem; font-weight: 700; }
.password-wrap { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 17px; border: 1.5px solid #d6e1e7; border-radius: 15px; color: #7890a0; background: #fff; transition: .2s; }
.password-wrap:focus-within { border-color: #00a99b; background: #fff; box-shadow: 0 0 0 4px rgba(0,169,155,.11); }
.password-wrap input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 1.05rem; direction: ltr; }
.login-form button { height: 58px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; border: 0; border-radius: 15px; color: #fff; background: linear-gradient(100deg, #08756f, #0aa99b); font-size: 1rem; font-weight: 800; cursor: pointer; box-shadow: 0 13px 28px rgba(8,117,111,.24); transition: .2s; }
.login-form button:hover { transform: translateY(-2px); box-shadow: 0 17px 32px rgba(8,117,111,.3); }
.login-form button:focus-visible, .dashboard-card:focus-visible, .logout-button:focus-visible { outline: 3px solid rgba(16,130,121,.28); outline-offset: 3px; }
.form-error { margin: 2px 0 0; color: #b42318; font-size: .88rem; font-weight: 700; }
.secure-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 25px 0 0; color: #8294a4; font-size: .79rem; }

.portal-shell {
  position: relative; min-height: 100vh; overflow: hidden; padding: 28px clamp(22px, 5vw, 76px); color: #fff;
  background: radial-gradient(circle at 85% 5%, rgba(14,172,157,.18), transparent 28%), radial-gradient(circle at 5% 85%, rgba(43,98,210,.18), transparent 31%), #071d2b;
}
.portal-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, black, transparent 88%); }
.portal-header { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.11); border-radius: 20px; background: rgba(255,255,255,.055); backdrop-filter: blur(14px); }
.brand-row { display: flex; align-items: center; gap: 15px; }
.brand-row .eyebrow { margin: 0 0 4px; color: #55dfd1; }
.brand-row h1 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 700; letter-spacing: -.02em; }
.logout-button { display: flex; align-items: center; gap: 7px; padding: 10px 15px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.07); font-weight: 700; cursor: pointer; transition: .2s; }
.logout-button:hover { color: #fff; background: rgba(255,255,255,.13); }
.portal-content { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: clamp(54px, 8vh, 84px) 0 70px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.portal-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #61e6d9; font-size: .8rem; font-weight: 800; }
.portal-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #42e5c9; box-shadow: 0 0 0 6px rgba(66,229,201,.12); }
.section-heading h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.035em; }
.section-subtitle { margin: 12px 0 0; color: rgba(255,255,255,.55); font-size: 1rem; }
.settlement-count { padding: 9px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); font-size: .85rem; font-weight: 700; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.dashboard-card { --card-accent: #2fe0c3; --card-glow: rgba(47,224,195,.24); position: relative; min-height: 360px; display: flex; flex-direction: column; padding: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 27px; color: #fff; background: linear-gradient(145deg, rgba(19,74,82,.94), rgba(9,38,57,.96)); box-shadow: 0 24px 55px rgba(0,0,0,.2); text-decoration: none; transition: transform .28s, box-shadow .28s, border-color .28s; }
.dashboard-card::before { content: ""; position: absolute; width: 270px; height: 270px; left: -80px; bottom: -125px; border-radius: 50%; background: radial-gradient(circle, var(--card-glow), transparent 66%); transition: transform .35s; }
.dashboard-card::after { content: ""; position: absolute; top: -95px; right: -65px; width: 230px; height: 230px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.022), 0 0 0 68px rgba(255,255,255,.016); }
.dashboard-card:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--card-accent) 50%, transparent); box-shadow: 0 30px 70px rgba(0,0,0,.3), 0 0 40px var(--card-glow); }
.dashboard-card:hover::before { transform: scale(1.18); }
.dashboard-card.green { --card-accent: #37e2be; --card-glow: rgba(55,226,190,.26); background: linear-gradient(145deg, #0c665f 0%, #0a3949 62%, #09283b 100%); }
.dashboard-card.blue { --card-accent: #6eb7ff; --card-glow: rgba(72,148,255,.28); background: linear-gradient(145deg, #145e99 0%, #123d70 55%, #0b2948 100%); }
.card-topline { display: flex; justify-content: space-between; align-items: center; }
.card-number { position: relative; z-index: 2; color: rgba(255,255,255,.46); font-size: .82rem; font-weight: 800; letter-spacing: .1em; }
.external-badge { position: relative; z-index: 2; width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: var(--card-accent); background: rgba(255,255,255,.07); }
.location-icon { position: relative; z-index: 2; width: 67px; height: 67px; display: grid; place-items: center; margin-top: 38px; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; color: #061f2d; background: var(--card-accent); box-shadow: 0 14px 26px var(--card-glow); }
.card-category { position: relative; z-index: 2; margin-top: 24px; color: var(--card-accent); font-size: .75rem; font-weight: 800; }
.dashboard-card h3 { position: relative; z-index: 2; margin: 7px 0 7px; color: #fff; font-size: 1.95rem; font-weight: 700; letter-spacing: -.025em; }
.dashboard-card p { position: relative; z-index: 2; margin: 0; color: rgba(255,255,255,.62); line-height: 1.55; }
.open-label { margin-top: auto; position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 800; }
.open-arrow { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: #071d2b; background: var(--card-accent); transition: transform .25s; }
.dashboard-card:hover .open-arrow { transform: translateX(-4px); }
footer { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 18px 0 4px; border-top: 1px solid rgba(255,255,255,.1); }
.footer-logo { display: block; width: 190px; height: 44px; margin-right: auto; object-fit: contain; border-radius: 9px; opacity: .88; }

@media (max-width: 700px) {
  .login-shell { padding: 16px; align-items: center; }
  .login-stage { min-height: auto; grid-template-columns: 1fr; border-radius: 26px; }
  .login-visual { display: none; }
  .login-card { min-height: 590px; padding: 36px 25px; }
  .mobile-brand { display: flex; margin-bottom: auto; }
  .login-kicker { margin-top: 46px; }
  .secure-note { margin-top: auto; padding-top: 30px; }
  .portal-shell { padding-inline: 18px; }
  .portal-header { align-items: flex-start; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-card { min-height: 300px; }
  .section-heading { align-items: flex-start; }
  .section-heading { flex-direction: column; }
  .location-icon { margin-top: 34px; }
  .logout-button { padding: 10px; font-size: 0; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .login-stage { grid-template-columns: .92fr 1.08fr; }
  .login-visual { padding: 36px; }
  .visual-copy h2 { font-size: 3.3rem; }
  .login-card { padding: 48px 38px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}