/*
! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
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 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Inter var, Inter, system-ui, -apple-system, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
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. Ensure horizontal rules are visible by default.
*/

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;
  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: JetBrains Mono, Fira Code, monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  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 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

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

:-moz-focusring {
  outline: auto;
}

/*
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;
}

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

progress {
  vertical-align: baseline;
}

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

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

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

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

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

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

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

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
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;
}

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

[hidden] {
  display: none;
}

[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

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

::-webkit-date-and-time-value {
  min-height: 1.5em;
}

::-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-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[multiple] {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

[type='checkbox'],[type='radio'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 320px) {
  .\!container {
    max-width: 320px !important;
  }

  .container {
    max-width: 320px;
  }
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

.hero-academic-cap {
  --hero-academic-cap: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"/></svg>');
  -webkit-mask: var(--hero-academic-cap);
  mask: var(--hero-academic-cap);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-adjustments-horizontal {
  --hero-adjustments-horizontal: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"/></svg>');
  -webkit-mask: var(--hero-adjustments-horizontal);
  mask: var(--hero-adjustments-horizontal);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-arrow-down-tray {
  --hero-arrow-down-tray: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>');
  -webkit-mask: var(--hero-arrow-down-tray);
  mask: var(--hero-arrow-down-tray);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-arrow-left {
  --hero-arrow-left: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/></svg>');
  -webkit-mask: var(--hero-arrow-left);
  mask: var(--hero-arrow-left);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-arrow-left-solid {
  --hero-arrow-left-solid: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">  <path fill-rule="evenodd" d="M11.03 3.97a.75.75 0 0 1 0 1.06l-6.22 6.22H21a.75.75 0 0 1 0 1.5H4.81l6.22 6.22a.75.75 0 1 1-1.06 1.06l-7.5-7.5a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/></svg>');
  -webkit-mask: var(--hero-arrow-left-solid);
  mask: var(--hero-arrow-left-solid);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-arrow-path {
  --hero-arrow-path: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/></svg>');
  -webkit-mask: var(--hero-arrow-path);
  mask: var(--hero-arrow-path);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-arrow-right {
  --hero-arrow-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>');
  -webkit-mask: var(--hero-arrow-right);
  mask: var(--hero-arrow-right);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-arrow-right-on-rectangle {
  --hero-arrow-right-on-rectangle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/></svg>');
  -webkit-mask: var(--hero-arrow-right-on-rectangle);
  mask: var(--hero-arrow-right-on-rectangle);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-arrow-up-right {
  --hero-arrow-up-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"/></svg>');
  -webkit-mask: var(--hero-arrow-up-right);
  mask: var(--hero-arrow-up-right);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-arrow-up-tray {
  --hero-arrow-up-tray: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/></svg>');
  -webkit-mask: var(--hero-arrow-up-tray);
  mask: var(--hero-arrow-up-tray);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-arrows-pointing-out {
  --hero-arrows-pointing-out: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"/></svg>');
  -webkit-mask: var(--hero-arrows-pointing-out);
  mask: var(--hero-arrows-pointing-out);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-arrows-right-left {
  --hero-arrows-right-left: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg>');
  -webkit-mask: var(--hero-arrows-right-left);
  mask: var(--hero-arrows-right-left);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-bell {
  --hero-bell: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>');
  -webkit-mask: var(--hero-bell);
  mask: var(--hero-bell);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-bell-slash {
  --hero-bell-slash: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M9.143 17.082a24.248 24.248 0 0 0 3.844.148m-3.844-.148a23.856 23.856 0 0 1-5.455-1.31 8.964 8.964 0 0 0 2.3-5.542m3.155 6.852a3 3 0 0 0 5.667 1.97m1.965-2.277L21 21m-4.225-4.225a23.81 23.81 0 0 0 3.536-1.003A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6.53 6.53m10.245 10.245L6.53 6.53M3 3l3.53 3.53"/></svg>');
  -webkit-mask: var(--hero-bell-slash);
  mask: var(--hero-bell-slash);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-bolt {
  --hero-bolt: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg>');
  -webkit-mask: var(--hero-bolt);
  mask: var(--hero-bolt);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-bookmark {
  --hero-bookmark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"/></svg>');
  -webkit-mask: var(--hero-bookmark);
  mask: var(--hero-bookmark);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-briefcase {
  --hero-briefcase: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z"/></svg>');
  -webkit-mask: var(--hero-briefcase);
  mask: var(--hero-briefcase);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-calculator {
  --hero-calculator: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008Zm0 2.25h.008v.008H8.25V13.5Zm0 2.25h.008v.008H8.25v-.008Zm0 2.25h.008v.008H8.25V18Zm2.498-6.75h.007v.008h-.007v-.008Zm0 2.25h.007v.008h-.007V13.5Zm0 2.25h.007v.008h-.007v-.008Zm0 2.25h.007v.008h-.007V18Zm2.504-6.75h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V13.5Zm0 2.25h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V18Zm2.498-6.75h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V13.5ZM8.25 6h7.5v2.25h-7.5V6ZM12 2.25c-1.892 0-3.758.11-5.593.322C5.307 2.7 4.5 3.65 4.5 4.757V19.5a2.25 2.25 0 0 0 2.25 2.25h10.5a2.25 2.25 0 0 0 2.25-2.25V4.757c0-1.108-.806-2.057-1.907-2.185A48.507 48.507 0 0 0 12 2.25Z"/></svg>');
  -webkit-mask: var(--hero-calculator);
  mask: var(--hero-calculator);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-chart-bar {
  --hero-chart-bar: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"/></svg>');
  -webkit-mask: var(--hero-chart-bar);
  mask: var(--hero-chart-bar);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-check {
  --hero-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>');
  -webkit-mask: var(--hero-check);
  mask: var(--hero-check);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-check-circle {
  --hero-check-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>');
  -webkit-mask: var(--hero-check-circle);
  mask: var(--hero-check-circle);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-chevron-down {
  --hero-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>');
  -webkit-mask: var(--hero-chevron-down);
  mask: var(--hero-chevron-down);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-chevron-left {
  --hero-chevron-left: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>');
  -webkit-mask: var(--hero-chevron-left);
  mask: var(--hero-chevron-left);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-chevron-right {
  --hero-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>');
  -webkit-mask: var(--hero-chevron-right);
  mask: var(--hero-chevron-right);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-clock {
  --hero-clock: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>');
  -webkit-mask: var(--hero-clock);
  mask: var(--hero-clock);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-cloud {
  --hero-cloud: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z"/></svg>');
  -webkit-mask: var(--hero-cloud);
  mask: var(--hero-cloud);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-cloud-arrow-up {
  --hero-cloud-arrow-up: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z"/></svg>');
  -webkit-mask: var(--hero-cloud-arrow-up);
  mask: var(--hero-cloud-arrow-up);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-cog-6-tooth {
  --hero-cog-6-tooth: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/>  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>');
  -webkit-mask: var(--hero-cog-6-tooth);
  mask: var(--hero-cog-6-tooth);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-cpu-chip {
  --hero-cpu-chip: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z"/></svg>');
  -webkit-mask: var(--hero-cpu-chip);
  mask: var(--hero-cpu-chip);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-credit-card {
  --hero-credit-card: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"/></svg>');
  -webkit-mask: var(--hero-credit-card);
  mask: var(--hero-credit-card);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-cube {
  --hero-cube: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"/></svg>');
  -webkit-mask: var(--hero-cube);
  mask: var(--hero-cube);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-document {
  --hero-document: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>');
  -webkit-mask: var(--hero-document);
  mask: var(--hero-document);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-document-arrow-up {
  --hero-document-arrow-up: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12-3-3m0 0-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>');
  -webkit-mask: var(--hero-document-arrow-up);
  mask: var(--hero-document-arrow-up);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-document-check {
  --hero-document-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12"/></svg>');
  -webkit-mask: var(--hero-document-check);
  mask: var(--hero-document-check);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-document-duplicate {
  --hero-document-duplicate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"/></svg>');
  -webkit-mask: var(--hero-document-duplicate);
  mask: var(--hero-document-duplicate);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-document-magnifying-glass {
  --hero-document-magnifying-glass: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/></svg>');
  -webkit-mask: var(--hero-document-magnifying-glass);
  mask: var(--hero-document-magnifying-glass);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-document-plus {
  --hero-document-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>');
  -webkit-mask: var(--hero-document-plus);
  mask: var(--hero-document-plus);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-document-text {
  --hero-document-text: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>');
  -webkit-mask: var(--hero-document-text);
  mask: var(--hero-document-text);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-ellipsis-horizontal {
  --hero-ellipsis-horizontal: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/></svg>');
  -webkit-mask: var(--hero-ellipsis-horizontal);
  mask: var(--hero-ellipsis-horizontal);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-envelope {
  --hero-envelope: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"/></svg>');
  -webkit-mask: var(--hero-envelope);
  mask: var(--hero-envelope);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-exclamation-circle {
  --hero-exclamation-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/></svg>');
  -webkit-mask: var(--hero-exclamation-circle);
  mask: var(--hero-exclamation-circle);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-exclamation-circle-mini {
  --hero-exclamation-circle-mini: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">  <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/></svg>');
  -webkit-mask: var(--hero-exclamation-circle-mini);
  mask: var(--hero-exclamation-circle-mini);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
}

.hero-exclamation-triangle {
  --hero-exclamation-triangle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>');
  -webkit-mask: var(--hero-exclamation-triangle);
  mask: var(--hero-exclamation-triangle);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-eye {
  --hero-eye: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/>  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>');
  -webkit-mask: var(--hero-eye);
  mask: var(--hero-eye);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-finger-print {
  --hero-finger-print: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M7.864 4.243A7.5 7.5 0 0 1 19.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 0 0 4.5 10.5a7.464 7.464 0 0 1-1.15 3.993m1.989 3.559A11.209 11.209 0 0 0 8.25 10.5a3.75 3.75 0 1 1 7.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 0 1-3.6 9.75m6.633-4.596a18.666 18.666 0 0 1-2.485 5.33"/></svg>');
  -webkit-mask: var(--hero-finger-print);
  mask: var(--hero-finger-print);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-flag {
  --hero-flag: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M3 3v1.5M3 21v-6m0 0 2.77-.693a9 9 0 0 1 6.208.682l.108.054a9 9 0 0 0 6.086.71l3.114-.732a48.524 48.524 0 0 1-.005-10.499l-3.11.732a9 9 0 0 1-6.085-.711l-.108-.054a9 9 0 0 0-6.208-.682L3 4.5M3 15V4.5"/></svg>');
  -webkit-mask: var(--hero-flag);
  mask: var(--hero-flag);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-folder {
  --hero-folder: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"/></svg>');
  -webkit-mask: var(--hero-folder);
  mask: var(--hero-folder);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-folder-open {
  --hero-folder-open: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776"/></svg>');
  -webkit-mask: var(--hero-folder-open);
  mask: var(--hero-folder-open);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-funnel {
  --hero-funnel: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"/></svg>');
  -webkit-mask: var(--hero-funnel);
  mask: var(--hero-funnel);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-gift {
  --hero-gift: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M21 11.25v8.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 1 0 9.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1 1 14.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"/></svg>');
  -webkit-mask: var(--hero-gift);
  mask: var(--hero-gift);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-globe-alt {
  --hero-globe-alt: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"/></svg>');
  -webkit-mask: var(--hero-globe-alt);
  mask: var(--hero-globe-alt);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-heart {
  --hero-heart: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/></svg>');
  -webkit-mask: var(--hero-heart);
  mask: var(--hero-heart);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-home {
  --hero-home: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>');
  -webkit-mask: var(--hero-home);
  mask: var(--hero-home);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-identification {
  --hero-identification: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"/></svg>');
  -webkit-mask: var(--hero-identification);
  mask: var(--hero-identification);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-inbox {
  --hero-inbox: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z"/></svg>');
  -webkit-mask: var(--hero-inbox);
  mask: var(--hero-inbox);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-inbox-arrow-down {
  --hero-inbox-arrow-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859M12 3v8.25m0 0-3-3m3 3 3-3"/></svg>');
  -webkit-mask: var(--hero-inbox-arrow-down);
  mask: var(--hero-inbox-arrow-down);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-information-circle {
  --hero-information-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>');
  -webkit-mask: var(--hero-information-circle);
  mask: var(--hero-information-circle);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-information-circle-mini {
  --hero-information-circle-mini: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">  <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd"/></svg>');
  -webkit-mask: var(--hero-information-circle-mini);
  mask: var(--hero-information-circle-mini);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
}

.hero-key {
  --hero-key: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"/></svg>');
  -webkit-mask: var(--hero-key);
  mask: var(--hero-key);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-language {
  --hero-language: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"/></svg>');
  -webkit-mask: var(--hero-language);
  mask: var(--hero-language);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-light-bulb {
  --hero-light-bulb: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg>');
  -webkit-mask: var(--hero-light-bulb);
  mask: var(--hero-light-bulb);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-link {
  --hero-link: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg>');
  -webkit-mask: var(--hero-link);
  mask: var(--hero-link);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-link-slash {
  --hero-link-slash: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M13.181 8.68a4.503 4.503 0 0 1 1.903 6.405m-9.768-2.782L3.56 14.06a4.5 4.5 0 0 0 6.364 6.365l3.129-3.129m5.614-5.615 1.757-1.757a4.5 4.5 0 0 0-6.364-6.365l-4.5 4.5c-.258.26-.479.541-.661.84m1.903 6.405a4.495 4.495 0 0 1-1.242-.88 4.483 4.483 0 0 1-1.062-1.683m6.587 2.345 5.907 5.907m-5.907-5.907L8.898 8.898M2.991 2.99 8.898 8.9"/></svg>');
  -webkit-mask: var(--hero-link-slash);
  mask: var(--hero-link-slash);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-lock-closed {
  --hero-lock-closed: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>');
  -webkit-mask: var(--hero-lock-closed);
  mask: var(--hero-lock-closed);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-lock-open {
  --hero-lock-open: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5V6.75a4.5 4.5 0 1 1 9 0v3.75M3.75 21.75h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H3.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>');
  -webkit-mask: var(--hero-lock-open);
  mask: var(--hero-lock-open);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-magnifying-glass {
  --hero-magnifying-glass: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>');
  -webkit-mask: var(--hero-magnifying-glass);
  mask: var(--hero-magnifying-glass);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-magnifying-glass-circle {
  --hero-magnifying-glass-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 15.75-2.489-2.489m0 0a3.375 3.375 0 1 0-4.773-4.773 3.375 3.375 0 0 0 4.774 4.774ZM21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>');
  -webkit-mask: var(--hero-magnifying-glass-circle);
  mask: var(--hero-magnifying-glass-circle);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-megaphone {
  --hero-megaphone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46"/></svg>');
  -webkit-mask: var(--hero-megaphone);
  mask: var(--hero-megaphone);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-microphone {
  --hero-microphone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z"/></svg>');
  -webkit-mask: var(--hero-microphone);
  mask: var(--hero-microphone);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-minus {
  --hero-minus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"/></svg>');
  -webkit-mask: var(--hero-minus);
  mask: var(--hero-minus);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-moon {
  --hero-moon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"/></svg>');
  -webkit-mask: var(--hero-moon);
  mask: var(--hero-moon);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-paper-airplane {
  --hero-paper-airplane: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"/></svg>');
  -webkit-mask: var(--hero-paper-airplane);
  mask: var(--hero-paper-airplane);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-paper-clip {
  --hero-paper-clip: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"/></svg>');
  -webkit-mask: var(--hero-paper-clip);
  mask: var(--hero-paper-clip);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-pencil {
  --hero-pencil: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"/></svg>');
  -webkit-mask: var(--hero-pencil);
  mask: var(--hero-pencil);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-pencil-square {
  --hero-pencil-square: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>');
  -webkit-mask: var(--hero-pencil-square);
  mask: var(--hero-pencil-square);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-photo {
  --hero-photo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/></svg>');
  -webkit-mask: var(--hero-photo);
  mask: var(--hero-photo);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-plus {
  --hero-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>');
  -webkit-mask: var(--hero-plus);
  mask: var(--hero-plus);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-plus-circle {
  --hero-plus-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>');
  -webkit-mask: var(--hero-plus-circle);
  mask: var(--hero-plus-circle);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-question-mark-circle {
  --hero-question-mark-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"/></svg>');
  -webkit-mask: var(--hero-question-mark-circle);
  mask: var(--hero-question-mark-circle);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-queue-list {
  --hero-queue-list: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z"/></svg>');
  -webkit-mask: var(--hero-queue-list);
  mask: var(--hero-queue-list);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-server-stack {
  --hero-server-stack: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"/></svg>');
  -webkit-mask: var(--hero-server-stack);
  mask: var(--hero-server-stack);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-share {
  --hero-share: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z"/></svg>');
  -webkit-mask: var(--hero-share);
  mask: var(--hero-share);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-shield-check {
  --hero-shield-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/></svg>');
  -webkit-mask: var(--hero-shield-check);
  mask: var(--hero-shield-check);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-shield-exclamation {
  --hero-shield-exclamation: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m0-10.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.25-8.25-3.286Zm0 13.036h.008v.008H12v-.008Z"/></svg>');
  -webkit-mask: var(--hero-shield-exclamation);
  mask: var(--hero-shield-exclamation);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-sparkles {
  --hero-sparkles: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"/></svg>');
  -webkit-mask: var(--hero-sparkles);
  mask: var(--hero-sparkles);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-squares-2x2 {
  --hero-squares-2x2: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"/></svg>');
  -webkit-mask: var(--hero-squares-2x2);
  mask: var(--hero-squares-2x2);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-star {
  --hero-star: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/></svg>');
  -webkit-mask: var(--hero-star);
  mask: var(--hero-star);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-trophy {
  --hero-trophy: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 0 1-.982-3.172M9.497 14.25a7.454 7.454 0 0 0 .981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 0 0 7.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 0 0 2.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 0 1 2.916.52 6.003 6.003 0 0 1-5.395 4.972m0 0a6.726 6.726 0 0 1-2.749 1.35m0 0a6.772 6.772 0 0 1-3.044 0"/></svg>');
  -webkit-mask: var(--hero-trophy);
  mask: var(--hero-trophy);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-user-circle {
  --hero-user-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>');
  -webkit-mask: var(--hero-user-circle);
  mask: var(--hero-user-circle);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-user-group {
  --hero-user-group: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/></svg>');
  -webkit-mask: var(--hero-user-group);
  mask: var(--hero-user-group);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-user-plus {
  --hero-user-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z"/></svg>');
  -webkit-mask: var(--hero-user-plus);
  mask: var(--hero-user-plus);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-users {
  --hero-users: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/></svg>');
  -webkit-mask: var(--hero-users);
  mask: var(--hero-users);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-wrench-screwdriver {
  --hero-wrench-screwdriver: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z"/></svg>');
  -webkit-mask: var(--hero-wrench-screwdriver);
  mask: var(--hero-wrench-screwdriver);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-x-mark {
  --hero-x-mark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>');
  -webkit-mask: var(--hero-x-mark);
  mask: var(--hero-x-mark);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.hero-x-mark-solid {
  --hero-x-mark-solid: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">  <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>');
  -webkit-mask: var(--hero-x-mark-solid);
  mask: var(--hero-x-mark-solid);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.-inset-y-px {
  top: -1px;
  bottom: -1px;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.-left-4 {
  left: -1rem;
}

.-right-0 {
  right: -0px;
}

.-right-0\.5 {
  right: -0.125rem;
}

.-right-2 {
  right: -0.5rem;
}

.-right-4 {
  right: -1rem;
}

.-top-0 {
  top: -0px;
}

.-top-0\.5 {
  top: -0.125rem;
}

.-top-2 {
  top: -0.5rem;
}

.bottom-0 {
  bottom: 0px;
}

.left-0 {
  left: 0px;
}

.left-2 {
  left: 0.5rem;
}

.left-3 {
  left: 0.75rem;
}

.left-\[40rem\] {
  left: 40rem;
}

.right-0 {
  right: 0px;
}

.right-1 {
  right: 0.25rem;
}

.right-12 {
  right: 3rem;
}

.right-2 {
  right: 0.5rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.right-5 {
  right: 1.25rem;
}

.top-0 {
  top: 0px;
}

.top-1 {
  top: 0.25rem;
}

.top-1\/2 {
  top: 50%;
}

.top-2 {
  top: 0.5rem;
}

.top-2\.5 {
  top: 0.625rem;
}

.top-4 {
  top: 1rem;
}

.top-6 {
  top: 1.5rem;
}

.top-full {
  top: 100%;
}

.-z-10 {
  z-index: -10;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-30 {
  z-index: 30;
}

.z-50 {
  z-index: 50;
}

.-m-3 {
  margin: -0.75rem;
}

.m-0 {
  margin: 0px;
}

.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

.-my-0 {
  margin-top: -0px;
  margin-bottom: -0px;
}

.-my-0\.5 {
  margin-top: -0.125rem;
  margin-bottom: -0.125rem;
}

.-my-4 {
  margin-top: -1rem;
  margin-bottom: -1rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.-ml-3 {
  margin-left: -0.75rem;
}

.-mr-3 {
  margin-right: -0.75rem;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-3\.5 {
  margin-bottom: 0.875rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-0 {
  margin-left: 0px;
}

.ml-0\.5 {
  margin-left: 0.125rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-1\.5 {
  margin-left: 0.375rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mt-0 {
  margin-top: 0px;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-11 {
  margin-top: 2.75rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-14 {
  margin-top: 3.5rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-3\.5 {
  margin-top: 0.875rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-auto {
  margin-top: auto;
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-0 {
  height: 0px;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-28 {
  height: 7rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-36 {
  height: 9rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-44 {
  height: 11rem;
}

.h-48 {
  height: 12rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-64 {
  height: 16rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[180px\] {
  height: 180px;
}

.h-\[18px\] {
  height: 18px;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.max-h-32 {
  max-height: 8rem;
}

.max-h-72 {
  max-height: 18rem;
}

.max-h-80 {
  max-height: 20rem;
}

.max-h-\[400px\] {
  max-height: 400px;
}

.max-h-\[520px\] {
  max-height: 520px;
}

.min-h-0 {
  min-height: 0px;
}

.min-h-12 {
  min-height: 3rem;
}

.min-h-9 {
  min-height: 2.25rem;
}

.min-h-\[3rem\] {
  min-height: 3rem;
}

.min-h-\[40px\] {
  min-height: 40px;
}

.min-h-\[44px\] {
  min-height: 44px;
}

.min-h-\[48px\] {
  min-height: 48px;
}

.min-h-\[52px\] {
  min-height: 52px;
}

.min-h-\[56px\] {
  min-height: 56px;
}

.min-h-\[60vh\] {
  min-height: 60vh;
}

.min-h-\[6rem\] {
  min-height: 6rem;
}

.min-h-full {
  min-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.w-0 {
  width: 0px;
}

.w-0\.5 {
  width: 0.125rem;
}

.w-1 {
  width: 0.25rem;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-1\/4 {
  width: 25%;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-4 {
  width: 1rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-80 {
  width: 20rem;
}

.w-9 {
  width: 2.25rem;
}

.w-96 {
  width: 24rem;
}

.w-\[18px\] {
  width: 18px;
}

.w-\[40\%\] {
  width: 40%;
}

.w-\[40rem\] {
  width: 40rem;
}

.w-\[80px\] {
  width: 80px;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-12 {
  min-width: 3rem;
}

.min-w-\[120px\] {
  min-width: 120px;
}

.min-w-\[130px\] {
  min-width: 130px;
}

.min-w-\[148px\] {
  min-width: 148px;
}

.min-w-\[18px\] {
  min-width: 18px;
}

.min-w-\[44px\] {
  min-width: 44px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-\[140px\] {
  max-width: 140px;
}

.max-w-\[160px\] {
  max-width: 160px;
}

.max-w-\[200px\] {
  max-width: 200px;
}

.max-w-\[260px\] {
  max-width: 260px;
}

.max-w-\[480px\] {
  max-width: 480px;
}

.max-w-\[780px\] {
  max-width: 780px;
}

.max-w-\[85\%\] {
  max-width: 85%;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-xs {
  max-width: 20rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-none {
  flex: none;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.basis-10 {
  flex-basis: 2.5rem;
}

.border-collapse {
  border-collapse: collapse;
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-4 {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-4 {
  --tw-translate-y: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-pointer {
  cursor: pointer;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize {
  resize: both;
}

.list-inside {
  list-style-position: inside;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-\[auto_1fr_auto_auto\] {
  grid-template-columns: auto 1fr auto auto;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.gap-0 {
  gap: 0px;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-px {
  gap: 1px;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-border-subtle > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-subtle);
}

.divide-zinc-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(244 244 245 / var(--tw-divide-opacity));
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: center;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis {
  text-overflow: ellipsis;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.text-balance {
  text-wrap: balance;
}

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-\[10px\] {
  border-radius: 10px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l {
  border-left-width: 1px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-dashed {
  border-style: dashed;
}

.border-\[\#9A3A3A\]\/30 {
  border-color: rgb(154 58 58 / 0.3);
}

.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity));
}

.border-border-subtle {
  border-color: var(--border-subtle);
}

.border-brand-400 {
  border-color: var(--brand-400);
}

.border-brand-500 {
  border-color: var(--brand-500);
}

.border-gray-200\/70 {
  border-color: rgb(229 231 235 / 0.7);
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.border-green-500\/15 {
  border-color: rgb(34 197 94 / 0.15);
}

.border-green-500\/20 {
  border-color: rgb(34 197 94 / 0.2);
}

.border-green-500\/25 {
  border-color: rgb(34 197 94 / 0.25);
}

.border-green-500\/30 {
  border-color: rgb(34 197 94 / 0.3);
}

.border-orange-400\/30 {
  border-color: rgb(251 146 60 / 0.3);
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
}

.border-red-500\/20 {
  border-color: rgb(239 68 68 / 0.2);
}

.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}

.border-rose-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 113 133 / var(--tw-border-opacity));
}

.border-transparent {
  border-color: transparent;
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-yellow-500\/20 {
  border-color: rgb(234 179 8 / 0.2);
}

.border-zinc-200 {
  --tw-border-opacity: 1;
  border-color: rgb(228 228 231 / var(--tw-border-opacity));
}

.border-zinc-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / var(--tw-border-opacity));
}

.border-l-brand-400 {
  border-left-color: var(--brand-400);
}

.border-l-brand-500 {
  border-left-color: var(--brand-500);
}

.border-l-cyan-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(6 182 212 / var(--tw-border-opacity));
}

.border-l-green-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(34 197 94 / var(--tw-border-opacity));
}

.border-l-orange-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(249 115 22 / var(--tw-border-opacity));
}

.border-l-pink-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(236 72 153 / var(--tw-border-opacity));
}

.border-l-red-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(239 68 68 / var(--tw-border-opacity));
}

.border-l-yellow-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(234 179 8 / var(--tw-border-opacity));
}

.border-t-transparent {
  border-top-color: transparent;
}

.bg-\[\#0061FF\]\/15 {
  background-color: rgb(0 97 255 / 0.15);
}

.bg-\[\#0078D4\]\/15 {
  background-color: rgb(0 120 212 / 0.15);
}

.bg-\[\#0A66C2\]\/15 {
  background-color: rgb(10 102 194 / 0.15);
}

.bg-\[\#1877F2\]\/15 {
  background-color: rgb(24 119 242 / 0.15);
}

.bg-\[\#1A56DB\] {
  --tw-bg-opacity: 1;
  background-color: rgb(26 86 219 / var(--tw-bg-opacity));
}

.bg-\[\#1DA1F2\]\/15 {
  background-color: rgb(29 161 242 / 0.15);
}

.bg-\[\#2B6CB0\]\/15 {
  background-color: rgb(43 108 176 / 0.15);
}

.bg-\[\#4285F4\]\/15 {
  background-color: rgb(66 133 244 / 0.15);
}

.bg-\[\#4A154B\]\/15 {
  background-color: rgb(74 21 75 / 0.15);
}

.bg-\[\#5865F2\]\/15 {
  background-color: rgb(88 101 242 / 0.15);
}

.bg-\[\#6B7280\]\/15 {
  background-color: rgb(107 114 128 / 0.15);
}

.bg-\[\#9A3A3A\]\/10 {
  background-color: rgb(154 58 58 / 0.1);
}

.bg-\[\#E1306C\]\/15 {
  background-color: rgb(225 48 108 / 0.15);
}

.bg-\[\#dbeafe\] {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}

.bg-\[var\(--border-default\)\] {
  background-color: var(--border-default);
}

.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
}

.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
}

.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
}

.bg-amber-500\/15 {
  background-color: rgb(245 158 11 / 0.15);
}

.bg-amber-500\/20 {
  background-color: rgb(245 158 11 / 0.2);
}

.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.bg-blue-500\/10 {
  background-color: rgb(59 130 246 / 0.1);
}

.bg-blue-500\/20 {
  background-color: rgb(59 130 246 / 0.2);
}

.bg-border-subtle {
  background-color: var(--border-subtle);
}

.bg-brand-400 {
  background-color: var(--brand-400);
}

.bg-brand-500 {
  background-color: var(--brand-500);
}

.bg-brand-600 {
  background-color: var(--brand-600);
}

.bg-current {
  background-color: currentColor;
}

.bg-cyan-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(6 182 212 / var(--tw-bg-opacity));
}

.bg-cyan-500\/20 {
  background-color: rgb(6 182 212 / 0.2);
}

.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity));
}

.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}

.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}

.bg-green-500\/10 {
  background-color: rgb(34 197 94 / 0.1);
}

.bg-green-500\/15 {
  background-color: rgb(34 197 94 / 0.15);
}

.bg-green-500\/20 {
  background-color: rgb(34 197 94 / 0.2);
}

.bg-green-500\/\[0\.06\] {
  background-color: rgb(34 197 94 / 0.06);
}

.bg-indigo-500\/15 {
  background-color: rgb(99 102 241 / 0.15);
}

.bg-orange-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
}

.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
}

.bg-orange-500\/10 {
  background-color: rgb(249 115 22 / 0.1);
}

.bg-orange-500\/20 {
  background-color: rgb(249 115 22 / 0.2);
}

.bg-purple-500\/10 {
  background-color: rgb(168 85 247 / 0.1);
}

.bg-purple-500\/15 {
  background-color: rgb(168 85 247 / 0.15);
}

.bg-purple-500\/20 {
  background-color: rgb(168 85 247 / 0.2);
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}

.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}

.bg-red-500\/15 {
  background-color: rgb(239 68 68 / 0.15);
}

.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}

.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity));
}

.bg-sky-500\/20 {
  background-color: rgb(14 165 233 / 0.2);
}

.bg-surface-base {
  background-color: var(--surface-base);
}

.bg-surface-overlay {
  background-color: var(--surface-overlay);
}

.bg-surface-raised {
  background-color: var(--surface-raised);
}

.bg-text-muted {
  background-color: var(--text-muted);
}

.bg-transparent {
  background-color: transparent;
}

.bg-violet-500\/20 {
  background-color: rgb(139 92 246 / 0.2);
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}

.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
}

.bg-yellow-500\/10 {
  background-color: rgb(234 179 8 / 0.1);
}

.bg-yellow-500\/20 {
  background-color: rgb(234 179 8 / 0.2);
}

.bg-zinc-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}

.bg-zinc-50\/90 {
  background-color: rgb(250 250 250 / 0.9);
}

.bg-zinc-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / var(--tw-bg-opacity));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-\[var\(--brand-500\)\] {
  --tw-gradient-from: var(--brand-500) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-\[var\(--brand-400\)\] {
  --tw-gradient-to: var(--brand-400) var(--tw-gradient-to-position);
}

.fill-cyan-900 {
  fill: #164e63;
}

.fill-rose-900 {
  fill: #881337;
}

.fill-zinc-400 {
  fill: #a1a1aa;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-14 {
  padding: 3.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[7px\] {
  padding-top: 7px;
  padding-bottom: 7px;
}

.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-2\.5 {
  padding-bottom: 0.625rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-9 {
  padding-left: 2.25rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-12 {
  padding-right: 3rem;
}

.pr-14 {
  padding-right: 3.5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-24 {
  padding-top: 6rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-3\.5 {
  padding-top: 0.875rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.font-mono {
  font-family: JetBrains Mono, Fira Code, monospace;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-\[0\.8125rem\] {
  font-size: 0.8125rem;
}

.text-\[1\.375rem\] {
  font-size: 1.375rem;
}

.text-\[1\.75rem\] {
  font-size: 1.75rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[2rem\] {
  font-size: 2rem;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-fluid-2xl {
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  line-height: 1.3;
}

.text-fluid-xl {
  font-size: clamp(1.1rem, 3vw, 1.25rem);
  line-height: 1.4;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-black {
  font-weight: 900;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-10 {
  line-height: 2.5rem;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-7 {
  line-height: 1.75rem;
}

.leading-8 {
  line-height: 2rem;
}

.leading-none {
  line-height: 1;
}

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-tighter {
  letter-spacing: -0.05em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-\[\#1A56DB\] {
  --tw-text-opacity: 1;
  color: rgb(26 86 219 / var(--tw-text-opacity));
}

.text-\[\#1f2a44\] {
  --tw-text-opacity: 1;
  color: rgb(31 42 68 / var(--tw-text-opacity));
}

.text-\[\#8690A2\] {
  --tw-text-opacity: 1;
  color: rgb(134 144 162 / var(--tw-text-opacity));
}

.text-\[\#9A3A3A\] {
  --tw-text-opacity: 1;
  color: rgb(154 58 58 / var(--tw-text-opacity));
}

.text-\[var\(--brand-500\)\] {
  color: var(--brand-500);
}

.text-\[var\(--text-emphasis\)\] {
  color: var(--text-emphasis);
}

.text-\[var\(--text-muted\)\] {
  color: var(--text-muted);
}

.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity));
}

.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}

.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity));
}

.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity));
}

.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity));
}

.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity));
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity));
}

.text-border-subtle {
  color: var(--border-subtle);
}

.text-brand-300 {
  color: var(--brand-300);
}

.text-brand-400 {
  color: var(--brand-400);
}

.text-brand-500 {
  color: var(--brand-500);
}

.text-brand-600 {
  color: var(--brand-600);
}

.text-cyan-300 {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity));
}

.text-cyan-400 {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity));
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity));
}

.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity));
}

.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity));
}

.text-green-400\/60 {
  color: rgb(74 222 128 / 0.6);
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity));
}

.text-indigo-400 {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity));
}

.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity));
}

.text-orange-300 {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity));
}

.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity));
}

.text-pink-400 {
  --tw-text-opacity: 1;
  color: rgb(244 114 182 / var(--tw-text-opacity));
}

.text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity));
}

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.text-red-400\/60 {
  color: rgb(248 113 113 / 0.6);
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity));
}

.text-rose-600 {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity));
}

.text-rose-900 {
  --tw-text-opacity: 1;
  color: rgb(136 19 55 / var(--tw-text-opacity));
}

.text-sky-300 {
  --tw-text-opacity: 1;
  color: rgb(125 211 252 / var(--tw-text-opacity));
}

.text-text-emphasis {
  color: var(--text-emphasis);
}

.text-text-inverse {
  color: var(--text-inverse);
}

.text-text-muted {
  color: var(--text-muted);
}

.text-violet-300 {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity));
}

.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity));
}

.text-zinc-500 {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity));
}

.text-zinc-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity));
}

.text-zinc-700 {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity));
}

.text-zinc-800 {
  --tw-text-opacity: 1;
  color: rgb(39 39 42 / var(--tw-text-opacity));
}

.text-zinc-900 {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / var(--tw-text-opacity));
}

.underline {
  text-decoration-line: underline;
}

.no-underline {
  text-decoration-line: none;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.placeholder-text-muted::-moz-placeholder {
  color: var(--text-muted);
}

.placeholder-text-muted::placeholder {
  color: var(--text-muted);
}

.accent-brand-500 {
  accent-color: var(--brand-500);
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-glow {
  --tw-shadow: 0 0 20px var(--brand-glow);
  --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-black\/40 {
  --tw-shadow-color: rgb(0 0 0 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-zinc-700\/10 {
  --tw-shadow-color: rgb(63 63 70 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-\[var\(--surface-base\)\] {
  --tw-ring-color: var(--surface-base);
}

.ring-amber-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(251 191 36 / var(--tw-ring-opacity));
}

.ring-emerald-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity));
}

.ring-rose-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(244 63 94 / var(--tw-ring-opacity));
}

.ring-surface-base {
  --tw-ring-color: var(--surface-base);
}

.ring-zinc-700\/10 {
  --tw-ring-color: rgb(63 63 70 / 0.1);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.text-balance {
  text-wrap: balance;
}

.\[grid-template-columns\:1fr_1fr_auto\] {
  grid-template-columns: 1fr 1fr auto;
}

.\[scrollbar-gutter\:stable\] {
  scrollbar-gutter: stable;
}

/* ── 2026 Design System ── */

/* ============================================================
   KONTENT DESIGN TOKENS — v2 (2026 redesign)
   Dark-mode primary, light-mode variant.
   Dual namespace: --brand-* (new) and --primary-* (legacy alias)
   ============================================================ */

/* ── Dark Mode (default) ── */

:root, .dark {
  /* Surfaces */
  --surface-base:    #0d0d10;
  --surface-raised:  #161619;
  --surface-overlay: #1e1e24;
  /* Borders */
  --border-subtle:   rgba(255, 255, 255, 0.06);
  --border-default:  rgba(255, 255, 255, 0.10);
  --border-emphasis: rgba(255, 255, 255, 0.20);
  /* Text */
  --text-muted:    rgba(255, 255, 255, 0.45);
  --text-default:  rgba(255, 255, 255, 0.87);
  --text-emphasis: #ffffff;
  --text-inverse:  #0d0d10;
  /* Brand (violet/purple — distinctive in dark mode) */
  --brand-300:  #c4b5fd;
  --brand-400:  #a78bfa;
  --brand-500:  #8c7cff;
  --brand-600:  #7c6af8;
  --brand-700:  #6d5ce8;
  --brand-glow: rgba(140, 124, 255, 0.35);
  /* Semantic */
  --success-500: #22c55e;
  --warning-500: #f59e0b;
  --error-500:   #ef4444;
  --info-500:    #3b82f6;
  /* Legacy aliases — existing components use --primary-* */
  --primary-300: var(--brand-300);
  --primary-400: var(--brand-400);
  --primary-500: var(--brand-500);
  --primary-600: var(--brand-600);
  --primary-700: var(--brand-700);
  /* Glass morphism (cards) */
  --glass-bg:      rgba(255, 255, 255, 0.04);
  --glass-border:  rgba(255, 255, 255, 0.08);
  --glass-shadow:  0 1px 3px rgba(0, 0, 0, 0.3);
  /* Sidebar */
  --sidebar-width:          240px;
  --sidebar-width-collapsed: 64px;
  /* Z-index scale */
  --z-sidebar:  100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
  --z-command:  500;
}

/* ── Light Mode ──
   Tokens calibrated against /mockup-archive/sidebar-cards.html (locked
   2026-05-05 visual direction). Body is light gray-blue (#f8f9fc) so
   white cards pop. Trust-blue accent + premium-purple companion.
   Ink scheme: solid color values (NOT rgba black-on-white) for proper
   contrast at all weights. */

.light, [data-theme="light"] {
  --surface-base:    #f8f9fc;
  /* mockup --bg — page background */
  --surface-raised:  #ffffff;
  /* mockup --surface — cards on bg */
  --surface-overlay: #eef1f7;
  /* mockup --surface-2 — subtle wells */
  --border-subtle:   #e2e6ef;
  /* mockup --border */
  --border-default:  #cbd2dd;
  /* mockup --border-2 */
  --border-emphasis: rgba(15, 23, 41, 0.20);
  --text-muted:    #5b6478;
  /* mockup --ink-soft */
  --text-default:  #1f2a44;
  /* mockup --ink-2 */
  --text-emphasis: #0f1729;
  /* mockup --ink */
  --text-vsoft:    #8690a2;
  /* mockup --ink-vsoft */
  --text-inverse:  #ffffff;
  /* Brand: trust-blue (mockup --trust). Primary CTA accent. */
  --brand-300:  #93c5fd;
  --brand-400:  #60a5fa;
  --brand-500:  #1a56db;
  --brand-600:  #1d4ed8;
  --brand-700:  #1e40af;
  --brand-glow: rgba(26, 86, 219, 0.18);
  /* Premium: companion purple (mockup --premium). Used in CTA gradient. */
  --premium-500: #7c3aed;
  --premium-soft: #ede9fe;
  --trust-soft:  #dbeafe;
  /* mockup --trust-soft — active-state bg */
  /* Glass morphism (cards) — light mode */
  --glass-bg:      #ffffff;
  --glass-border:  #e2e6ef;
  --glass-shadow:  0 1px 3px rgba(15,23,41,.04), 0 12px 32px -12px rgba(15,23,41,.14);
  --primary-300: var(--brand-300);
  --primary-400: var(--brand-400);
  --primary-500: var(--brand-500);
  --primary-600: var(--brand-600);
  --primary-700: var(--brand-700);
  --sidebar-width: 260px;
  /* mockup --sidebar-w */
}

/* ── Color Scheme Meta ── */

:root {
  color-scheme: dark;
}

.light {
  color-scheme: light;
}

/* ── Base Reset ── */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  font-optical-sizing: auto;
}

body {
  background-color: var(--surface-base);
  color: var(--text-default);
  font-family: 'Inter var', 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  /* Improve font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv01', 'cv02', 'cv03', 'cv04', 'calt';
}

/* ── Reduced Motion ── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Save-Data (slow network) ── */

.save-data * {
  animation: none !important;
  transition: none !important;
}

.save-data img {
  image-rendering: pixelated;
}

/* ── LiveView Connection State ── */

[data-phx-main] {
  /* Shown while LiveView socket is connecting */
}

[phx-disconnected] {
  opacity: 0.6;
  pointer-events: none;
}

[phx-connected] {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.2s ease;
}

/* ── Disconnection Banner ── */

.connection-banner {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-overlay);
  border: 1px solid var(--border-emphasis);
  border-radius: 0.75rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  z-index: var(--z-toast);
  display: none;
}

.phx-no-feedback .connection-banner {
  display: block;
}

/* ── Font display ── */

@font-face {
  font-family: 'Inter var';

  font-style: normal;

  font-weight: 100 900;

  font-display: swap;

  /* Prevents FOUT on Safari */

  src: url('/fonts/inter-var.woff2') format('woff2');
}

/* ============================================================
   GLASS MORPHISM COMPONENTS — 2026 Design System
   Uses -webkit-backdrop-filter for Safari 16.4+ compatibility
   ============================================================ */

.glass-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  /* Safari 16.4+ */
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
}

.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Light mode glass */

.light .glass-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px) saturate(1.8);
  -webkit-backdrop-filter: blur(12px) saturate(1.8);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Luminous / glow effect */

.glass-luminous {
  position: relative;
  overflow: hidden;
}

.glass-luminous::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(140, 124, 255, 0.12) 0%,
    transparent 60%
  );
  pointer-events: none;
}

/* Heavy glass (modals, overlays) */

.glass-heavy {
  background: rgba(13, 13, 16, 0.88);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}

/* Brand glow card */

.glow-card {
  box-shadow: 0 0 20px var(--brand-glow);
  border-color: rgba(140, 124, 255, 0.3);
}

.glow-card:hover {
  box-shadow: 0 0 40px var(--brand-glow);
  transition: box-shadow 0.3s ease;
}

/* ── @supports fallback for browsers without backdrop-filter ── */

@supports not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .glass-card {
    background: var(--surface-raised);
    border-color: var(--border-default);
  }

  .glass-heavy {
    background: var(--surface-overlay);
  }
}

/* ── Sidebar Glass (legacy) ── */

.sidebar-glass {
  background: rgba(13, 13, 16, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--border-subtle);
}

/* ── Sidebar shell ──
   White surface, single subtle right border. Matches sidebar-cards
   mockup (locked 2026-05-05 visual direction). The previous lavender
   gradient was abandoned. */

.sidebar-e {
  background: var(--surface-raised);
  border-right: 1px solid var(--border-subtle);
}

/* ── Tooltip Glass ── */

.tooltip-glass {
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  color: var(--text-default);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ============================================================
   BENTO GRID LAYOUT — Dashboard & Data-Dense Screens
   Inspired by Linear, Attio, and modern product dashboards
   ============================================================ */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 1rem;
  width: 100%;
}

/* Spanning variants */

.bento-1x1 {
  grid-column: span 1;
  grid-row: span 1;
}

.bento-2x1 {
  grid-column: span 2;
  grid-row: span 1;
}

.bento-3x1 {
  grid-column: span 3;
  grid-row: span 1;
}

.bento-4x1 {
  grid-column: span 4;
  grid-row: span 1;
}

.bento-1x2 {
  grid-column: span 1;
  grid-row: span 2;
}

.bento-2x2 {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-3x2 {
  grid-column: span 3;
  grid-row: span 2;
}

.bento-4x2 {
  grid-column: span 4;
  grid-row: span 2;
}

/* Tablet: 2 columns */

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

  .bento-3x1, .bento-4x1 {
    grid-column: span 2;
  }

  .bento-3x2, .bento-4x2 {
    grid-column: span 2;
  }
}

/* Mobile: 1 column */

@media (max-width: 640px) {
  .bento {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  [class^="bento-"] {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* Bento cell base */

.bento-cell {
  min-height: 120px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bento-cell:hover {
  transform: translateY(-1px);
}

/* Bento cell variants */

.bento-stat {
  /* Quick-glance metric card */
  align-items: flex-start;
  justify-content: space-between;
}

.bento-stat__value {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-emphasis);
  line-height: 1;
}

.bento-stat__label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.bento-stat__delta {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}

.bento-stat__delta--up   {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.bento-stat__delta--down {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.bento-stat__delta--flat {
  background: rgba(255,255,255,0.08);
  color: var(--text-muted);
}

/* ============================================================
   TYPOGRAPHY — Fluid scale, text-wrap: balance, semantic hierarchy
   ============================================================ */

/* ── Heading styles ── */

h1, .h1 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-emphasis);
}

@supports (text-wrap: balance) {
  h1, .h1, h2, .h2, h3, .h3 {
    text-wrap: balance;
  }
}

h2, .h2 {
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-emphasis);
}

h3, .h3 {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text-default);
}

h4, .h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-default);
}

/* ── Body text ── */

p, .body {
  font-size: clamp(0.875rem, 2vw, 1rem);
  line-height: 1.65;
  color: var(--text-default);
}

.body-sm {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.body-xs {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── Label styles ── */

.label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.label-md {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* ── Code ── */

code, kbd {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.875em;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 0.25rem;
  padding: 0.1em 0.4em;
}

/* ── Gradient text ── */

.gradient-text {
  background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Truncate utilities ── */

.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   SKELETON LOADING — Non-blocking perceived performance
   Used with connected?(socket) pattern in LiveViews
   ============================================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-raised) 25%,
    var(--surface-overlay) 50%,
    var(--surface-raised) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-sweep 1.5s ease-in-out infinite;
  border-radius: 0.5rem;
}

@keyframes skeleton-sweep {
  0%   {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Respect reduced motion */

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: var(--surface-raised);
  }
}

/* Skeleton shape presets */

.skeleton-text      {
  height: 1em;
  width: 100%;
}

.skeleton-text-sm   {
  height: 0.75em;
  width: 70%;
}

.skeleton-title     {
  height: 1.5em;
  width: 60%;
}

.skeleton-avatar    {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
}

.skeleton-avatar-lg {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
}

.skeleton-button    {
  height: 2.25rem;
  width: 8rem;
  border-radius: 0.5rem;
}

.skeleton-card      {
  height: 8rem;
  border-radius: 1rem;
}

.skeleton-badge     {
  height: 1.25rem;
  width: 4rem;
  border-radius: 9999px;
}

/* Stack of skeleton lines (simulates text paragraphs) */

.skeleton-paragraph > * + * {
  margin-top: 0.5em;
}

.skeleton-paragraph > *:last-child {
  width: 45%;
}

/* ============================================================
   PROTECTED CONTENT — Copy/print protection for sensitive data
   ============================================================ */

.protected-content {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.protected-content::-moz-selection {
  background: transparent;
}

.protected-content::selection {
  background: transparent;
}

/* Blur sensitive values on hover-away */

.blur-sensitive {
  filter: blur(4px);
  transition: filter 0.2s ease;
}

.blur-sensitive:hover,
.blur-sensitive:focus {
  filter: none;
}

/* Print protection */

@media print {
  .protected-content {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  body::after {
    content: "Printed from Kontent";
    position: fixed;
    bottom: 1cm;
    right: 1cm;
    font-size: 8pt;
    color: #999;
    opacity: 0.5;
  }
}

/* Data classification badge */

.classification-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid;
}

.classification-badge--sensitive {
  background: rgba(245, 158, 11, 0.10);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.20);
}

.classification-badge--confidential {
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.20);
}

.classification-badge--public {
  background: rgba(34, 197, 94, 0.10);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.20);
}

/* ============================================================
   COMMAND PALETTE — Cmd+K universal navigation overlay
   ============================================================ */

.cmd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-command);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  animation: fadeIn 0.15s ease-out;
}

.cmd-palette {
  width: 100%;
  max-width: 640px;
  border-radius: 1rem;
  overflow: hidden;
  animation: slideUp 0.2s ease-out;
}

.cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1rem;
  color: var(--text-emphasis);
  caret-color: var(--brand-500);
}

.cmd-input::-moz-placeholder {
  color: var(--text-muted);
}

.cmd-input::placeholder {
  color: var(--text-muted);
}

.cmd-results {
  max-height: 400px;
  overflow-y: auto;
  padding: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.cmd-group-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.5rem 0.75rem 0.25rem;
}

.cmd-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.1s ease;
  color: var(--text-default);
  text-decoration: none;
}

.cmd-item:hover,
.cmd-item[aria-selected="true"] {
  background: var(--surface-overlay);
  color: var(--text-emphasis);
}

.cmd-item__icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.cmd-item__label {
  flex: 1;
  font-size: 0.875rem;
}

.cmd-item__hint  {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cmd-item__kbd {
  font-size: 0.6875rem;
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-family: monospace;
  color: var(--text-muted);
}

/* Empty state */

.cmd-empty {
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Footer */

.cmd-footer {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1.25rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.cmd-footer kbd {
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  border-radius: 0.25rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.6875rem;
}

/* Mobile: full width */

@media (max-width: 640px) {
  .cmd-overlay {
    align-items: flex-end;
    padding-top: 0;
  }

  .cmd-palette {
    border-radius: 1rem 1rem 0 0;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
  }

  .cmd-results {
    flex: 1;
  }
}

/* ============================================================
   DASHBOARD — Visual identity for the main overview page
   Adds ambient depth, motion, and status-aware color to cards
   ============================================================ */

/* ── Page ambient lighting ── */

.dashboard-page {
  position: relative;
  isolation: isolate;
}

.dashboard-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(140, 124, 255, 0.07) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 90%, rgba(140, 124, 255, 0.04) 0%, transparent 38%);
}

/* ── Hero greeting card ── */

.card-hero {
  background:
    radial-gradient(ellipse at 0% 50%, rgba(140, 124, 255, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 0%, rgba(167, 139, 250, 0.06) 0%, transparent 40%),
    rgba(255, 255, 255, 0.025);
  border-color: rgba(140, 124, 255, 0.18);
}

/* ── Streak card ── */

.card-streak {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(251, 146, 60, 0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(140, 124, 255, 0.14) 0%, transparent 55%),
    rgba(255, 255, 255, 0.03);
  border-color: rgba(140, 124, 255, 0.22);
}

/* ── Large metric number ── */

.stat-number {
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-emphasis);
}

/* ── Streak flame ── */

.flame {
  display: inline-block;
  filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.45));
  animation: flame-breathe 2.5s ease-in-out infinite alternate;
  transform-origin: center bottom;
}

@keyframes flame-breathe {
  from {
    filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.35));
    transform: scaleY(1) rotate(-1deg);
  }

  to {
    filter: drop-shadow(0 0 16px rgba(251, 146, 60, 0.75));
    transform: scaleY(1.06) rotate(1deg);
  }
}

.flame-off {
  filter: grayscale(1);
  opacity: 0.2;
}

/* ── Progress bar with gradient fill ── */

.progress-fill-brand {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-700) 0%, var(--brand-400) 100%);
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-fill-success {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Pulsing activity dots ── */

.pulse-amber {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning-500);
  flex-shrink: 0;
  animation: pulse-a 2s ease-in-out infinite;
}

@keyframes pulse-a {
  0%   {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
  }

  70%  {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

.pulse-red {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--error-500);
  flex-shrink: 0;
  animation: pulse-r 2s ease-in-out infinite;
}

@keyframes pulse-r {
  0%   {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  }

  70%  {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.pulse-brand {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-500);
  flex-shrink: 0;
  animation: pulse-b 2s ease-in-out infinite;
}

@keyframes pulse-b {
  0%   {
    box-shadow: 0 0 0 0 var(--brand-glow);
  }

  70%  {
    box-shadow: 0 0 0 8px rgba(140, 124, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(140, 124, 255, 0);
  }
}

/* ── Stat card hover lift ── */

.stat-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

/* ── Attention card ── */

.card-attention {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-left: 3px solid var(--warning-500);
}

/* ── Mini chip (inline stat badge in hero) ── */

.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  color: var(--text-default);
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.stat-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(140, 124, 255, 0.3);
}

/* ── Recent doc row ── */

.doc-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  transition: background 0.12s ease;
  text-decoration: none;
}

.doc-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.doc-row:hover .doc-row__chevron {
  opacity: 0.7;
  transform: translateX(2px);
}

.doc-row__chevron {
  opacity: 0.2;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

/* ── Freeze token shield ── */

.token-active  {
  color: #60a5fa;
}

.token-spent   {
  color: rgba(255, 255, 255, 0.12);
}

/* ── Challenge progress ring wrapper ── */

.xp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(140,124,255,0.15) 0%, rgba(140,124,255,0.08) 100%);
  border: 1px solid rgba(140, 124, 255, 0.25);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-300);
}

/* ── Fade-in on load ── */

.dashboard-loaded {
  animation: dashboard-in 0.3s ease-out both;
}

@keyframes dashboard-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to   {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Stagger children ── */

.stagger-children > * {
  animation: dashboard-in 0.35s ease-out both;
}

.stagger-children > *:nth-child(1) {
  animation-delay: 0.00s;
}

.stagger-children > *:nth-child(2) {
  animation-delay: 0.05s;
}

.stagger-children > *:nth-child(3) {
  animation-delay: 0.10s;
}

.stagger-children > *:nth-child(4) {
  animation-delay: 0.15s;
}

.stagger-children > *:nth-child(5) {
  animation-delay: 0.20s;
}

.stagger-children > *:nth-child(6) {
  animation-delay: 0.25s;
}

.stagger-children > *:nth-child(7) {
  animation-delay: 0.30s;
}

.stagger-children > *:nth-child(8) {
  animation-delay: 0.35s;
}

.stagger-children > *:nth-child(9) {
  animation-delay: 0.40s;
}

.stagger-children > *:nth-child(10) {
  animation-delay: 0.45s;
}

/* ── CTA Banner — expiring document warning ── */

.cta-banner {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-left: 3px solid var(--warning-500);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

.cta-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  background: rgba(245, 158, 11, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cta-action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  background: var(--warning-500);
  color: var(--text-inverse);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.15s ease;
  text-decoration: none;
}

.cta-action:hover {
  background: #d97706;
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────────────────────
   Focus Hero — Dashboard AI-first prompt mode
   Locked Kontent visual direction (2026-04-17, hybrid-b-default).
   - Camellia accent #9A3A3A, Fraunces italic for greeting, humanist sans body
   - Warm paper surface (#FAF7F2) with 2% grain, Reduced-motion honored.
   - Light + dark mode supported via CSS variables.
   ────────────────────────────────────────────────────────────────────────── */

/* Focus hero is always rendered on a white surface, even when the app theme
   is dark. The prompt hero is treated as a self-contained "stage" — the
   AI-first interaction surface — and stays bright for legibility regardless
   of the surrounding chrome. */

.focus-hero {
  --camellia: #9A3A3A;
  --camellia-deep: #7A2D2D;
  --camellia-soft: rgba(154, 58, 58, 0.10);
  --paper-surface: #FFFFFF;
  --paper-edge: rgba(15, 23, 42, 0.08);
  --paper-edge-soft: rgba(15, 23, 42, 0.04);
  --ink-strong: #0F172A;
  --ink-muted: #475569;
  --warn-bg: #FFF7ED;
  --warn-border: #FED7AA;
  --warn-ink: #9A3412;
  --warn-row-divider: rgba(154, 52, 18, 0.12);
}

/* ── outer hero section — sits inside .dashboard-page max-width ──────────── */

/* Sized to content (NOT full-viewport) so the attention band and the rest
   of the bento (recent items, streak, vault score, etc.) flow naturally
   beneath it without forcing the user to scroll past an empty stage. */

.focus-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--paper-surface);
  border-radius: 1.25rem;
  border: 1px solid var(--paper-edge);
  padding: 1rem 1.25rem 1.75rem;
  overflow: hidden;
  color: var(--ink-strong);
  margin-bottom: 1rem;
}

/* ── top-right toggle pill — restore-back to Overview ────────────────────── */

.focus-toggle-row {
  display: flex;
  justify-content: flex-end;
}

.focus-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--paper-edge);
  border-radius: 999px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
  letter-spacing: 0.01em;
  min-height: 32px;
}

.focus-toggle:hover,
.focus-toggle:focus-visible {
  color: var(--camellia);
  border-color: var(--camellia);
  background: var(--camellia-soft);
  outline: none;
}

.focus-toggle:focus-visible {
  outline: 2px solid var(--camellia);
  outline-offset: 2px;
}

/* When shown above the bento (overview mode), this style on a darker container */

.dashboard-mode-toggle-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.focus-toggle--ondark {
  color: var(--text-muted, #9A958E);
  border-color: var(--border-subtle, rgba(255, 255, 255, 0.10));
}

/* ── stage — centered narrow column ──────────────────────────────────────── */

.focus-stage {
  position: relative;
  z-index: 1;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding-top: clamp(1.5rem, 4vh, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── greeting — Fraunces italic for time-of-day, sans for name ───────────── */

.focus-greeting {
  text-align: center;
}

.focus-greeting h1 {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  line-height: 1.15;
  margin: 0;
}

/* Greeting: regular sans-serif, NOT italic (matches sidebar-cards mockup
   /mockup-archive/sidebar-cards.html — "Good evening, Ravi" plain h1).
   Class kept for backwards compatibility but visual treatment is now
   identical to the surrounding h1. */

.focus-greeting-italic {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
}

.focus-subhead {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  font-weight: 400;
}

/* ── form — ask box ─────────────────────────────────────────────────────── */

.focus-form {
  background: #FFFFFF;
  border: 1px solid var(--paper-edge);
  border-radius: 1rem;
  padding: 1rem 1.25rem 0.75rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.focus-form:focus-within {
  border-color: var(--camellia);
  box-shadow: 0 0 0 3px var(--camellia-soft);
}

.focus-textarea {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink-strong);
  line-height: 1.5;
  outline: none;
  min-height: 4.5rem;
}

.focus-textarea::-moz-placeholder {
  color: var(--ink-muted);
  opacity: 0.85;
}

.focus-textarea::placeholder {
  color: var(--ink-muted);
  opacity: 0.85;
}

.focus-form-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--paper-edge);
}

.focus-form-bar-left {
  display: flex;
  gap: 0.5rem;
}

.focus-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--paper-edge);
  border-radius: 999px;
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.focus-ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.15rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--camellia);
  border: 1px solid var(--camellia);
  border-radius: 999px;
  cursor: pointer;
  min-height: 40px;
  transition: background-color 120ms ease, transform 120ms ease;
}

.focus-ask-btn:hover:not(:disabled) {
  background: var(--camellia-deep);
  border-color: var(--camellia-deep);
}

.focus-ask-btn:focus-visible {
  outline: 2px solid var(--camellia);
  outline-offset: 2px;
}

.focus-ask-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── chip row — 4 task suggestions ───────────────────────────────────────── */

.focus-chips {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  justify-content: center;
}

.focus-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-strong);
  background: #FFFFFF;
  border: 1px solid var(--paper-edge);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, transform 120ms ease;
  min-height: 40px;
}

.focus-chip:hover,
.focus-chip:focus-visible {
  border-color: var(--camellia);
  color: var(--camellia);
  outline: none;
}

.focus-chip:focus-visible {
  outline: 2px solid var(--camellia);
  outline-offset: 2px;
}

.focus-chip:active {
  transform: translateY(1px);
}

/* ── inline nudge ────────────────────────────────────────────────────────── */

.focus-nudge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.focus-nudge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--camellia);
  flex-shrink: 0;
}

.focus-nudge-link {
  color: var(--camellia);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.focus-nudge-link:hover {
  color: var(--camellia-deep);
}

/* ── attention band — kept from bento, restyled for white surface ────────── */

.focus-attention {
  border-radius: 0.875rem;
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  overflow: hidden;
}

.focus-attention-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--warn-border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--warn-ink);
}

.focus-attention-list {
  display: flex;
  flex-direction: column;
}

.focus-attention-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  color: var(--ink-strong);
}

.focus-attention-row + .focus-attention-row {
  border-top: 1px solid var(--warn-row-divider);
}

.focus-attention-row-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.focus-attention-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--camellia);
  flex-shrink: 0;
}

.focus-attention-link {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--camellia);
  text-decoration: none;
}

.focus-attention-link:hover {
  color: var(--camellia-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .focus-hero {
    padding: 0.75rem 0.75rem 1.5rem;
  }

  .focus-stage {
    padding-top: clamp(1.5rem, 6vh, 3rem);
    gap: 1.25rem;
  }

  .focus-form {
    padding: 0.875rem 1rem 0.625rem;
  }

  .focus-chips {
    gap: 0.5rem;
  }
}

/* ── reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .focus-toggle,
  .focus-form,
  .focus-ask-btn,
  .focus-chip {
    transition: none;
  }
}

/* ── elder/child age-mode adaptations ────────────────────────────────────── */

.age-elder .focus-greeting h1 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
}

.age-elder .focus-textarea {
  font-size: 1.125rem;
  min-height: 5.5rem;
}

.age-elder .focus-chip {
  font-size: 0.9375rem;
  min-height: 48px;
  padding: 0.65rem 1.15rem;
}

.age-elder .focus-ask-btn {
  min-height: 48px;
  font-size: 1rem;
}

.age-elder .focus-toggle {
  display: none;
}

/* elder mode locked to focus */

.age-child .focus-greeting h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
}

.age-child .focus-toggle {
  display: none;
}

/* child mode locked to focus */

/* ── Inline response panel — appears below chips when user submits or clicks chip ── */

.focus-response {
  background: #FFFFFF;
  border: 1px solid var(--paper-edge);
  border-radius: 0.875rem;
  padding: 1rem 1.25rem 0.875rem;
  text-align: left;
  animation: focus-response-in 180ms ease-out both;
}

@keyframes focus-response-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to   {
    opacity: 1;
    transform: translateY(0);
  }
}

.focus-response-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.focus-response-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-strong);
  margin: 0;
}

.focus-response-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.focus-response-close:hover {
  background: var(--paper-edge-soft);
  color: var(--ink-strong);
}

.focus-response-section {
  margin-top: 0.875rem;
}

.focus-response-section-title {
  text-transform: uppercase;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 0.4rem;
}

.focus-response-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.focus-response-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-strong);
  border: 1px solid var(--paper-edge-soft);
  background: var(--paper-surface);
}

.focus-response-row--ok {
  border-color: rgba(16, 185, 129, 0.18);
  background: rgba(16, 185, 129, 0.04);
}

.focus-response-row--gap {
  border-color: rgba(154, 58, 58, 0.18);
  background: rgba(154, 58, 58, 0.04);
}

.focus-response-suggestion {
  font-size: 0.6875rem;
  color: var(--ink-muted);
  margin-left: auto;
  flex-shrink: 0;
}

.focus-response-meta {
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", monospace;
  font-size: 0.6875rem;
  color: var(--ink-muted);
  margin-left: auto;
  flex-shrink: 0;
}

.focus-response-link {
  color: var(--camellia);
  font-weight: 600;
  font-size: 0.75rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.focus-response-link:hover {
  color: var(--camellia-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.focus-response-empty {
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin: 0.25rem 0;
}

.focus-response-progress {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}

.focus-response-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--paper-edge-soft);
  border-radius: 999px;
  overflow: hidden;
}

.focus-response-progress-fill {
  height: 100%;
  background: var(--camellia);
  transition: width 240ms ease-out;
}

.focus-response-progress-text {
  font-size: 0.75rem;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.focus-response-cta {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  background: var(--paper-surface);
  border: 1px solid var(--paper-edge-soft);
  border-radius: 0.625rem;
}

.focus-response-foot {
  margin-top: 0.875rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--paper-edge-soft);
  text-align: right;
}

/* ── Entity card (AnswerEngine) ── */

.focus-card-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
}

.focus-card-status--ok {
  background: rgba(16, 185, 129, 0.10);
  color: #047857;
}

.focus-card-status--warn {
  background: rgba(245, 158, 11, 0.10);
  color: #92400E;
}

.focus-card-status--critical {
  background: rgba(154, 58, 58, 0.12);
  color: var(--camellia-deep);
}

.focus-card-fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.focus-card-field {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--paper-edge-soft);
  background: var(--paper-surface);
  border-radius: 0.5rem;
  font-size: 0.8125rem;
}

.focus-card-field-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-weight: 600;
}

.focus-card-field-value {
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", monospace;
  font-size: 0.875rem;
  color: var(--ink-strong);
  letter-spacing: 0.02em;
}

.focus-card-reveal {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--paper-edge);
  background: transparent;
  color: var(--camellia);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.focus-card-reveal:hover {
  border-color: var(--camellia);
  background: rgba(154, 58, 58, 0.06);
}

.focus-card-reveal--active {
  background: var(--camellia);
  color: #fff;
  border-color: var(--camellia);
}

.focus-card-reveal--active:hover {
  background: var(--camellia-deep);
}

.focus-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--paper-edge-soft);
}

.focus-card-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--paper-edge);
  background: var(--paper-surface);
  color: var(--ink-strong);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease;
}

.focus-card-action:hover {
  border-color: var(--camellia);
  color: var(--camellia);
}

.focus-card-audit {
  margin: 0.75rem 0 0;
  font-size: 0.6875rem;
  color: var(--ink-muted);
  text-align: right;
}

/* ══════════════════════════════════════════════════════════════
   MY INFO — Component Styles
   Uses design tokens from tokens.css
   ══════════════════════════════════════════════════════════════ */

/* ── Shared Components ── */

.mi-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  /* Visual audit 2026-05-13 (§ Card containers — P0):
     locked direction retires drop shadows; depth comes from the
     1px border + warm-paper background instead. */
  margin-bottom: 12px;
  overflow: hidden;
}

.mi-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

/* Wave 3 (2026-05-13): bumped to 0.9375rem (15px) so card titles read as
   the second tier above the eyebrow-style row labels. Was 14px which
   collided with nav-item size. */

.mi-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-emphasis);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Work QA D-W1/D-W2 (2026-05-14) — `.mi-card-action` was defined but
   never emitted. The HEEx template now renders it from
   `field_groups(cat).action`. Bumped padding to clear WCAG 2.5.5 AA
   (44px height) and added margin-top so the button breathes below the
   final `.mi-sr` row instead of jamming the card bottom border. */

.mi-card-action {
  font-size: 12px;
  color: var(--brand-500);
  cursor: pointer;
  font-weight: 600;
  padding: 12px 14px;
  border-radius: 6px;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  /* Housing UX audit 2026-05-14 H-P1-3 — `+ Add vehicle` measured
     44×44 (AA, not AAA). Lift floor to 48 to align with universal-
     design rules; matches `.mi-btn-sm` and `.mi-sr` height contract. */
  min-height: 48px;
  margin-top: 4px;
}

.mi-card-action:hover {
  background: var(--brand-glow);
}

.mi-card-action:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* Canonical card body padding — components must NOT set inline padding overrides
   on .mi-card-body. (Visual audit 2026-05-13 §2 — padding drift across Path C
   live_components caused horizontal misalignment between cards in Primary.) */

.mi-card-body {
  padding: 8px 16px;
}

/* Empty-state cards (no incoming requests / no active shares / etc.) need
   more breathing room than the default 8x16. Extracted from inline
   `style="padding:24px;text-align:center;color:var(--text-muted)"` on
   2026-05-13 verification sweep — last two stragglers from the Wave B
   padding consolidation. */

.mi-empty-state {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}

/* Badges */

.mi-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.mi-b-brand {
  background: var(--brand-glow);
  color: var(--brand-500);
}

.mi-b-green {
  background: rgba(34, 197, 94, .1);
  color: #16a34a;
}

.mi-b-amber {
  background: rgba(245, 158, 11, .1);
  color: #d97706;
}

.mi-b-red {
  background: rgba(239, 68, 68, .1);
  color: #dc2626;
}

.mi-b-muted {
  background: var(--border-subtle);
  color: var(--text-muted);
}

.mi-b-primary {
  background: var(--brand-500);
  color: var(--text-inverse);
  font-size: 9px;
  padding: 1px 6px;
}

.mi-b-blue {
  background: rgba(59, 130, 246, .1);
  color: #2563eb;
}

.mi-b-ver {
  background: var(--surface-overlay);
  color: var(--text-muted);
  font-size: 9px;
  padding: 1px 6px;
  font-family: 'Courier New', monospace;
  border: 1px solid var(--border-default);
}

.mi-b-ts {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
  font-style: italic;
}

/* Tags */

.mi-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  margin: 1px 2px;
}

.mi-tag-red {
  background: rgba(239, 68, 68, .1);
  color: #dc2626;
}

.mi-tag-blue {
  background: rgba(59, 130, 246, .1);
  color: #2563eb;
}

.mi-tag-amber {
  background: rgba(245, 158, 11, .1);
  color: #d97706;
}

.mi-tag-green {
  background: rgba(34, 197, 94, .1);
  color: #16a34a;
}

.mi-tag-brand {
  background: var(--brand-glow);
  color: var(--brand-500);
}

/* Buttons */

.mi-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-default);
  transition: all .15s;
}

.mi-btn:hover {
  background: var(--border-subtle);
}

.mi-btn-primary {
  background: var(--brand-500);
  color: var(--text-inverse);
  border-color: var(--brand-500);
}

.mi-btn-primary:hover {
  opacity: .9;
}

/* Iter-3 Identity audit P2 — `.mi-btn-sm` was 44px tall (just AA, below
   AAA 48px). Bumped to 48px so primary CTAs like "Add Passport (Scan)"
   pass WCAG 2.5.5 AAA. The visual size stays compact via padding +
   font-size; the touch box hits 48px via min-height. */

.mi-btn-sm {
  padding: 6px 12px;
  font-size: 0.75rem;
  border-radius: 6px;
  min-height: 48px;
  line-height: 1.2;
}

.mi-btn-accept {
  background: color-mix(in oklch, var(--success-500) 10%, transparent);
  color: var(--success-500);
  border-color: color-mix(in oklch, var(--success-500) 25%, transparent);
}

.mi-btn-reject {
  background: color-mix(in oklch, var(--error-500) 10%, transparent);
  color: var(--error-500);
  border-color: color-mix(in oklch, var(--error-500) 25%, transparent);
}

.mi-btn-outline {
  border: 1px solid var(--brand-500);
  color: var(--brand-500);
  background: transparent;
}

.mi-btn-outline:hover {
  background: var(--brand-glow);
}

.mi-btn-danger {
  color: var(--error-500);
  border-color: color-mix(in oklch, var(--error-500) 35%, transparent);
  background: transparent;
}

.mi-btn-danger:hover {
  background: color-mix(in oklch, var(--error-500) 8%, transparent);
  border-color: var(--error-500);
}

.mi-btn-danger:focus-visible {
  outline: 2px solid var(--error-500);
  outline-offset: 2px;
}

/* Alerts */

.mi-alert {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.mi-alert-warn {
  background: rgba(245, 158, 11, .08);
  border: 1px solid rgba(245, 158, 11, .2);
  color: var(--text-default);
}

.mi-alert-brand {
  background: var(--brand-glow);
  border: 1px solid rgba(91, 33, 182, .15);
  color: var(--text-default);
}

.mi-alert-info {
  background: rgba(59, 130, 246, .08);
  border: 1px solid rgba(59, 130, 246, .2);
  color: var(--text-default);
}

.mi-alert-success {
  background: rgba(34, 197, 94, .08);
  border: 1px solid rgba(34, 197, 94, .2);
  color: var(--text-default);
}

.mi-alert .mi-alert-close {
  margin-left: auto;
  cursor: pointer;
  opacity: .5;
  font-size: 14px;
}

.mi-alert .mi-alert-close:hover {
  opacity: 1;
}

/* Score bar */

.mi-score-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--border-default);
  overflow: hidden;
}

.mi-score-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
  transition: width 1s;
}

/* Masked */

.mi-masked {
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}

/* Privacy icon */

/* Work UX audit 2026-05-14 P1 — 32×32 was below WCAG 2.5.5 AA (44px).
   Bumped to 44×44 to clear AA on touch; AAA-relevant (48px) deferred
   as a per-section polish until founder validates the visual density. */

.mi-priv {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
}

.mi-priv:hover {
  background: var(--surface-overlay);
  border-color: var(--border-subtle);
}

.mi-priv:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* Icon button — WCAG 2.5.5 AAA target size (48x48 minimum). Inner glyph
   stays visually compact via font-size; the touch/click region is the
   full button box so a 95-year-old or motor-impaired user can hit it. */

.mi-ibtn {
  min-width: 48px;
  min-height: 48px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  padding: 0 6px;
}

.mi-ibtn:hover {
  background: var(--brand-glow);
  color: var(--brand-500);
  border-color: var(--brand-500);
}

/* ── MyInfo Page Layout ── */

.mi-layout {
  display: flex;
  gap: 0;
  height: calc(100vh - 152px);
  overflow: hidden;
}

/* ─── Pending review inbox (P0 #1, Phase 6) ─────────────────────────────────
   Always-visible panel surfacing OCR proposals. Rendered above .mi-layout
   so it's the first thing the user sees when proposals exist, regardless
   of onboarding state. Uses the warm-paper background from the design
   system; works in both light and dark mode.
*/

.mi-pending-inbox {
  margin: 0.75rem 1rem 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface-raised, #fffbf2);
  border: 1px solid var(--border-strong, #e0c98c);
  border-left: 4px solid var(--brand-500);
  border-radius: 0.625rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mi-pending-inbox-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.mi-pending-inbox-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-emphasis, #1f1d1a);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.mi-pending-inbox-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--brand-500);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
}

.mi-pending-inbox-desc {
  font-size: 0.875rem;
  color: var(--text-muted, #6b665e);
  margin: 0;
  line-height: 1.5;
}

.mi-pending-inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mi-pending-inbox-item {
  padding: 0;
}

/* Bump touch targets to 48px AAA on the accept/reject controls so
   age-mode senior + elder personas can tap them comfortably. */

.mi-pending-inbox .mi-btn-accept,
.mi-pending-inbox .mi-btn-reject {
  min-height: 48px;
  min-width: 48px;
  padding: 0 0.875rem;
}

@media (prefers-color-scheme: dark) {
  .mi-pending-inbox {
    background: var(--surface-raised-dark, #2a2722);
    border-color: var(--border-strong-dark, #5a4a32);
  }
}

/* Category sidebar nav */

.mi-nav {
  width: 220px;
  border-right: 1px solid var(--border-subtle);
  padding: 8px 0;
  overflow-y: auto;
  flex-shrink: 0;
}

.mi-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all .15s;
}

.mi-nav-item:hover {
  background: var(--border-subtle);
  color: var(--text-default);
}

.mi-nav-item.mi-active {
  color: var(--brand-500);
  border-left-color: var(--brand-500);
  background: var(--brand-glow);
  font-weight: 600;
}

.mi-nav-icon {
  width: 20px;
  text-align: center;
  font-size: 14px;
}

.mi-nav-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

.mi-nav-alert {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warning-500);
  margin-left: 4px;
  flex-shrink: 0;
}

/* Detail panel */

.mi-detail {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  max-width: 780px;
}

.mi-cat {
  display: none;
}

.mi-cat.mi-show {
  display: block;
}

/* ── Section header (eyebrow + Fraunces title + subtitle) ──
   Visual audit 2026-05-13 §1 — section title is the editorial moment
   for every detail panel; locked direction wants Fraunces italic. */

.mi-page-header {
  margin-bottom: 16px;
}

.mi-page-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  /* 11px */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: block;
}

.mi-page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.mi-page-title {
  font-family: 'Fraunces', 'Inter var', 'Inter', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.625rem;
  /* 26px */
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-emphasis);
  margin: 0;
  font-feature-settings: 'ss01';
}

.mi-page-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}

/* ── Summary Row ── */

/* Work QA D-W10 (2026-05-14) — the row was a `<div role="button">` with
   inline `<button>` children (copy, mask, privacy). That nested-
   interactive violated WCAG 4.1.3 + screen-reader focus order. The
   row is now a passive flex container; the clickable affordance is
   a real `<button class="mi-sr-toggle">` containing only the
   dot+label+value triplet, and copy/mask/privacy/chevron live as
   siblings inside `.mi-sr-meta`. `.mi-sr` keeps the visual frame +
   hover background only. */

.mi-sr {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Vertical-only padding — horizontal comes from .mi-card-body so rows
     align with sibling Path C components (.eml-row-lv, .hl-row, etc.). */
  padding: 0;
  /* Wave 3 (2026-05-13): inner row border softened so card edge frames the
     rows instead of competing — was `1px solid var(--border-subtle)` which
     equalled the card outer border. Reads as one rule per row instead of
     two adjacent hairlines. */
  border-bottom: 1px solid color-mix(in oklch, var(--text-muted) 12%, transparent);
  font-size: 0.8125rem;
  transition: background 120ms cubic-bezier(.2,0,0,1);
}

.mi-sr:last-child {
  border-bottom: none;
}

/* Wave 3: hover background switches to `--surface-overlay` so it sits one
   shade lighter than the card border — was `--border-subtle` which equalled
   the card outer border and read as a collapsing outline. */

.mi-sr:hover {
  background: var(--surface-overlay);
}

.mi-sr-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px 0;
  font: inherit;
  color: inherit;
  text-align: start;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* Housing UX audit 2026-05-14 H-P0-row-target — `.mi-sr { min-height: 48 }`
     applies to the row container but the inner `<button>` collapsed to its
     content height (44px on row labels). Lifting the button to 48px floors
     the actual focusable+tappable target at WCAG 2.5.5 AAA across every
     section that uses the Wave-3 generic row. */
  min-height: 48px;
}

/* Wave 3 + Work D-W10 — focus-visible moves from `.mi-sr` to the inner
   real `<button>` because the row itself no longer takes focus. WCAG 2.4.7
   compliant when keyboard-tabbing through rows. */

.mi-sr-toggle:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: -1px;
  background: color-mix(in oklch, var(--brand-500) 4%, transparent);
}

/* Minimum 48px row height — pre-fix non-sensitive rows came in at 44px
   (AA), sensitive rows at 69px (mask button pushed them). With the mask
   button now gated on `is_sensitive AND value`, both states align at 48px
   AAA when the button is hidden — explicit min-height guarantees that
   floor for non-sensitive rows too. */

.mi-sr {
  min-height: 48px;
}

/* Canonical lead-column — the dot keeps its 8x8 visual; the margin-end
   absorbs the rest so downstream label/value columns align with
   .eml-row-lv (star 18 + 4 trailing space) and .soc-row (icon 20 + 4
   trailing space). The EC avatar is intentionally larger and remains a
   wider lead column (it's a portrait, not a glyph). Visual audit
   2026-05-13 § Alignment audit. */

.mi-sr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-inline-end: 20px;
}

.mi-dot-g {
  background: var(--success-500);
}

.mi-dot-e {
  border: 1.5px solid var(--text-muted);
  background: transparent;
}

.mi-dot-w {
  background: var(--warning-500);
}

.mi-dot-p {
  background: var(--brand-500);
  box-shadow: 0 0 6px var(--brand-glow);
}

.mi-dot-r {
  background: var(--error-500);
}

/* Wave 3 (2026-05-13): label promoted to eyebrow style so it visually
   separates from empty "—" value. Was 0.75rem regular weight, same hue
   as the empty value — label + empty read as one sentence.  */

/* Work visual audit 2026-05-14 P0 #2 — `.mi-sr-label` had only
   `min-width: 132px` with no `max-width`, so long labels like
   "Professional certifications" (188.7px) pushed the value column
   right by up to 57px and produced a saw-tooth value-x register
   across the panel. Locking both min and max clamps the column;
   `text-overflow: ellipsis` keeps overflow graceful.

   Cross-section sweep 2026-05-14 — 132px was sized for Primary's
   short identity labels (FIRST NAME, DOB, GENDER, NATIONALITY all
   under 12 chars) and never re-validated against the data-class
   vocabulary that landed in Identity (EMERGENCY HEALTH NOTE),
   Housing (VEHICLE INSURANCE POLICY), Finance (ROUTING NO. LAST 4),
   Legal (KNOWN TRAVELLER NUMBER, PENDING LEGAL CASES, FREQUENT
   FLYER NUMBER), and Digital (PRIMARY EMAIL PROVIDER,
   COMMUNICATION PREFERENCES, 2FA ENABLED ON KEY ACCOUNTS). At
   11px / 600 / 0.04em-tracking uppercase, 18+ characters silently
   truncate. Bumping to 144px (+12px ≈ +9%) fits every flagged
   label across the audit set without disturbing Primary's
   compact-label rhythm — the value column shifts right by exactly
   12px and re-establishes the saw-tooth-free vertical register. */

.mi-sr-label {
  color: var(--text-muted);
  min-width: 144px;
  max-width: 144px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mi-sr-value {
  flex: 1;
  color: var(--text-emphasis);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.mi-sr-value.mi-empty {
  color: var(--text-muted);
  font-weight: 400;
  font-style: normal;
}

.mi-sr-value .mi-sep {
  color: var(--text-muted);
  margin: 0 5px;
  font-weight: 400;
}

/* Finance Visual audit 2026-05-14 P0 #1, #2, #3 — semantic value
   modifiers so masked PII, currency, and signed gain/loss values
   carry the right typographic + chromatic weight. Wave-3 brand
   contract says JetBrains Mono "for data + metadata + IDs"; these
   modifiers wire that contract through to populated finance values
   instead of leaving every cell as Inter 13/500 black.

   --masked  — masked PII (•••• 4521, NWM-2024-•••• 8821). Mono
              + tabular-nums fixes the U+2022 BULLET / digit advance-
              width mismatch that caused column jitter in Inter.
   --amount  — currency amounts ($12,847.31). Mono + heavier weight
              makes dollar figures scannable distinct from brand
              names rendered in the same row.
   --id      — alphanumeric IDs (policy #, account #). Mono so
              dashes + digits hold the same baseline.
   --gain / --loss — signed directionality (+12.4% / -$2,341.10).
              Tokens (--success-500 / --error-500), NOT hardcoded
              hex — populated probes were inline-styling raw hex,
              bypassing the token system. */

.mi-sr-value--masked,
.mi-sr-value--id {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.mi-sr-value--amount {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

.mi-sr-value--gain {
  color: var(--success-500);
}

.mi-sr-value--loss {
  color: var(--error-500);
}

.mi-sr-value--neutral {
  color: var(--text-emphasis);
}

/* Finance tab-list ARIA roles, system-wide. The horizontal nav rail
   now carries `role="tablist"` on the inner div + `role="tabpanel"`
   on each section panel — axe-core `aria-required-parent` critical
   violation (12 nodes across all sections) closed by the structural
   change. No layout impact; existing `.mi-nav` flex still owns
   spacing and overflow. */

.mi-nav-tablist {
  display: contents;
}

.mi-sr-subtitle {
  color: var(--text-muted);
  margin-inline-start: 6px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Wave 3 (2026-05-13): global 36×36 floor — copy button was 28×24, below
   the WCAG 2.5.8 minimum-target practical floor for inline actions.  */

/* Work UX audit 2026-05-14 P1 — copy button bumped 36 → 44px to clear
   WCAG 2.5.5 AA. Now sits in `.mi-sr-meta` alongside chevron/mask/
   privacy (sibling, not nested) — see `.mi-sr` block for the
   nested-interactive fix. */

.mi-copy-btn {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  cursor: pointer;
  padding: 4px 6px;
  margin-left: 0;
  border-radius: 6px;
  color: var(--text-muted);
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
}

.mi-copy-btn:hover {
  border-color: var(--brand-500);
  color: var(--brand-500);
  background: var(--brand-glow);
}

.mi-sr-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Wave 3 (2026-05-13): chevron renders as inline SVG (Lucide `chevron-right`
   shape, 12×12, stroke-width 2) for OS-consistent rendering. Unicode `▶`
   anti-aliases differently on macOS / Windows / Linux. */

.mi-sr-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: transform 180ms cubic-bezier(.2,0,0,1);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.mi-sr-chevron svg {
  width: 12px;
  height: 12px;
}

.mi-sr.mi-open .mi-sr-chevron {
  transform: rotate(90deg);
}

/* Document link */

.mi-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--info-500);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(59, 130, 246, .06);
  border: 1px solid rgba(59, 130, 246, .12);
  white-space: nowrap;
}

.mi-doc-link:hover {
  background: rgba(59, 130, 246, .12);
}

/* Upload inline */

.mi-upload-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--success-500);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(34, 197, 94, .06);
  border: 1px solid rgba(34, 197, 94, .12);
  white-space: nowrap;
}

.mi-upload-link:hover {
  background: rgba(34, 197, 94, .12);
}

/* ── Expand Panel ── */

.mi-sr-expand {
  display: none;
  padding: 12px 16px 14px 36px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  animation: mi-slideD .15s ease;
}

.mi-sr.mi-open + .mi-sr-expand {
  display: block;
}

/* Wave 3 (2026-05-13): inline add/edit forms in Path C live_components
   (EmailList, AddressCards, EmergencyContacts, SocialAccounts) reuse the
   `.mi-sr-expand` shell but are NOT adjacent to a `.mi-sr.mi-open` row,
   so the inherited `display:none` hid them. These modifier classes opt
   them back into visibility. */

.mi-sr-expand.eml-add-form,
.mi-sr-expand.eml-edit-form,
.mi-sr-expand.ec-edit-form {
  display: block;
}

@keyframes mi-slideD {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Edit grid */

.mi-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-bottom: 10px;
}

.mi-edit-field label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 2px;
  font-weight: 500;
}

.mi-edit-field input,
.mi-edit-field select,
.mi-edit-field textarea {
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: var(--surface-base);
  color: var(--text-default);
  outline: none;
  font-family: inherit;
}

.mi-edit-field input:focus,
.mi-edit-field select:focus,
.mi-edit-field textarea:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-glow);
}

.mi-edit-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}

/* Version history */

.mi-ver-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-default);
}

.mi-ver-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.mi-ver-title:hover {
  color: var(--text-default);
}

.mi-ver-list {
  padding: 0;
}

.mi-ver-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}

.mi-ver-item:last-child {
  border-bottom: none;
}

.mi-ver-item .mi-v-num {
  min-width: 32px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-500);
}

.mi-ver-item .mi-v-date {
  min-width: 130px;
  font-size: 11px;
  flex-shrink: 0;
}

.mi-ver-item .mi-v-val {
  flex: 1;
  color: var(--text-default);
}

.mi-ver-item .mi-v-source {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--border-subtle);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.mi-ver-item .mi-v-doc {
  font-size: 10px;
  color: var(--info-500);
  cursor: pointer;
}

/* Upload dropzone */

.mi-upload-zone {
  border: 2px dashed var(--border-default);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
  margin-top: 8px;
}

.mi-upload-zone:hover {
  border-color: var(--brand-500);
  background: var(--brand-glow);
  color: var(--brand-500);
}

/* Audit timestamp line */

.mi-audit-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
  padding: 4px 0;
  margin-top: 6px;
  border-top: 1px solid var(--border-subtle);
}

/* ── OCR Suggestion Row ── */

.mi-ocr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  background: rgba(91, 33, 182, .04);
  border-left: 3px solid var(--brand-500);
}

.mi-ocr-row .mi-ocr-conf {
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-500);
}

.mi-ocr-row .mi-ocr-label {
  color: var(--text-muted);
  min-width: 110px;
  font-size: 0.75rem;
}

.mi-ocr-row .mi-ocr-value {
  flex: 1;
  color: var(--text-emphasis);
  font-weight: 500;
}

.mi-ocr-actions {
  display: flex;
  gap: 4px;
}

/* ── Nudge Banner ── */

.mi-nudge {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
}

.mi-nudge-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.mi-nudge-text {
  flex: 1;
}

.mi-nudge-text strong {
  color: var(--text-emphasis);
}

.mi-nudge-cta {
  font-size: 11px;
  color: var(--brand-500);
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--brand-500);
}

.mi-nudge-cta:hover {
  background: var(--brand-glow);
}

.mi-nudge-dismiss {
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  opacity: .5;
}

.mi-nudge-dismiss:hover {
  opacity: 1;
}

/* ── Family Member Card ── */

.mi-fam-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background .1s;
}

.mi-fam-card:hover {
  background: var(--border-subtle);
}

.mi-fam-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.mi-fam-info {
  flex: 1;
}

.mi-fam-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-emphasis);
}

.mi-fam-role {
  font-size: 11px;
  color: var(--text-muted);
}

.mi-fam-actions {
  display: flex;
  gap: 4px;
}

/* ── Onboarding Overlay ── */

.mi-onboard-overlay {
  position: fixed;
  inset: 0;
  background: var(--surface-base);
  z-index: 500;
  display: none;
  overflow-y: auto;
}

.mi-onboard-overlay.mi-ob-show {
  display: block;
}

.mi-ob-container {
  max-width: 580px;
  margin: 0 auto;
  padding: 32px 20px;
}

.mi-ob-header {
  text-align: center;
  margin-bottom: 28px;
}

.mi-ob-logo {
  font-size: 28px;
  font-weight: 800;
  color: var(--brand-500);
  margin-bottom: 8px;
}

.mi-ob-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-emphasis);
  margin-bottom: 4px;
}

.mi-ob-subtitle {
  font-size: 14px;
  color: var(--text-muted);
}

.mi-ob-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}

.mi-ob-step {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border-default);
  transition: background .3s;
}

.mi-ob-step.mi-ob-done {
  background: var(--brand-500);
}

.mi-ob-step.mi-ob-current {
  background: var(--brand-400);
}

.mi-ob-panel {
  display: none;
}

.mi-ob-panel.mi-ob-active {
  display: block;
}

.mi-ob-field {
  margin-bottom: 14px;
}

.mi-ob-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.mi-ob-field input,
.mi-ob-field select {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: var(--surface-base);
  color: var(--text-default);
  outline: none;
}

.mi-ob-field input:focus,
.mi-ob-field select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.mi-ob-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mi-ob-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

.mi-ob-nav {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-top: 20px;
}

.mi-ob-skip {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
}

.mi-ob-connector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mi-ob-conn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
}

.mi-ob-conn:hover {
  border-color: var(--brand-500);
}

.mi-ob-conn.mi-ob-linked {
  border-color: var(--success-500);
  background: rgba(34, 197, 94, .04);
}

.mi-ob-conn-icon {
  font-size: 22px;
  width: 36px;
  text-align: center;
}

.mi-ob-conn-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-emphasis);
}

.mi-ob-conn-status {
  font-size: 10px;
  color: var(--text-muted);
}

.mi-ob-conn.mi-ob-linked .mi-ob-conn-status {
  color: var(--success-500);
}

.mi-ob-age-card {
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all .15s;
}

.mi-ob-age-card:hover {
  border-color: var(--brand-500);
  background: var(--brand-glow);
}

.mi-ob-age-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-emphasis);
  margin-bottom: 4px;
}

.mi-ob-age-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.mi-ob-age-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

/* ── Requests & Sharing (enhanced) ── */

.mi-rs-layout {
  padding: 20px;
  max-width: 820px;
  margin: 0 auto;
}

.mi-rs-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
}

.mi-rs-tab {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
}

.mi-rs-tab:hover {
  background: var(--border-subtle);
}

.mi-rs-tab.mi-rs-active {
  color: var(--brand-500);
  background: var(--brand-glow);
  font-weight: 600;
}

/* Request card */

.mi-req-card {
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--glass-bg);
}

.mi-req-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
}

.mi-req-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mi-req-from {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-emphasis);
}

.mi-req-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

.mi-req-card-body {
  padding: 14px 16px;
  display: none;
}

.mi-req-card.mi-req-open .mi-req-card-body {
  display: block;
}

.mi-req-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.mi-req-field-row:last-child {
  border-bottom: none;
}

.mi-req-field-name {
  flex: 1;
  color: var(--text-default);
}

/* Version picker */

.mi-ver-picker {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.mi-ver-option {
  padding: 2px 8px;
  font-size: 10px;
  border-radius: 4px;
  border: 1px solid var(--border-default);
  cursor: pointer;
  font-family: 'Courier New', monospace;
  color: var(--text-muted);
}

.mi-ver-option:hover {
  border-color: var(--brand-500);
  color: var(--brand-500);
}

.mi-ver-option.mi-vp-selected {
  background: var(--brand-500);
  color: var(--text-inverse);
  border-color: var(--brand-500);
}

/* Transaction history row */

.mi-tx-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.mi-tx-row:last-child {
  border-bottom: none;
}

.mi-tx-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.mi-tx-desc {
  flex: 1;
  color: var(--text-default);
}

.mi-tx-time {
  font-size: 10px;
  color: var(--text-muted);
  min-width: 130px;
  text-align: right;
}

.mi-tx-status {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}

/* Share template card */

.mi-share-tpl {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .1s;
  border: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}

.mi-share-tpl:hover {
  background: var(--border-subtle);
  border-color: var(--brand-500);
}

.mi-share-emoji {
  font-size: 24px;
  width: 40px;
  text-align: center;
}

/* ── Modals ── */

.mi-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
}

.mi-modal-overlay.mi-modal-open {
  display: flex;
}

.mi-modal {
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 540px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
}

.mi-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mi-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-emphasis);
  margin-bottom: 16px;
}

/* ── Toast + FAB ── */

.mi-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 13px;
  color: var(--text-emphasis);
  z-index: 400;
  opacity: 0;
  transition: all .3s;
  pointer-events: none;
}

.mi-toast.mi-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Work visual audit 2026-05-14 P0 #1 — `.mi-fab` carried the only
   `box-shadow` on the no-shadow contract panel and was the loudest red
   pixel on Work. The saturated red shadow is dropped (flat red disc is
   plenty attention-getting). Mobile `bottom` is bumped to 80px to
   clear the bottom-nav strip at <=768px (P1 mobile collision). */

.mi-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--error-500);
  color: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms cubic-bezier(.2,0,0,1);
}

.mi-fab:hover {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .mi-fab {
    bottom: 80px;
  }
}

/* Overview grid */

.mi-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.mi-overview-cat {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--glass-bg);
  cursor: pointer;
  transition: all .15s;
}

.mi-overview-cat:hover {
  border-color: var(--brand-500);
  background: var(--brand-glow);
}

.mi-overview-cat-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-emphasis);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mi-overview-cat-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Quick actions */

.mi-quick-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Recent activity */

.mi-activity-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.mi-activity-item:last-child {
  border-bottom: none;
}

.mi-activity-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.mi-activity-text {
  flex: 1;
  color: var(--text-default);
}

.mi-activity-time {
  font-size: 10px;
  color: var(--text-muted);
}

/* ── Date Input ── */

.mi-date-input-wrapper {
  position: relative;
  width: 100%;
}

.mi-date-input-group {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-default);
  overflow: hidden;
  transition: border-color 0.15s;
}

.mi-date-input-group:focus-within {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.mi-date-text {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-default);
  font-family: inherit;
  letter-spacing: 0.5px;
}

.mi-date-text::-moz-placeholder {
  color: var(--text-muted);
  font-size: 12px;
}

.mi-date-text::placeholder {
  color: var(--text-muted);
  font-size: 12px;
}

.mi-date-text.mi-date-valid {
  color: var(--success-600);
}

.mi-date-text.mi-date-invalid {
  color: var(--error-500);
}

.mi-date-picker-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 10px;
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.mi-date-picker-btn:hover {
  opacity: 1;
}

.mi-date-native {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  top: 0;
  left: 0;
}

.mi-date-hint {
  display: none;
  font-size: 10px;
  color: var(--text-muted);
  padding: 3px 4px 0;
  letter-spacing: 0.3px;
}

.mi-date-error {
  font-size: 11px;
  color: var(--error-500);
  padding: 3px 4px 0;
  font-weight: 500;
}

/* ── Typeahead Select ── */

.mi-ta-wrapper {
  position: relative;
  width: 100%;
}

.mi-ta-input-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-default);
  overflow: hidden;
  transition: border-color 0.15s;
}

.mi-ta-input-group:focus-within {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.mi-ta-text {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-default);
}

.mi-ta-text::-moz-placeholder {
  color: var(--text-muted);
}

.mi-ta-text::placeholder {
  color: var(--text-muted);
}

.mi-ta-arrow {
  padding: 0 10px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.mi-ta-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  margin-top: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 240px;
  overflow-y: auto;
}

.mi-ta-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-default);
  transition: background 0.1s;
}

.mi-ta-item:hover, .mi-ta-highlight {
  background: var(--brand-50);
}

.mi-ta-active {
  font-weight: 600;
  color: var(--brand-600);
}

.mi-ta-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* ── Tag Input ── */

.mi-tag-wrapper {
  position: relative;
  width: 100%;
}

.mi-tag-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-default);
  padding: 4px 8px;
  min-height: 38px;
  transition: border-color 0.15s;
}

.mi-tag-container:focus-within {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.mi-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mi-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--brand-50);
  color: var(--brand-700);
  border: 1px solid var(--brand-200);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  animation: mi-tag-pop 0.15s ease;
}

@keyframes mi-tag-pop {
  from {
    transform: scale(0.8);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.mi-tag-label {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mi-tag-remove {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--brand-400);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  transition: color 0.1s;
}

.mi-tag-remove:hover {
  color: var(--error-500);
}

.mi-tag-text {
  flex: 1;
  min-width: 80px;
  border: none;
  outline: none;
  background: transparent;
  padding: 4px;
  font-size: 13px;
  color: var(--text-default);
}

.mi-tag-text::-moz-placeholder {
  color: var(--text-muted);
  font-size: 12px;
}

.mi-tag-text::placeholder {
  color: var(--text-muted);
  font-size: 12px;
}

.mi-tag-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  margin-top: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 200px;
  overflow-y: auto;
}

/* ── Field Search Bar ── */

.mi-search-wrap {
  padding: 12px 16px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.mi-search-input {
  width: 100%;
  max-width: 540px;
  height: 38px;
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 0 36px 0 36px;
  font-size: 13px;
  color: var(--text-default);
  outline: none;
}

.mi-search-input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-glow);
}

.mi-search-input::-moz-placeholder {
  color: var(--text-muted);
}

.mi-search-input::placeholder {
  color: var(--text-muted);
}

.mi-search-icon {
  position: absolute;
  left: 28px;
  top: 23px;
  font-size: 14px;
  color: var(--text-muted);
  pointer-events: none;
  line-height: 1;
}

.mi-search-clear {
  position: absolute;
  right: calc(100% - 16px - 540px + 10px);
  top: 20px;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.mi-search-clear:hover {
  color: var(--text-default);
}

.mi-suggestions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.mi-sug {
  /* WCAG 2.5.5 AAA: 48px minimum height for suggestion chips so
     touch users can target them without misclicks. Padding stays
     visually compact via flex centering. */
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  font-size: 13px;
  border-radius: 24px;
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
}

.mi-sug:hover {
  border-color: var(--brand-500);
  color: var(--brand-500);
  background: var(--brand-glow);
}

.mi-search-dropdown {
  position: absolute;
  top: 58px;
  left: 16px;
  width: calc(100% - 32px);
  max-width: 540px;
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 50;
  display: none;
  max-height: 360px;
  overflow-y: auto;
}

.mi-search-dropdown-open {
  display: block;
}

.mi-search-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
}

.mi-search-result:hover {
  background: var(--border-subtle);
}

.mi-search-result:last-child {
  border-bottom: none;
}

.mi-search-r-cat {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-overlay);
  color: var(--text-muted);
  flex-shrink: 0;
}

.mi-search-r-label {
  color: var(--text-emphasis);
  font-weight: 500;
  flex-shrink: 0;
}

.mi-search-r-val {
  color: var(--text-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: auto;
}

.mi-search-empty {
  padding: 14px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

/* ── Responsive ── */

@media (max-width: 768px) {
  .mi-nav {
    width: 0;
    display: none;
  }

  .mi-detail {
    padding: 12px;
  }

  .mi-edit-grid {
    grid-template-columns: 1fr;
  }

  .mi-ob-row {
    grid-template-columns: 1fr;
  }

  .mi-ob-connector-grid {
    grid-template-columns: 1fr;
  }

  .mi-search-clear {
    right: 28px;
  }

  .mi-doc-preview {
    width: 100vw;
    top: 0;
    height: 100vh;
  }
}

/* ── Document Preview Panel ─────────────────────────────────────── */

.mi-doc-preview {
  position: fixed;
  top: 52px;
  right: 0;
  width: 420px;
  height: calc(100vh - 52px);
  background: var(--surface-base);
  border-left: 1px solid var(--border-default);
  box-shadow: -8px 0 32px rgba(0,0,0,.08);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
}

.mi-doc-preview.mi-dp-open {
  transform: translateX(0);
}

.mi-dp-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: var(--surface-raised);
}

.mi-dp-close {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  border-radius: 6px;
}

.mi-dp-close:hover {
  background: var(--border-subtle);
  color: var(--text-default);
}

.mi-dp-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--surface-overlay);
}

.mi-dp-card {
  margin-bottom: 14px;
}

.mi-dp-row {
  display: flex;
  font-size: 11px;
  padding: 4px 0;
  font-family: 'SF Mono', Menlo, monospace;
}

.mi-dp-k {
  width: 90px;
  opacity: .7;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.mi-dp-v {
  flex: 1;
  font-weight: 700;
}

.mi-dp-info-card {
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
}

.mi-dp-info-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}

.mi-dp-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border-subtle);
}

.mi-dp-info-row:last-child {
  border-bottom: none;
}

.mi-dp-actions {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  flex-shrink: 0;
}

.mi-dp-act {
  flex: 1;
  font-size: 11px;
  padding: 7px 10px;
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-default);
  text-align: center;
}

.mi-dp-act:hover {
  border-color: var(--brand-500);
  color: var(--brand-500);
}

/* ── Passport Card Component ─────────────────────────────── */

/* ── PassportCard ──
   Iter-3 Identity visual audit P0 sweep — replaces the hardcoded shadow +
   four hex badge shades + SF Mono divergence + Inter 800 country weight
   with tokens, JetBrains Mono, and the same weight ceiling (600) used by
   the section eyebrow + card-title rhythm. Keyboard focus ring uses the
   shared `var(--brand-500)` and same offset as `.mi-sr`. */

.pp-card-wrap {
  margin-bottom: 10px;
}

.pp-card {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-base);
  cursor: pointer;
  transition: border-color 120ms cubic-bezier(.2,0,0,1), background 120ms cubic-bezier(.2,0,0,1);
}

.pp-card:hover {
  border-color: var(--border-emphasis);
}

.pp-card:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 12px;
}

.pp-card.pp-open {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-glow);
}

.pp-card-row {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 12px 14px;
}

.pp-card.pp-open .pp-card-row {
  background: var(--brand-glow);
}

/* Thumb shadow replaced with an inner ring (Wave-2 no-shadow contract). */

.pp-thumb {
  width: 56px;
  height: 74px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  background: var(--surface-raised);
}

.pp-thumb-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.pp-thumb-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500, var(--brand-500)));
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pp-thumb-label {
  font-size: 0.4375rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.pp-thumb-code {
  font-size: 0.625rem;
  margin-top: 4px;
  font-weight: 600;
}

.pp-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 0;
}

.pp-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Country weight 800 → 600 — was heavier than the Fraunces section title. */

.pp-country {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-emphasis);
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.pp-badge {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.pp-badge-green {
  color: var(--success-500);
  background: color-mix(in oklch, var(--success-500) 10%, transparent);
}

.pp-badge-amber {
  color: var(--warning-500);
  background: color-mix(in oklch, var(--warning-500) 10%, transparent);
}

.pp-badge-red {
  color: var(--error-500);
  background: color-mix(in oklch, var(--error-500) 10%, transparent);
}

.pp-badge-grey {
  color: var(--text-muted);
  background: var(--border-subtle);
}

.pp-badge-ver {
  color: var(--brand-500);
  background: var(--brand-glow);
}

.pp-grid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 3px 10px;
  font-size: 0.6875rem;
  margin-top: 6px;
}

.pp-grid-k {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.pp-grid-v {
  color: var(--text-emphasis);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pp-mono {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.pp-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-counts {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 7px;
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.pp-counts strong {
  color: var(--text-emphasis);
  font-weight: 600;
}

.pp-chevron {
  margin-left: auto;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.6875rem;
}

.pp-expand {
  border-top: 1px solid var(--border-subtle);
}

.pp-tabs {
  display: flex;
  gap: 0;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.pp-tab {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  min-height: 36px;
}

.pp-tab:hover {
  color: var(--text-emphasis);
}

.pp-tab:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: -2px;
}

.pp-tab-active {
  color: var(--brand-500);
  border-bottom-color: var(--brand-500);
}

.pp-tab-content {
  padding: 14px;
}

.pp-info-grid {
  display: flex;
  flex-direction: column;
}

.pp-info-row {
  display: flex;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border-subtle);
  font-size: 0.75rem;
  gap: 8px;
}

.pp-info-row:last-child {
  border-bottom: none;
}

.pp-info-k {
  width: 100px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 0.625rem;
  padding-top: 2px;
  flex-shrink: 0;
}

.pp-info-v {
  flex: 1;
  color: var(--text-emphasis);
  font-weight: 500;
  word-break: break-word;
}

.pp-info-reveal {
  font-size: 0.6875rem;
  font-weight: 600;
  min-width: 56px;
  min-height: 32px;
  padding: 4px 10px;
  flex-shrink: 0;
}

.pp-visa-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}

.pp-visa-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.pp-visa-country {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-emphasis);
}

.pp-visa-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.pp-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
}

@media (max-width: 640px) {
  .pp-thumb {
    width: 44px;
    height: 58px;
  }

  .pp-grid {
    grid-template-columns: auto 1fr;
  }
}

/* ── Health Rows (Wave-3 alignment, 2026-05-14 Health audit) ───────────────
   `.hl-row` was the only section in MyRecords still on pre-Wave-3
   geometry (12px / 700 / dark labels, 9px padding, no min-height,
   hardcoded hex severity chips). Bring it in line with `.mi-sr`:
   eyebrow-style label (11px / 500 / muted / uppercase), 13px value with
   tabular-nums, min-height 48px (WCAG 2.5.5 AA), warm-grey hover, and
   tokenised severity chips paired with semantic icons (color-blindness
   safe per WCAG 1.4.1). */

.hl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0;
  min-height: 48px;
  border-bottom: 1px solid color-mix(in oklch, var(--text-muted) 12%, transparent);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 120ms cubic-bezier(.2,0,0,1);
}

.hl-row:last-child {
  border-bottom: none;
}

.hl-row:hover {
  background: var(--surface-overlay);
}

.hl-row.hl-readonly {
  cursor: default;
}

.hl-row:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: -2px;
  border-radius: 4px;
}

.hl-icon {
  font-size: 0.875rem;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.hl-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 110px;
}

.hl-value {
  flex: 1;
  color: var(--text-emphasis);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.hl-meta {
  font-size: 0.6875rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.hl-empty-val {
  flex: 1;
  color: var(--text-muted);
  font-style: normal;
}

.hl-chevron {
  color: var(--text-muted);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* Meta column inside a populated row — copy + audit + mask buttons. */

.hl-meta-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-inline-start: auto;
}

/* Audit-trail button — small monochrome ghost. Hit area 32×32 for AA. */

.hl-audit-link {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.875rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.hl-audit-link:hover {
  background: var(--surface-overlay);
  color: var(--text-emphasis);
}

.hl-audit-link:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
}

/* Emergency-card visibility chip — pairs the 🚨 emoji with the "EC" text
   label so the affordance is readable in monochrome (color independence)
   and announceable to screen readers via aria-label. */

.hl-eve {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--warning-500) 10%, transparent);
  color: var(--warning-600, var(--warning-500));
  flex-shrink: 0;
}

/* Severity chips — Wave-3 token-clean. Each chip pairs colour with a
   glyph (●/◐/○) and an icon column row-prefix (⛔/⚠/ℹ) so colour-blind
   users get the same signal as sighted users (WCAG 1.4.1). */

.hl-severity {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hl-sev-severe {
  color: var(--error-600, var(--error-500));
  background: color-mix(in oklch, var(--error-500) 10%, transparent);
}

.hl-sev-moderate {
  color: var(--warning-600, var(--warning-500));
  background: color-mix(in oklch, var(--warning-500) 10%, transparent);
}

.hl-sev-mild {
  color: var(--success-600, var(--success-500));
  background: color-mix(in oklch, var(--success-500) 10%, transparent);
}

.hl-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8125rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hl-empty-cta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* HIPAA disclosure banner on Health section. */

.hl-hipaa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: color-mix(in oklch, var(--brand-500) 6%, transparent);
  border: 1px solid color-mix(in oklch, var(--brand-500) 20%, transparent);
  border-radius: 8px;
  color: var(--text-emphasis);
  font-size: 0.8125rem;
}

.hl-hipaa-icon {
  font-size: 1rem;
  line-height: 1.5;
  flex-shrink: 0;
}

.hl-hipaa-body {
  line-height: 1.5;
}

.hl-hipaa-link {
  color: var(--brand-500);
  text-decoration: underline;
}

/* Quick-add row. Removes the inline `style="..."` sprawl that the visual
   audit flagged as a locked-direction violation. */

.hl-quick-add {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hl-quick-btn {
  color: var(--brand-500);
  border-color: var(--brand-500);
}

/* Health card spacing — replaces the per-card `style="margin-bottom:12px"`. */

.hl-card {
  margin-bottom: 12px;
}

/* + Add affordance inside a card body. */

.hl-card-action {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  font-size: 0.75rem;
}

/* Card-header right-side count meta. */

.hl-card-meta {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Edit-form scaffold: replaces the inline `style="border:2px solid …"`. */

.hl-edit-card {
  margin-top: 12px;
  border: 2px solid var(--brand-500);
}

.hl-edit-error {
  color: var(--error-500);
}

.hl-edit-note,
.hl-edit-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
}

.hl-edit-note strong {
  color: var(--text-emphasis);
}

/* Elder-mode font scaling for health rows — `age-elder` body class
   bumps base font on health rows for 80–100 demographic. */

.age-elder .hl-row {
  font-size: 0.9375rem;
  min-height: 56px;
}

.age-elder .hl-label {
  font-size: 0.8125rem;
}

/* ── Address Cards ─────────────────────────────────────── */

/* Housing QA audit 2026-05-14 P0-H7 / D-Ho6 — `.addr-row` is now a plain
   `<div>` (no `role="button"`) wrapping a real `<button class="addr-row-toggle">`
   plus a sibling copy `<button>`. Layout becomes flex so the toggle takes
   the leading space and copy sits at the trailing edge. */

.addr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  padding-inline-start: 28px;
  border-bottom: 1px solid color-mix(in oklch, var(--text-muted) 12%, transparent);
  transition: background 120ms cubic-bezier(.2,0,0,1);
}

.addr-row:last-of-type {
  border-bottom: none;
}

.addr-row:hover {
  background: var(--surface-overlay);
}

/* The toggle button strips default `<button>` chrome so the row keeps its
   prior visual treatment, while gaining real button keyboard semantics
   (Enter/Space invoke without phx-keydown wiring). `min-height: 48px`
   matches the WCAG 2.5.5 AAA target the rest of the section uses. */

.addr-row-toggle {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: start;
}

.addr-row-toggle:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: -1px;
  background: color-mix(in oklch, var(--brand-500) 4%, transparent);
}

.addr-copy-btn {
  flex: 0 0 auto;
}

/* Wave 3 (2026-05-13): past rows tagged via inline chip instead of opacity
   wash — `.addr-past` opacity:.55 dropped 11px muted text below 4.5:1
   contrast on light theme. Visual-audit P2. */

.addr-past {
  opacity: 1;
}

.addr-past .addr-text {
  color: var(--text-muted);
}

.addr-tag-past {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface-overlay);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.addr-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.addr-label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.addr-own, .addr-since, .addr-dur {
  font-size: 11px;
}

/* Was `display: flex` while `<div role="button">` wrapped the row. Now
   the addr-value is just the trailing text inside the toggle button —
   flex behaviour moved up to `.addr-row` so the sibling copy button
   lands cleanly. */

.addr-value {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-default);
}

.addr-text {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.addr-add-wrap {
  padding: 10px 0;
  border-top: 1px solid var(--border-subtle);
}

.addr-add-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.addr-past-toggle {
  background: transparent;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  font-size: 0.6875rem;
  color: var(--brand-500);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.addr-past-toggle:hover {
  color: var(--brand-600, var(--brand-500));
}

.addr-past-toggle:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.addr-past-toggle-icon {
  display: inline-flex;
  transition: transform 180ms cubic-bezier(.2,0,0,1);
}

.addr-past-toggle[aria-expanded="true"] .addr-past-toggle-icon {
  transform: rotate(90deg);
}

/* Shared button modifier used by every "+ Add" CTA in the Primary section.
   Replaces 4 inline-styled outlined-blue buttons. */

.mi-btn-add {
  color: var(--brand-500);
  border-color: color-mix(in oklch, var(--brand-500) 35%, transparent);
}

.mi-btn-add:hover {
  border-color: var(--brand-500);
  background: var(--brand-glow);
}

/* ── Emergency Contacts ──────────────────────────────── */

/* ── Emergency Contacts ──
   Visual audit 2026-05-13 (§ Field group 5 — P0): retired the saturated red
   #dc2626 banner. Red lives only on `.ec-primary-badge` (icon + chip) so the
   card communicates "important", not "alarming". Tokens replace all hex. */

.ec-card {
  overflow: hidden;
}

.ec-header {
  background: var(--surface-overlay);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ec-card-title {
  color: var(--text-emphasis);
}

.ec-icon {
  color: var(--error-500);
}

.ec-header-sub {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-left: auto;
}

/* Wave 3 (2026-05-13): center-align so the action column lives next to the
   contact name row, not floating top-right with empty space below. */

.ec-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
}

.ec-row:last-of-type {
  border-bottom: none;
}

.ec-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-overlay);
  color: var(--text-emphasis);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.ec-info {
  flex: 1;
  min-width: 0;
}

.ec-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.ec-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-emphasis);
}

.ec-primary-badge {
  font-size: 9px;
  font-weight: 800;
  color: var(--error-500);
  background: color-mix(in oklch, var(--error-500) 10%, transparent);
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Wave 3 (2026-05-13): neutralised the info-blue chip — previously
   `--info-500` text on light-blue bg collided with the new trust-blue
   primary accent on `.eml-primary` in the sibling Contact card. The
   relationship is metadata, not a status; muted neutral fits better. */

.ec-rel {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface-overlay);
  padding: 2px 7px;
  border-radius: 4px;
}

.ec-sharing {
  color: var(--text-muted);
}

.ec-edit-soon {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 8px;
}

.mi-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.ec-contact-line {
  font-size: 11px;
  color: var(--text-muted);
}

.ec-note {
  font-size: 11px;
  color: var(--text-default);
  font-style: italic;
  margin-top: 2px;
}

.ec-sharing {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.ec-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.ec-footer {
  padding: 10px 0;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ec-empty {
  padding: 18px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ec-edit-form {
  padding: 14px 16px;
  background: var(--surface-elevated);
  margin-top: 8px;
}

.ec-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 640px) {
  .ec-edit-grid {
    grid-template-columns: 1fr;
  }
}

/* Link-from-Contacts picker — inline below contact list, dialog semantics
   (keyboard-accessible button rows). */

.ec-picker {
  margin-top: 8px;
  padding: 12px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.ec-picker-head {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-emphasis);
  margin-bottom: 8px;
}

.ec-picker-empty {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ec-picker-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ec-picker-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-default);
  text-align: left;
}

.ec-picker-row:hover {
  border-color: var(--brand-500);
}

.ec-picker-name {
  font-weight: 600;
  font-size: 0.8125rem;
}

.ec-picker-rel {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.ec-picker-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

/* ── Email/Phone Multi-value List ────────────────────── */

.eml-row-lv {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--text-muted) 12%, transparent);
  font-size: 0.8125rem;
  min-height: 44px;
  cursor: pointer;
  transition: background 120ms cubic-bezier(.2,0,0,1);
  font-variant-numeric: tabular-nums;
}

.eml-row-lv:last-of-type {
  border-bottom: none;
}

.eml-row-lv:hover {
  background: var(--surface-overlay);
}

/* Lead column — canonical 28px so dot / star / avatar / platform-icon all
   align at the same x-position across .mi-sr, .eml-row-lv, .ec-row,
   .soc-row. Visual audit 2026-05-13 (§ Alignment audit). */

.eml-star-lv {
  color: var(--brand-500);
  font-size: 14px;
  min-width: 28px;
  flex: 0 0 28px;
  text-align: center;
}

.eml-spacer-lv {
  min-width: 28px;
  flex: 0 0 28px;
}

.eml-addr-lv {
  flex: 1;
  color: var(--text-default);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.eml-addr-lv.eml-primary {
  color: var(--brand-500);
  font-weight: 600;
}

.eml-tag-lv {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-overlay);
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

.eml-verified-lv {
  font-size: 10px;
  font-weight: 600;
  color: var(--success-500);
  background: color-mix(in oklch, var(--success-500) 10%, transparent);
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

/* Wave 3 (2026-05-13): bumped to WCAG 2.5.5 AA floor (44px). Was 32×32 —
   AA spec target for any standalone control. */

.eml-more-lv {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  padding: 0;
}

.eml-more-lv:hover {
  border-color: var(--brand-500);
  color: var(--brand-500);
}

.eml-more-lv:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* ── Row overflow menu (⋯ → dropdown) ──
   Wave 3 (2026-05-13) UX P1: `⋯` buttons were dead — clicking opened
   nothing. Now wired to a per-row dropdown with "Make primary / Copy /
   Edit / Remove" semantics. The menu sits absolute over the row trailing
   edge so it doesn't reflow. */

.eml-more-wrap {
  position: relative;
  flex-shrink: 0;
}

.row-menu {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  z-index: 50;
  min-width: 180px;
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 8px 24px -8px rgba(15,23,41,.18);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.row-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-height: 36px;
  background: transparent;
  border: none;
  color: var(--text-default);
  font-size: 0.8125rem;
  text-align: start;
  cursor: pointer;
  border-radius: 6px;
  width: 100%;
}

.row-menu-item:hover, .row-menu-item:focus-visible {
  background: var(--surface-overlay);
  outline: none;
}

.row-menu-item-danger {
  color: var(--error-500);
}

.row-menu-item-danger:hover {
  background: color-mix(in oklch, var(--error-500) 10%, transparent);
}

.row-menu-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 2px 0;
}

.eml-add-cta {
  padding: 8px 0 4px;
}

.hl-empty-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 0;
}

/* Wave 3 (2026-05-13): inline-style subhead block → class.
   Visual audit P1 — `style="font-size:10px;font-weight:700;..."` was
   authored twice and disrupted the card-body padding rhythm. */

.eml-subhead {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 0 4px;
}

.eml-subhead-bordered {
  padding: 12px 0 4px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 8px;
}

.eml-phone-fields {
  flex: 0 0 auto;
}

.eml-country-code {
  min-width: 140px;
}

.eml-edit-form {
  padding: 10px 16px;
  background: var(--surface-elevated);
}

.eml-edit-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.eml-edit-row label {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.mi-card-meta {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

/* ── Version Timeline ────────────────────────────────── */

.vt-wrap {
  padding: 12px 0;
}

.vt-header {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}

.vt-empty {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.vt-timeline {
  border-left: 2px solid var(--border-subtle);
  padding-left: 16px;
  margin-left: 8px;
}

.vt-entry {
  position: relative;
  padding-bottom: 14px;
}

.vt-entry:last-child {
  padding-bottom: 0;
}

.vt-bullet {
  position: absolute;
  left: -23px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface-overlay);
  border: 2px solid var(--border-default);
}

.vt-active .vt-bullet {
  background: var(--success-500);
  border-color: var(--success-500);
  box-shadow: 0 0 6px color-mix(in oklch, var(--success-500) 40%, transparent);
}

.vt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vt-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-overlay);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
}

.vt-active-tag {
  font-size: 9px;
  font-weight: 800;
  color: var(--success-500);
  background: color-mix(in oklch, var(--success-500) 10%, transparent);
  padding: 2px 7px;
  border-radius: 4px;
}

.vt-date {
  font-size: 10px;
  color: var(--text-muted);
}

.vt-source {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.vt-src-ocr {
  color: var(--brand-500);
  background: var(--brand-glow);
}

.vt-src-manual {
  color: #7c3aed;
  background: rgba(124,58,237,.1);
}

.vt-src-signup {
  color: #f59e0b;
  background: rgba(245,158,11,.1);
}

.vt-value {
  font-size: 12px;
  color: var(--text-default);
  margin-top: 4px;
}

.vt-restore {
  margin-top: 6px;
  font-size: 10px;
}

/* ── Verification Meter ──────────────────────────────── */

/* Legacy meter styles retained for any non-Primary callsites; the Primary
   panel now uses the .vm-pill compact form below. */

.vm-wrap {
  padding: 12px 18px;
  margin-bottom: 14px;
}

.vm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.vm-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-emphasis);
}

.vm-pct {
  font-size: 22px;
  font-weight: 800;
}

.vm-bar {
  height: 6px;
  background: var(--surface-overlay);
  border-radius: 3px;
  overflow: hidden;
}

.vm-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}

/* ── Verification pill (locked-direction compact form, 2026-05-13 visual audit P0)
   Sits inline with the section title; never red below 40 %. */

.vm-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.vm-pill-label {
  font-weight: 600;
  color: var(--text-default);
}

.vm-pill-bar {
  display: inline-block;
  width: 80px;
  height: 4px;
  background: color-mix(in oklch, var(--text-muted) 20%, transparent);
  border-radius: 2px;
  overflow: hidden;
}

.vm-pill-fill {
  display: block;
  height: 100%;
  background: var(--text-muted);
  border-radius: 2px;
  transition: width .3s ease;
}

.vm-pill-pct {
  font-weight: 700;
  color: var(--text-emphasis);
}

.vm-pill-detail {
  color: var(--text-muted);
}

.vm-pill-low .vm-pill-fill {
  background: color-mix(in oklch, var(--brand-500) 60%, transparent);
}

.vm-pill-mid .vm-pill-fill {
  background: var(--warning-500);
}

.vm-pill-high {
  color: var(--text-default);
}

.vm-pill-high .vm-pill-fill {
  background: var(--success-500);
}

.vm-pill-high .vm-pill-pct {
  color: var(--success-500);
}

@media (max-width: 640px) {
  .vm-pill-detail {
    display: none;
  }

  .vm-pill-bar {
    width: 60px;
  }
}

.vm-detail {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-muted);
}

.vm-sep {
  color: var(--border-default);
}

/* ── Name Editor Component ───────────────────────────── */

/* Removed `margin-bottom: 4px` 2026-05-13 verifier-pass — the residual
   margin stacked with `.mi-card-body { padding: 8px 16px }` and pushed
   the Name row to ~50px tall vs the 44px target shared with .mi-sr /
   .eml-row-lv / .soc-row. Setting to 0 brings Name row geometry into
   parity. */

.ne-wrap {
  margin-bottom: 0;
}

/* QA P0-1 (2026-05-13): align .ne-sr to the canonical .mi-sr row geometry so
   Name collapses into the same row baseline as Personal Details / Contact. */

.ne-sr {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Vertical-only padding — horizontal comes from .mi-card-body. */
  padding: 10px 0;
  /* Wave 3 (2026-05-13): match `.mi-sr` softer inner border + rem font. */
  border-bottom: 1px solid color-mix(in oklch, var(--text-muted) 12%, transparent);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 120ms cubic-bezier(.2,0,0,1);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ne-sr:hover {
  background: var(--surface-overlay);
}

.ne-expand {
  padding: 14px 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  animation: slideD .15s ease;
}

.ne-meta-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.ne-doc-link {
  font-size: 11px;
  color: var(--brand-500);
  cursor: pointer;
}

.ne-doc-link:hover {
  text-decoration: underline;
}

.ne-updated {
  font-size: 10px;
  color: var(--text-muted);
}

.ne-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  margin-bottom: 12px;
}

.ne-preview-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ne-preview-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-emphasis);
}

.ne-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1.5fr 2fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}

.ne-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ne-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.ne-field input, .ne-field select {
  padding: 7px 10px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  font-size: 13px;
  background: var(--surface-base);
  color: var(--text-emphasis);
}

.ne-field input:focus, .ne-field select:focus {
  border-color: var(--brand-500);
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-glow);
}

.ne-req-star {
  color: var(--error-500);
}

.ne-char-count {
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
}

.ne-hint {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.ne-docs {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.ne-docs-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}

.ne-doc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
}

.ne-doc-icon {
  font-size: 16px;
}

.ne-doc-info {
  flex: 1;
  min-width: 0;
}

.ne-doc-name {
  font-weight: 600;
  color: var(--text-emphasis);
}

.ne-doc-meta {
  font-size: 10px;
  color: var(--text-muted);
}

.ne-doc-status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
}

.ne-doc-verified {
  color: var(--success-500);
  background: color-mix(in oklch, var(--success-500) 10%, transparent);
}

.ne-doc-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.ne-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.ne-save-hint {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
}

.ne-history-section {
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
}

.ne-history-toggle {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px 0;
}

.ne-history-toggle:hover {
  color: var(--brand-500);
}

.ne-arrow {
  display: inline-block;
  font-size: 10px;
  transition: transform .2s;
  margin-right: 6px;
}

.ne-arrow-open {
  transform: rotate(90deg);
}

.ne-history-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-subtle);
}

.ne-htab {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.ne-htab-on {
  color: var(--brand-500);
  border-bottom-color: var(--brand-500);
}

.ne-diff {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.ne-diff-del {
  color: var(--error-500);
  text-decoration: line-through;
}

.ne-diff-add {
  color: var(--success-500);
  font-weight: 600;
}

.ne-audit-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
}

.ne-audit-item:last-child {
  border-bottom: none;
}

.ne-at-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.ne-at-body {
  flex: 1;
}

.ne-at-what {
  color: var(--text-default);
}

.ne-at-when {
  color: var(--text-muted);
  font-size: 10px;
}

@media (max-width: 768px) {
  .ne-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Social & Messaging ──────────────────────────────── */

.soc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--text-muted) 12%, transparent);
  font-size: 0.8125rem;
  min-height: 44px;
  cursor: pointer;
  transition: background 120ms cubic-bezier(.2,0,0,1);
}

.soc-row:last-of-type {
  border-bottom: none;
}

.soc-row:hover {
  background: var(--surface-overlay);
}

.soc-icon {
  font-size: 18px;
  min-width: 28px;
  flex: 0 0 28px;
  text-align: center;
}

.soc-handle {
  flex: 1;
  font-weight: 500;
  color: var(--text-default);
}

.soc-verified {
  font-size: 10px;
  font-weight: 600;
  color: var(--success-500);
  background: color-mix(in oklch, var(--success-500) 10%, transparent);
  padding: 2px 8px;
  border-radius: 10px;
}

.soc-add-wrap {
  padding: 10px 0;
  border-top: 1px solid var(--border-subtle);
}

.soc-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── DocCapture Wizard ───────────────────────────────── */

.dc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.dc-modal {
  background: var(--surface-base);
  border-radius: 16px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.3);
}

.dc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.dc-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-emphasis);
}

.dc-close {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--border-subtle);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
}

.dc-steps {
  display: flex;
  gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.dc-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.dc-step-active {
  color: var(--brand-500);
}

.dc-step-done {
  color: #16a34a;
}

.dc-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

.dc-step-active .dc-step-num {
  background: var(--brand-500);
  color: #fff;
}

.dc-step-done .dc-step-num {
  background: #16a34a;
  color: #fff;
}

.dc-body {
  padding: 20px;
}

.dc-source-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-emphasis);
  margin-bottom: 14px;
}

.dc-source-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dc-source-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  cursor: pointer;
  transition: all .12s;
}

.dc-source-opt:hover {
  border-color: var(--brand-500);
  background: var(--brand-glow);
}

.dc-opt-icon {
  font-size: 24px;
}

.dc-opt-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-emphasis);
}

.dc-opt-desc {
  font-size: 11px;
  color: var(--text-muted);
}

.dc-privacy {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.dc-quality {
  text-align: center;
}

.dc-quality-score {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dc-qs-green {
  background: rgba(34,197,94,.12);
  border: 3px solid #16a34a;
}

.dc-qs-yellow {
  background: rgba(245,158,11,.12);
  border: 3px solid #d97706;
}

.dc-qs-red {
  background: rgba(239,68,68,.12);
  border: 3px solid #dc2626;
}

.dc-qs-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-emphasis);
}

.dc-qs-label {
  font-size: 10px;
  color: var(--text-muted);
}

.dc-quality-issues {
  text-align: left;
  margin: 14px auto;
  max-width: 300px;
}

.dc-qi {
  font-size: 12px;
  padding: 4px 0;
}

.dc-qi-ok {
  color: #16a34a;
}

.dc-qi-warn {
  color: #d97706;
}

.dc-quality-tips {
  font-size: 11px;
  color: var(--text-muted);
  margin: 14px 0;
}

.dc-quality-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.dc-review-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}

.dc-review-doc-placeholder {
  background: var(--surface-overlay);
  border: 2px dashed var(--border-default);
  border-radius: 10px;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.dc-rf-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}

.dc-rf-row {
  display: flex;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border-subtle);
  font-size: 12px;
}

.dc-rf-k {
  width: 80px;
  color: var(--text-muted);
  font-weight: 600;
}

.dc-rf-v {
  flex: 1;
  color: var(--text-emphasis);
  font-weight: 600;
}

.dc-rf-conf {
  font-size: 10px;
  color: #16a34a;
  font-weight: 700;
}

.dc-review-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.dc-done {
  text-align: center;
  padding: 30px;
}

.dc-done-icon {
  font-size: 48px;
  margin-bottom: 14px;
}

.dc-done-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-emphasis);
  margin-bottom: 6px;
}

.dc-done-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 18px;
}

/* ── NameEditor inline save-error (UX audit P0 — empty-required rejection)
   Sits below the .ne-grid + hint, above Save/Cancel actions. */

.ne-save-error {
  margin: 8px 0 10px;
  padding: 8px 12px;
  background: color-mix(in oklch, var(--error-500) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--error-500) 30%, transparent);
  border-radius: 6px;
  color: var(--error-500);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ── prefers-reduced-motion (a11y) ──
   Visual audit P1 — myrecords.css had zero @media block covering its own
   transitions/animations (.mi-sr hover, .mi-sr-chevron rotate, slide-down
   keyframes). Honor the OS setting at the file level. */

@media (prefers-reduced-motion: reduce) {
  .mi-sr,
  .ne-sr,
  .eml-row-lv,
  .addr-row,
  .ec-row,
  .soc-row,
  .mi-sr-chevron,
  .ne-arrow,
  .mi-sr-expand,
  .ne-expand,
  .vm-fill,
  .vm-pill-fill {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   AGE MODES — Universal Design (ages 10 to 100)
   Applied as a class on <body>: .age-child, .age-teen, .age-senior, .age-elder
   Default mode (18–64) requires no class — base tokens apply.
   ============================================================ */

/* ── Mode: Child (10–12) ── */

.age-child {
  --font-base: 1.125rem;
  /* 18px — slightly larger for readability */
  --touch-min: 52px;
  /* bigger tap targets */
  --nav-items: 5;
  /* simplified nav count */
}

/* ── Mode: Teen (13–17) ── */

.age-teen {
  --font-base: 1rem;
  /* 16px — standard */
  --touch-min: 48px;
  /* comfortable touch targets */
}

/* ── Mode: Senior (65–79) ── */

.age-senior {
  --font-base: 1.125rem;
  /* 18px */
  --touch-min: 52px;
  --icon-scale: 1.2;
}

/* ── Mode: Elder (80+) ── */

.age-elder {
  --font-base: 1.25rem;
  /* 20px — maximum readability */
  --touch-min: 56px;
  /* largest tap targets */
  --icon-scale: 1.3;
  --nav-items: 5;
  /* simplified nav */
}

/* ── Base touch target minimum (WCAG 2.5.8 — 44px for default mode) ── */

button,
a,
[role="button"],
input[type="submit"] {
  min-height: var(--touch-min, 44px);
}

/* ── Base font size driven by age mode ──
   The age class lives on <html>, so `--font-base` is defined on the
   root element and `font-size` is consumed there. This makes every
   `rem`-based size in the cascade scale with the chosen mode. */

html {
  font-size: var(--font-base, 1rem);
}

/* ── Touch targets — all interactive elements meet minimum size ──
   Applied globally; age mode custom properties raise the floor. */

.age-child button,
.age-child a,
.age-child [role="button"],
.age-teen button,
.age-teen a,
.age-teen [role="button"],
.age-senior button,
.age-senior a,
.age-senior [role="button"],
.age-elder button,
.age-elder a,
.age-elder [role="button"] {
  min-height: var(--touch-min, 44px);
  min-width: var(--touch-min, 44px);
}

/* ── Icon scaling for senior/elder ── */

.age-senior .hero-icon,
.age-senior [class*="hero-"] {
  transform: scale(var(--icon-scale, 1));
}

.age-elder .hero-icon,
.age-elder [class*="hero-"] {
  transform: scale(var(--icon-scale, 1));
}

/* ── Simplified navigation ──
   In child/elder modes, hide nav items beyond core 5.
   Nav items must carry data-nav-priority: core items get "core",
   secondary items get "extended". */

.age-child [data-nav-priority="extended"],
.age-elder [data-nav-priority="extended"] {
  display: none;
}

/* ── Child mode: block destructive actions without parent PIN ── */

.age-child .destructive-action {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
  position: relative;
}

.age-child .destructive-action::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ── Voice input button — hidden by default, shown in senior + elder modes ──
   Per CLAUDE.md universal design rules, both age-senior (65–79) and
   age-elder (80–100) get voice input as a low-friction text-entry
   alternative; gating only on age-elder shut out senior users who
   need it just as badly. */

.voice-input-btn {
  display: none;
}

.age-senior .voice-input-btn,
.age-elder .voice-input-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Reduced motion — respect user preference ── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Age mode selector styles (settings page) ── */

.age-mode-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.age-mode-option:hover {
  border-color: var(--border-emphasis);
  background: var(--surface-overlay);
}

.age-mode-option--active {
  border-color: var(--brand-500);
  background: color-mix(in srgb, var(--brand-500) 8%, var(--surface-raised));
}

.age-mode-option input[type="radio"] {
  accent-color: var(--brand-500);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.age-mode-option .age-mode-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-emphasis);
}

.age-mode-option .age-mode-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-block-start: 0.125rem;
}

/* This file is for your main application CSS */

/* ── Notification Drawer ──────────────────────────────────────────────────
   Positioned absolute from the header bell icon. Uses design tokens only.
*/

.ntf-drawer {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  z-index: var(--z-overlay);
  overflow: hidden;
  animation: ntf-slide-in 0.15s ease-out;
}

.ntf-item {
  border-bottom: 1px solid var(--border-subtle);
}

.ntf-item:last-child {
  border-bottom: none;
}

.ntf-item:hover {
  background: var(--surface-overlay);
}

.ntf-item--unread {
  background: color-mix(in srgb, var(--brand-500) 4%, var(--surface-raised));
}

.ntf-item:hover .opacity-0 {
  opacity: 1;
}

@keyframes ntf-slide-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to   {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* ── Legal Pages — Typography ────────────────────────────────────────────────
   Prose styles for Privacy Policy and Terms of Service pages.
   ──────────────────────────────────────────────────────────────────────────── */

.legal-content {
  color: var(--text-default);
  line-height: 1.7;
}

.legal-section {
  margin-bottom: 2rem;
}

.legal-section h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-emphasis);
  margin-bottom: 0.75rem;
}

.legal-section h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-default);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.legal-section p {
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.legal-section ul {
  list-style: disc;
  padding-left: 1.5rem;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.legal-section ul li {
  margin-bottom: 0.35rem;
}

.legal-section strong {
  color: var(--text-emphasis);
}

/* ── Document Preview Panel — Shimmer Loader ────────────────────────────────
   Used by file-preview.js (srch-preview-loader / srch-preview-loader__bar).
   No Tailwind classes — this is a static JS file outside the LiveView bundle,
   so the CSS must live here where it is always included.
   ──────────────────────────────────────────────────────────────────────────── */

.srch-preview-loader {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 20px;
  width: 100%;
  flex: 1;
  box-sizing: border-box;
}

/* Each shimmer bar — gradient sweeps left-to-right */

.srch-preview-loader__bar {
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    #e8eaed 0%,
    #f1f3f4 40%,
    #e8eaed 80%
  );
  background-size: 300% 100%;
  animation: srch-shimmer-sweep 1.6s ease-in-out infinite;
}

/* Spinner circle shown for text content secondary load */

.srch-preview-loader__spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid #e8eaed;
  border-top-color: #1a73e8;
  animation: srch-spinner-spin 0.8s linear infinite;
  align-self: center;
  margin: auto;
}

@keyframes srch-shimmer-sweep {
  0%   {
    background-position: 200% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

@keyframes srch-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

/* PDF / image overlay shimmer — positioned absolute over the iframe/img */

.srch-preview-overlay-loader {
  position: absolute;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 20px;
  box-sizing: border-box;
  z-index: 2;
  pointer-events: none;
}

.srch-preview-overlay-loader__bar {
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    #e8eaed 0%,
    #f1f3f4 40%,
    #e8eaed 80%
  );
  background-size: 300% 100%;
  animation: srch-shimmer-sweep 1.6s ease-in-out infinite;
}

/* Reduced-motion: static tint instead of animated sweep */

/* ── Search Loading Animation ───────────────────────────────────────────────
   Classes used by the @searching state in documents_live.html.heex.
   Tailwind purges classes in HEEx at build time, so custom animation CSS lives here.
*/

/* Shimmer sweep across the doc page cards */

.srch-shimmer-doc {
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(99, 102, 241, 0.12) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: srch-shimmer-sweep 1.8s ease-in-out infinite;
}

/* Orbiting magnifying glass around the document stack */

.srch-orbit {
  animation: srch-orbit 2.4s ease-in-out infinite;
  transform-origin: -14px 14px;
}

@keyframes srch-orbit {
  0%   {
    transform: rotate(0deg)   translateX(18px) rotate(0deg);
  }

  50%  {
    transform: rotate(180deg) translateX(18px) rotate(-180deg);
  }

  100% {
    transform: rotate(360deg) translateX(18px) rotate(-360deg);
  }
}

/* Bouncing dots at the bottom */

.srch-dot {
  animation: srch-bounce 0.8s ease-in-out infinite alternate;
}

@keyframes srch-bounce {
  from {
    transform: translateY(0);
    opacity: 0.4;
  }

  to   {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* Subtle float for the doc pages */

.srch-page--mid   {
  animation: srch-float 2.2s ease-in-out infinite;
}

.srch-page--left  {
  animation: srch-float 2.2s ease-in-out infinite 0.4s;
}

.srch-page--right {
  animation: srch-float 2.2s ease-in-out infinite 0.8s;
}

@keyframes srch-float {
  0%, 100% {
    transform: translateY(0);
  }

  50%       {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .srch-shimmer-doc, .srch-orbit, .srch-dot, .srch-page--mid,
  .srch-page--left, .srch-page--right {
    animation: none;
  }

  .srch-preview-loader__bar,
  .srch-preview-overlay-loader__bar {
    animation: none;
    background: #e8eaed;
  }

  .srch-preview-loader__spinner {
    animation: none;
    border-top-color: #e8eaed;
  }
}

/* ── Reconnect Fallback Preview ───────────────────────────────────────────
   Shown when a search result's storage account is deactivated. Extracted
   text is blurred in the backdrop to hint at the content; a card overlay
   prompts the user to reconnect their cloud provider.
*/

.rfb-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;
  overflow: hidden;
  border-radius: 12px;
}

.rfb-text-backdrop {
  position: absolute;
  inset: 0;
  padding: 20px;
  font-size: 12px;
  line-height: 1.7;
  color: #6b7280;
  white-space: pre-wrap;
  word-break: break-word;
  filter: blur(3px);
  opacity: 0.45;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, black 40%, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 90%);
}

.rfb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(255,255,255,0.7) 0%, rgba(248,250,252,0.85) 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.rfb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 320px;
  padding: 28px 24px 24px;
  background: white;
  border-radius: 16px;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.06),
    0 8px 24px rgba(0,0,0,0.08);
  animation: rfb-card-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes rfb-card-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }

  to   {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.rfb-icon-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ede9fe, #dbeafe);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 0 0 6px rgba(139,92,246,0.08);
}

.rfb-icon {
  font-size: 24px;
  line-height: 1;
}

.rfb-title {
  font-size: 15px;
  font-weight: 650;
  color: #1e293b;
  margin: 0 0 6px;
}

.rfb-subtitle {
  font-size: 12.5px;
  line-height: 1.5;
  color: #64748b;
  margin: 0 0 14px;
}

.rfb-subtitle strong {
  color: #334155;
  font-weight: 600;
}

.rfb-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 16px;
}

.rfb-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  color: #6366f1;
  background: #eef2ff;
  border-radius: 100px;
  letter-spacing: 0.01em;
}

.rfb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}

.rfb-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(99,102,241,0.4);
  background: linear-gradient(135deg, #6d28d9, #4f46e5);
}

.rfb-btn:active {
  transform: translateY(0);
}

.rfb-hint {
  font-size: 11px;
  color: #94a3b8;
  margin: 10px 0 0;
}

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

/* ── Search Result Cards — Drop Bounce Layout ──────────────────────────────
   Staggered entrance animation for search result cards.
   Cards start invisible (opacity:0, translateY(-20px)) and bounce in.
   The .visible class is added by the SearchResults JS hook with staggered delays.
*/

@keyframes srch-dropBounce {
  0%   {
    opacity: 0;
    transform: translateY(-20px);
  }

  60%  {
    opacity: 1;
    transform: translateY(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.srch-card--bounce {
  opacity: 0;
  transform: translateY(-20px);
}

.srch-card--bounce.visible {
  animation: srch-dropBounce 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Card base styling — override glass-card for search results ── */

.srch-card.glass-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 14px 16px;
  border-radius: 12px;
  transition: all 0.18s ease, box-shadow 0.25s ease;
}

.srch-card.glass-card:hover {
  background: var(--surface-overlay);
  border-color: var(--border-emphasis);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* ── Card title ── */

.srch-card__name {
  font-size: 14px;
  font-weight: 650;
  color: var(--text-emphasis);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.srch-card__name mark {
  background: rgba(254, 240, 138, 0.3);
  color: #fef08a;
  border-radius: 2px;
  font-weight: 700;
  padding: 0 2px;
}

/* ── Card subtitle row ── */

.srch-card__sub {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.srch-card__sub-sep {
  color: var(--border-emphasis);
}

/* ── Selected card — refined highlight ── */

.srch-card--selected.glass-card {
  background: color-mix(in srgb, var(--brand-500) 6%, var(--surface-raised)) !important;
  border-color: var(--brand-500) !important;
  border-left: 3px solid var(--brand-500);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--brand-500) 12%, transparent) !important;
}

.srch-card--selected .srch-card__name {
  color: var(--brand-400);
}

.srch-card--selected .srch-preview-btn {
  background: color-mix(in srgb, var(--brand-500) 15%, transparent);
  border-color: var(--brand-400);
  color: var(--brand-300);
}

/* ── Library card — active/selected highlight ── */

.doc-card--active {
  background: color-mix(in srgb, var(--brand-500) 8%, var(--surface-raised)) !important;
  border-left: 3px solid var(--brand-500);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--brand-500) 12%, transparent);
}

/* ── Match reason badges — vivid colored pills ── */

.srch-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 100px;
  gap: 3px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.srch-badge--content  {
  background: rgba(16,185,129,0.18);
  color: #34d399;
}

.srch-badge--filename {
  background: rgba(96,165,250,0.18);
  color: #93c5fd;
}

.srch-badge--semantic {
  background: rgba(167,139,250,0.18);
  color: #c4b5fd;
}

.srch-badge--owned    {
  background: rgba(16,185,129,0.18);
  color: #34d399;
}

.srch-badge--expired  {
  background: rgba(239,68,68,0.18);
  color: #fca5a5;
}

/* Light mode badge overrides */

.light .srch-badge--content  {
  background: rgba(16,185,129,0.12);
  color: #059669;
}

.light .srch-badge--filename {
  background: rgba(59,130,246,0.12);
  color: #2563eb;
}

.light .srch-badge--semantic {
  background: rgba(124,58,237,0.12);
  color: #7c3aed;
}

.light .srch-badge--owned    {
  background: rgba(16,185,129,0.12);
  color: #059669;
}

.light .srch-badge--expired  {
  background: rgba(239,68,68,0.12);
  color: #dc2626;
}

/* ── Preview button — branded accent ── */

.srch-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--brand-500);
  background: color-mix(in srgb, var(--brand-500) 8%, transparent);
  color: var(--brand-400);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.srch-preview-btn:hover {
  background: color-mix(in srgb, var(--brand-500) 18%, transparent);
  border-color: var(--brand-400);
  color: var(--brand-300);
  box-shadow: 0 0 12px var(--brand-glow);
}

/* ── Chevron button ── */

.srch-chevron-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  transition: all 0.15s;
}

.srch-chevron-btn:hover {
  background: var(--surface-overlay);
  color: var(--text-default);
}

.srch-card__chevron-icon {
  transition: transform 0.2s ease;
}

.srch-card__chevron-icon--open {
  transform: rotate(180deg);
}

/* ── Expandable details section ── */

.srch-card__details {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease 0.05s;
}

.srch-card__details--open {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}

.srch-card__details__inner {
  overflow: hidden;
  min-height: 0;
}

/* Details divider */

.srch-details__divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 10px 0;
}

/* Section label */

.srch-details__label {
  font-size: 9px;
  font-weight: 700;
  color: var(--brand-400);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

/* ── Snippet block — accented left border ── */

.srch-card__snippet-block {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-default);
  padding: 10px 14px;
  background: var(--surface-overlay);
  border-radius: 8px;
  border-left: 3px solid var(--brand-500);
  margin-bottom: 10px;
}

.srch-card__snippet-block mark {
  background: rgba(254, 240, 138, 0.3);
  color: #fef08a;
  border-radius: 2px;
  padding: 0 2px;
}

/* ── Metadata grid ── */

.srch-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-size: 12px;
  margin-bottom: 10px;
}

.srch-meta-item {
  display: flex;
  gap: 8px;
}

.srch-meta-key {
  color: var(--text-muted);
  min-width: 76px;
  font-weight: 400;
}

.srch-meta-val {
  color: var(--text-emphasis);
  font-weight: 600;
}

/* ── Relevance bar ── */

.srch-rel__bar {
  width: 80px;
  height: 5px;
  background: var(--border-default);
  border-radius: 3px;
  overflow: hidden;
}

.srch-rel__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.srch-rel__fill--high {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.srch-rel__fill--med  {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.srch-rel__fill--low  {
  background: var(--border-emphasis);
}

/* Relevance percentage */

.srch-rel__pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 32px;
}

/* ── Download button in details ── */

.srch-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-default);
  cursor: pointer;
  transition: all 0.15s;
}

.srch-dl-btn:hover {
  background: var(--surface-overlay);
  border-color: var(--border-emphasis);
  color: var(--text-emphasis);
}

/* ── SVG file-type icon containers ── */

.srch-ficon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 1px;
}

.srch-ficon svg {
  width: 18px;
  height: 18px;
}

.srch-ficon__ext {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.95;
}

.srch-ficon--pdf   {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
}

.srch-ficon--doc   {
  background: rgba(59, 130, 246, 0.18);
  color: #3b82f6;
}

.srch-ficon--image {
  background: rgba(34, 197, 94, 0.18);
  color: #22c55e;
}

.srch-ficon--sheet {
  background: rgba(234, 179, 8, 0.18);
  color: #eab308;
}

.srch-ficon--slide {
  background: rgba(249, 115, 22, 0.18);
  color: #f97316;
}

.srch-ficon--other {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

/* ── Pagination controls ── */

.srch-pag__btn {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0 8px;
}

.srch-pag__btn:hover {
  background: var(--surface-overlay);
  color: var(--text-default);
  border-color: var(--border-emphasis);
}

.srch-pag__btn--active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: var(--text-inverse);
  font-weight: 700;
}

.srch-pag__btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .srch-card--bounce,
  .srch-card--bounce.visible {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .srch-card__details {
    transition: none;
  }
}

/* ── Preview placeholder — shown when no document is selected ── */

.srch-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 100%;
  padding: 40px 28px;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.srch-preview-placeholder__icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--brand-500) 8%, var(--surface-overlay));
  border: 1px solid color-mix(in srgb, var(--brand-500) 15%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: srch-placeholder-float 3s ease-in-out infinite;
}

.srch-preview-placeholder__icon svg {
  width: 32px;
  height: 32px;
  color: var(--brand-400);
  opacity: 0.7;
}

.srch-preview-placeholder__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-default);
  letter-spacing: -0.01em;
}

.srch-preview-placeholder__hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 220px;
}

.srch-preview-placeholder__keys {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.srch-preview-placeholder__key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-overlay);
}

.srch-preview-placeholder__key kbd {
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-default);
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  box-shadow: 0 1px 0 var(--border-default);
}

@keyframes srch-placeholder-float {
  0%, 100% {
    transform: translateY(0);
  }

  50%      {
    transform: translateY(-6px);
  }
}

/* ── Search Home — Minimal Zen Layout ──────────────────────────────────────── */

.srch-zen {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  padding-top: 2rem;
}

/* Split pill search bar with floating label — Option F */

.srch-zen__split-outer {
  position: relative;
  max-width: 480px;
  margin: 0 auto 8px;
  padding-top: 14px;
}

.srch-zen__split-label {
  position: absolute;
  top: 0;
  left: 16px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-400);
  opacity: 0.6;
  transition: opacity 0.25s;
}

.srch-zen__split-outer:focus-within .srch-zen__split-label {
  opacity: 1;
}

.srch-zen__split {
  display: flex;
  align-items: center;
  border-radius: 16px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  overflow: hidden;
  transition: all 0.25s;
}

.srch-zen__split:focus-within {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 8%, transparent);
}

.srch-zen__split-icon {
  flex-shrink: 0;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border-subtle);
  padding: 14px 0;
}

.srch-zen__split-icon svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: color 0.2s;
}

.srch-zen__split:focus-within .srch-zen__split-icon svg {
  color: var(--brand-400);
}

.srch-zen__split-input {
  flex: 1;
  padding: 14px 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-emphasis);
  background: transparent;
  border: none;
  outline: none;
  letter-spacing: -0.01em;
  caret-color: var(--brand-500);
  text-align: center;
}

.srch-zen__split-input::-moz-placeholder {
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0.45;
}

.srch-zen__split-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0.45;
}

.srch-zen__split-go {
  flex-shrink: 0;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
  border-left: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.15s;
  background: transparent;
  border-top: none;
  border-bottom: none;
  border-right: none;
}

.srch-zen__split-go:hover {
  background: var(--brand-500);
}

.srch-zen__split-go svg {
  width: 16px;
  height: 16px;
  color: var(--brand-400);
  transition: color 0.15s;
}

.srch-zen__split-go:hover svg {
  color: var(--text-inverse);
}

/* Rotating hint text below the input */

.srch-zen__hints {
  max-width: 440px;
  margin: 0 auto 24px;
  height: 18px;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.srch-zen__hints span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: srch-zen-hint-rotate 12s ease-in-out infinite;
}

.srch-zen__hints span:nth-child(1) {
  animation-delay: 0s;
}

.srch-zen__hints span:nth-child(2) {
  animation-delay: 3s;
}

.srch-zen__hints span:nth-child(3) {
  animation-delay: 6s;
}

.srch-zen__hints span:nth-child(4) {
  animation-delay: 9s;
}

@keyframes srch-zen-hint-rotate {
  0%   {
    opacity: 0;
    transform: translateY(10px);
  }

  8%,25% {
    opacity: 1;
    transform: translateY(0);
  }

  33%  {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 0;
  }
}

.srch-zen__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
}

.srch-zen__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  color: var(--text-default);
  cursor: pointer;
  transition: all 0.2s;
  animation: srch-zen-fadeIn 0.5s ease both;
}

.srch-zen__pill:nth-child(1)  {
  animation-delay: .05s;
}

.srch-zen__pill:nth-child(2)  {
  animation-delay: .1s;
}

.srch-zen__pill:nth-child(3)  {
  animation-delay: .15s;
}

.srch-zen__pill:nth-child(4)  {
  animation-delay: .2s;
}

.srch-zen__pill:nth-child(5)  {
  animation-delay: .25s;
}

.srch-zen__pill:nth-child(6)  {
  animation-delay: .3s;
}

.srch-zen__pill:nth-child(7)  {
  animation-delay: .35s;
}

.srch-zen__pill:nth-child(8)  {
  animation-delay: .4s;
}

.srch-zen__pill:nth-child(9)  {
  animation-delay: .45s;
}

.srch-zen__pill:nth-child(10) {
  animation-delay: .5s;
}

.srch-zen__pill:nth-child(11) {
  animation-delay: .55s;
}

.srch-zen__pill:nth-child(12) {
  animation-delay: .6s;
}

.srch-zen__pill:nth-child(13) {
  animation-delay: .65s;
}

.srch-zen__pill:nth-child(14) {
  animation-delay: .7s;
}

.srch-zen__pill:nth-child(15) {
  animation-delay: .75s;
}

.srch-zen__pill:nth-child(16) {
  animation-delay: .8s;
}

.srch-zen__pill:hover {
  border-color: var(--brand-500);
  color: var(--brand-400);
  transform: translateY(-2px);
}

@keyframes srch-zen-fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to   {
    opacity: 1;
    transform: translateY(0);
  }
}

.srch-zen__footer {
  font-size: 11px;
  color: var(--text-muted);
}

.srch-zen__kbd {
  display: inline-block;
  padding: 1px 5px;
  font-size: 10px;
  font-family: inherit;
  border-radius: 4px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  box-shadow: 0 1px 0 var(--border-default);
}

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

/* Dark mode support */

@media (prefers-color-scheme: dark) {
  .rfb-text-backdrop {
    color: #9ca3af;
  }

  .rfb-overlay {
    background: linear-gradient(160deg, rgba(15,23,42,0.7), rgba(30,41,59,0.85));
  }

  .rfb-card {
    background: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.3);
  }

  .rfb-icon-ring {
    background: linear-gradient(135deg, #312e81, #1e3a5f);
  }

  .rfb-title {
    color: #f1f5f9;
  }

  .rfb-subtitle {
    color: #94a3b8;
  }

  .rfb-subtitle strong {
    color: #cbd5e1;
  }

  .rfb-chip {
    color: #a5b4fc;
    background: #312e81;
  }

  .rfb-hint {
    color: #64748b;
  }
}

.placeholder\:text-text-muted::-moz-placeholder {
  color: var(--text-muted);
}

.placeholder\:text-text-muted::placeholder {
  color: var(--text-muted);
}

.last\:border-0:last-child {
  border-width: 0px;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.hover\:cursor-pointer:hover {
  cursor: pointer;
}

.hover\:border-border-emphasis:hover {
  border-color: var(--border-emphasis);
}

.hover\:border-brand-500:hover {
  border-color: var(--brand-500);
}

.hover\:bg-amber-200\/50:hover {
  background-color: rgb(253 230 138 / 0.5);
}

.hover\:bg-brand-500:hover {
  background-color: var(--brand-500);
}

.hover\:bg-brand-600:hover {
  background-color: var(--brand-600);
}

.hover\:bg-gray-100\/70:hover {
  background-color: rgb(243 244 246 / 0.7);
}

.hover\:bg-gray-100\/80:hover {
  background-color: rgb(243 244 246 / 0.8);
}

.hover\:bg-green-500\/10:hover {
  background-color: rgb(34 197 94 / 0.1);
}

.hover\:bg-red-500\/10:hover {
  background-color: rgb(239 68 68 / 0.1);
}

.hover\:bg-red-500\/\[0\.03\]:hover {
  background-color: rgb(239 68 68 / 0.03);
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}

.hover\:bg-surface-base:hover {
  background-color: var(--surface-base);
}

.hover\:bg-surface-overlay:hover {
  background-color: var(--surface-overlay);
}

.hover\:bg-surface-raised:hover {
  background-color: var(--surface-raised);
}

.hover\:bg-zinc-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}

.hover\:bg-zinc-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(63 63 70 / var(--tw-bg-opacity));
}

.hover\:text-\[\#1f2a44\]:hover {
  --tw-text-opacity: 1;
  color: rgb(31 42 68 / var(--tw-text-opacity));
}

.hover\:text-\[\#7A2D2D\]:hover {
  --tw-text-opacity: 1;
  color: rgb(122 45 45 / var(--tw-text-opacity));
}

.hover\:text-amber-700:hover {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity));
}

.hover\:text-amber-800:hover {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity));
}

.hover\:text-brand-300:hover {
  color: var(--brand-300);
}

.hover\:text-brand-400:hover {
  color: var(--brand-400);
}

.hover\:text-brand-600:hover {
  color: var(--brand-600);
}

.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

.hover\:text-green-300:hover {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity));
}

.hover\:text-red-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}

.hover\:text-red-400:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.hover\:text-text-emphasis:hover {
  color: var(--text-emphasis);
}

.hover\:text-zinc-700:hover {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity));
}

.hover\:text-zinc-900:hover {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / var(--tw-text-opacity));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-40:hover {
  opacity: 0.4;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:ring-2:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:border-\[\#9A3A3A\]\/60:focus {
  border-color: rgb(154 58 58 / 0.6);
}

.focus\:border-brand-500:focus {
  border-color: var(--brand-500);
}

.focus\:border-rose-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(251 113 133 / var(--tw-border-opacity));
}

.focus\:border-zinc-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(161 161 170 / var(--tw-border-opacity));
}

.focus\:bg-surface-overlay:focus {
  background-color: var(--surface-overlay);
}

.focus\:bg-surface-raised:focus {
  background-color: var(--surface-raised);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-brand-500:focus {
  --tw-ring-color: var(--brand-500);
}

.focus\:ring-offset-1:focus {
  --tw-ring-offset-width: 1px;
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus\:ring-offset-surface-base:focus {
  --tw-ring-offset-color: var(--surface-base);
}

.focus\:ring-offset-surface-raised:focus {
  --tw-ring-offset-color: var(--surface-raised);
}

.active\:text-white\/80:active {
  color: rgb(255 255 255 / 0.8);
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:bg-zinc-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / var(--tw-bg-opacity));
}

.group:hover .group-hover\:bg-zinc-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}

.group:hover .group-hover\:fill-zinc-600 {
  fill: #52525b;
}

.group:hover .group-hover\:text-brand-400 {
  color: var(--brand-400);
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-70 {
  opacity: 0.7;
}

.phx-submit-loading.phx-submit-loading\:opacity-75 {
  opacity: 0.75;
}

.phx-submit-loading .phx-submit-loading\:opacity-75 {
  opacity: 0.75;
}

.dark\:border-amber-500\/20:is(.dark *) {
  border-color: rgb(245 158 11 / 0.2);
}

.dark\:bg-amber-500\/\[0\.08\]:is(.dark *) {
  background-color: rgb(245 158 11 / 0.08);
}

.dark\:bg-amber-900\/20:is(.dark *) {
  background-color: rgb(120 53 15 / 0.2);
}

.dark\:bg-amber-900\/30:is(.dark *) {
  background-color: rgb(120 53 15 / 0.3);
}

.dark\:text-amber-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity));
}

.dark\:text-amber-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity));
}

.dark\:text-amber-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

.dark\:text-amber-500\/60:is(.dark *) {
  color: rgb(245 158 11 / 0.6);
}

.dark\:text-brand-300:is(.dark *) {
  color: var(--brand-300);
}

.dark\:text-green-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity));
}

.dark\:text-indigo-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity));
}

.dark\:text-red-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.dark\:hover\:bg-amber-500\/10:hover:is(.dark *) {
  background-color: rgb(245 158 11 / 0.1);
}

.dark\:hover\:text-amber-400:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

.dark\:hover\:text-brand-400:hover:is(.dark *) {
  color: var(--brand-400);
}

.dark\:hover\:text-white:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:w-72 {
    width: 18rem;
  }

  .sm\:w-96 {
    width: 24rem;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:translate-y-0 {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .sm\:scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .sm\:scale-95 {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:self-auto {
    align-self: auto;
  }

  .sm\:overflow-visible {
    overflow: visible;
  }

  .sm\:rounded-l-xl {
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
  }

  .sm\:rounded-r-xl {
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:leading-6 {
    line-height: 1.5rem;
  }

  .group:hover .sm\:group-hover\:scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (min-width: 768px) {
  .md\:block {
    display: block;
  }
}

@media (min-width: 1024px) {
  .lg\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:w-56 {
    width: 14rem;
  }

  .lg\:max-w-\[60\%\] {
    max-width: 60%;
  }

  .lg\:max-w-\[75\%\] {
    max-width: 75%;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:overflow-visible {
    overflow: visible;
  }

  .lg\:p-6 {
    padding: 1.5rem;
  }

  .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .lg\:pb-0 {
    padding-bottom: 0px;
  }

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .xl\:left-\[50rem\] {
    left: 50rem;
  }

  .xl\:px-28 {
    padding-left: 7rem;
    padding-right: 7rem;
  }

  .xl\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}