@charset "UTF-8";
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 */
@font-face {
  font-family: 'GothamNarrow';
  /* Generic family name */
  src: url(/assets/GothamNarrow-Light-07427914fdb6c88fe0bddfba73de00f1b22da4a6b1938fab67253416d1d26de2.otf) format("opentype");
  font-weight: 300;
  /* Use numeric weight */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GothamNarrow';
  /* Same generic family name */
  src: url(/assets/GothamNarrow-Medium-5ccc50e9e27b577e04bb89988b13e572c9ed03fb9c2fef261e8daefde647e606.otf) format("opentype");
  font-weight: 400;
  /* Use numeric weight */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GothamNarrow';
  /* Same generic family name */
  src: url(/assets/GothamNarrow-Bold-d4a383f5eb59001c3a72489164d6b799a01a78da5ae7fba7f05106fc11d6116e.otf) format("opentype");
  font-weight: 700;
  /* Use numeric weight */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GothamNarrow';
  /* Same generic family name */
  src: url(/assets/GothamNarrow-BookItalic-141664cc9cefe8b83b7a222fa1a245763e7f80abb221d301b5ba30cf25b484f5.otf) format("opentype");
  font-weight: 300;
  /* Use numeric weight */
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GothamNarrow';
  /* Same generic family name */
  src: url(/assets/GothamNarrow-Book-3e673e22df374032beb36e3604550c04d389252e8b230136efe65c209127834d.otf) format("opentype");
  font-weight: 300;
  /* Use numeric weight */
  font-style: normal;
  font-display: swap;
}

@tailwind base;
@tailwind components;
@tailwind utilities;
/* =================================================
   Admin V2 Theme System

   To add a new theme: add a [data-v2-theme="name"]
   block with overridden custom properties. The
   @layer components section never needs to change.

   This is the whole of the admin dashboard's styling
   and none of the consumer site's — nothing outside
   app/views/admin uses a v2- class — so it reads as
   though it belongs in its own file. It cannot have
   one: tailwindcss-rails 3.3.2 hardcodes this single
   path as the build's only input, and the CLI drops
   an @import of a local file unless postcss-import
   is configured, which needs npm packages the
   production image does not have.
   ================================================= */
/* --- Default theme: slate sidebar + blue accent --- */
/* line 24, app/assets/stylesheets/application.tailwind.css */
[data-v2-theme="default"],
[data-v2-theme] {
  --v2-sidebar-bg:           #1e293b;
  --v2-sidebar-text:         #94a3b8;
  --v2-sidebar-heading-text: #f1f5f9;
  --v2-sidebar-hover-bg:     #334155;
  --v2-sidebar-hover-text:   #f1f5f9;
  --v2-sidebar-active-bg:    #3b82f6;
  --v2-sidebar-active-text:  #ffffff;
  --v2-sidebar-divider:      rgba(148,163,184,0.15);
  --v2-sidebar-width:        220px;
  --v2-brand-bg:             #0f172a;
  --v2-brand-text:           #ffffff;
  --v2-page-bg:              #f1f5f9;
  --v2-topbar-bg:            #ffffff;
  --v2-topbar-border:        #e2e8f0;
  --v2-topbar-text:          #0f172a;
  --v2-surface-bg:           #ffffff;
  --v2-surface-border:       #e2e8f0;
  --v2-surface-shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --v2-surface-shadow-lg:    0 4px 16px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --v2-table-header-bg:      #f8fafc;
  --v2-table-row-hover:      #f1f5f9;
  --v2-card-accent:          #3b82f6;
  --v2-card-alt-accent:      #6366f1;
  --v2-card-alert-accent:    #ef4444;
  --v2-card-alert-bg:        #fff5f5;
  --v2-btn-primary-bg:       #3b82f6;
  --v2-btn-primary-hover:    #2563eb;
  --v2-btn-primary-text:     #ffffff;
  --v2-btn-danger-bg:        #ef4444;
  --v2-btn-danger-hover:     #dc2626;
  --v2-btn-danger-text:      #ffffff;
  --v2-btn-action-bg:        #3b82f6;
  --v2-btn-action-hover:     #2563eb;
  --v2-btn-action-text:      #ffffff;
  --v2-badge-success-bg:     #dcfce7;
  --v2-badge-success-text:   #15803d;
  --v2-badge-pending-bg:     #fef9c3;
  --v2-badge-pending-text:   #854d0e;
  --v2-badge-danger-bg:      #fee2e2;
  --v2-badge-danger-text:    #b91c1c;
  --v2-text-primary:         #0f172a;
  --v2-text-secondary:       #64748b;
}

/* --- Ocean theme: deep teal sidebar + teal accent --- */
/* line 71, app/assets/stylesheets/application.tailwind.css */
[data-v2-theme="ocean"] {
  --v2-sidebar-bg:           #042f2e;
  --v2-sidebar-text:         #5eead4;
  --v2-sidebar-heading-text: #ffffff;
  --v2-sidebar-hover-bg:     #0d3b36;
  --v2-sidebar-hover-text:   #ccfbf1;
  --v2-sidebar-active-bg:    #0d9488;
  --v2-sidebar-active-text:  #ffffff;
  --v2-sidebar-divider:      rgba(94,234,212,0.15);
  --v2-sidebar-width:        220px;
  --v2-brand-bg:             #021a1a;
  --v2-brand-text:           #ccfbf1;
  --v2-page-bg:              #f0fdfa;
  --v2-topbar-bg:            #ffffff;
  --v2-topbar-border:        #99f6e4;
  --v2-topbar-text:          #042f2e;
  --v2-surface-bg:           #ffffff;
  --v2-surface-border:       #99f6e4;
  --v2-surface-shadow:       0 1px 3px rgba(13,148,136,.10), 0 1px 2px rgba(13,148,136,.06);
  --v2-surface-shadow-lg:    0 4px 16px rgba(13,148,136,.14), 0 2px 4px rgba(13,148,136,.08);
  --v2-table-header-bg:      #f0fdfa;
  --v2-table-row-hover:      #ccfbf1;
  --v2-card-accent:          #0d9488;
  --v2-card-alt-accent:      #0891b2;
  --v2-card-alert-accent:    #e11d48;
  --v2-card-alert-bg:        #fff1f2;
  --v2-btn-primary-bg:       #0d9488;
  --v2-btn-primary-hover:    #0f766e;
  --v2-btn-primary-text:     #ffffff;
  --v2-btn-danger-bg:        #e11d48;
  --v2-btn-danger-hover:     #be123c;
  --v2-btn-danger-text:      #ffffff;
  --v2-btn-action-bg:        #0d9488;
  --v2-btn-action-hover:     #0f766e;
  --v2-btn-action-text:      #ffffff;
  --v2-badge-success-bg:     #dcfce7;
  --v2-badge-success-text:   #15803d;
  --v2-badge-pending-bg:     #ffedd5;
  --v2-badge-pending-text:   #c2410c;
  --v2-badge-danger-bg:      #ffe4e6;
  --v2-badge-danger-text:    #be123c;
  --v2-text-primary:         #042f2e;
  --v2-text-secondary:       #0f766e;
}

/* --- Dark theme: dark surfaces throughout + indigo accent ---
   Unlike default/ocean (dark sidebar, light page), this darkens the page and
   card surfaces too, so every ink is re-picked against them rather than
   inherited. Accents sit in the dark-mode lightness band and clear 3:1 on the
   card surface; body inks clear WCAG AA on it (primary 11.9:1, secondary
   5.7:1). The consumers chart reads --v2-card-accent, --v2-surface-border and
   --v2-text-secondary, so it follows automatically. */
/* line 123, app/assets/stylesheets/application.tailwind.css */
[data-v2-theme="dark"] {
  color-scheme: dark;
  --v2-sidebar-bg:           #0f172a;
  --v2-sidebar-text:         #94a3b8;
  --v2-sidebar-heading-text: #f8fafc;
  --v2-sidebar-hover-bg:     #1e293b;
  --v2-sidebar-hover-text:   #f8fafc;
  --v2-sidebar-active-bg:    #6366f1;
  --v2-sidebar-active-text:  #ffffff;
  --v2-sidebar-divider:      rgba(148,163,184,0.18);
  --v2-sidebar-width:        220px;
  --v2-brand-bg:             #020617;
  --v2-brand-text:           #e2e8f0;
  --v2-page-bg:              #0b1220;
  --v2-topbar-bg:            #1e293b;
  --v2-topbar-border:        #334155;
  --v2-topbar-text:          #f1f5f9;
  --v2-surface-bg:           #1e293b;
  --v2-surface-border:       #334155;
  --v2-surface-shadow:       0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --v2-surface-shadow-lg:    0 4px 16px rgba(0,0,0,.50), 0 2px 4px rgba(0,0,0,.40);
  --v2-table-header-bg:      #0f172a;
  --v2-table-row-hover:      #334155;
  --v2-card-accent:          #6366f1;
  --v2-card-alt-accent:      #0891b2;
  --v2-card-alert-accent:    #ef4444;
  --v2-card-alert-bg:        #3b1d1d;
  --v2-btn-primary-bg:       #6366f1;
  --v2-btn-primary-hover:    #4f46e5;
  --v2-btn-primary-text:     #ffffff;
  --v2-btn-danger-bg:        #ef4444;
  --v2-btn-danger-hover:     #dc2626;
  --v2-btn-danger-text:      #ffffff;
  --v2-btn-action-bg:        #6366f1;
  --v2-btn-action-hover:     #4f46e5;
  --v2-btn-action-text:      #ffffff;
  --v2-badge-success-bg:     #14532d;
  --v2-badge-success-text:   #86efac;
  --v2-badge-pending-bg:     #422006;
  --v2-badge-pending-text:   #fcd34d;
  --v2-badge-danger-bg:      #450a0a;
  --v2-badge-danger-text:    #fca5a5;
  --v2-text-primary:         #e2e8f0;
  --v2-text-secondary:       #94a3b8;
}

@layer components {
  /* Page shell */
  /* line 172, app/assets/stylesheets/application.tailwind.css */
  .v2-page {
    @apply flex flex-col min-h-screen w-full;
    background-color: var(--v2-page-bg);
  }
  /* line 176, app/assets/stylesheets/application.tailwind.css */
  .v2-page-title {
    @apply px-8 py-4 text-lg font-semibold tracking-tight border-b flex-none;
    background-color: var(--v2-topbar-bg);
    border-color: var(--v2-topbar-border);
    color: var(--v2-topbar-text);
    box-shadow: var(--v2-surface-shadow);
    position: relative;
    z-index: 1;
  }
  /* line 185, app/assets/stylesheets/application.tailwind.css */
  .v2-page-body {
    @apply flex flex-1;
    min-height: 0;
  }
  /* line 189, app/assets/stylesheets/application.tailwind.css */
  .v2-page-sidebar {
    @apply flex-none flex flex-col;
    width: var(--v2-sidebar-width);
    background-color: var(--v2-sidebar-bg);
    order: -1;
    min-height: 100%;
  }
  /* line 196, app/assets/stylesheets/application.tailwind.css */
  .v2-page-content {
    @apply flex-1 p-8 overflow-x-auto;
    min-width: 0;
  }
  /* Sidebar navigation */
  /* line 202, app/assets/stylesheets/application.tailwind.css */
  .v2-nav-brand {
    @apply flex items-center px-5 py-4 text-sm font-bold uppercase select-none flex-none;
    background-color: var(--v2-brand-bg);
    color: var(--v2-brand-text);
    letter-spacing: 0.12em;
  }
  /* line 208, app/assets/stylesheets/application.tailwind.css */
  .v2-nav {
    @apply flex flex-col flex-1 py-3 overflow-y-auto;
  }
  /* Page-injected sidebar actions (content_for :menu). Must not grow, or it
     would share the column with .v2-nav and clip the tail of the nav. */
  /* line 213, app/assets/stylesheets/application.tailwind.css */
  .v2-nav-actions {
    @apply flex-none px-5 pb-4;
  }
  /* Theme picker. Wears sidebar tokens, not the surface tokens the content-area
     selects use, since it sits on the sidebar in every theme. */
  /* line 218, app/assets/stylesheets/application.tailwind.css */
  .v2-nav-select-row {
    @apply px-5 pt-1 pb-2;
  }
  /* line 221, app/assets/stylesheets/application.tailwind.css */
  .v2-nav-select {
    @apply w-full text-sm rounded-lg px-3 py-2 outline-none border cursor-pointer;
    background-color: var(--v2-sidebar-hover-bg);
    border-color: var(--v2-sidebar-divider);
    color: var(--v2-sidebar-hover-text);
  }
  /* line 227, app/assets/stylesheets/application.tailwind.css */
  .v2-nav-select:focus {
    border-color: var(--v2-sidebar-active-bg);
  }
  /* line 230, app/assets/stylesheets/application.tailwind.css */
  .v2-nav-aside {
    @apply w-full;
  }
  /* line 233, app/assets/stylesheets/application.tailwind.css */
  .v2-nav-link {
    @apply flex items-center px-5 py-2.5 text-sm font-medium transition-colors duration-150 select-none;
    color: var(--v2-sidebar-text);
    text-decoration: none;
  }
  /* line 238, app/assets/stylesheets/application.tailwind.css */
  .v2-nav-link:hover {
    background-color: var(--v2-sidebar-hover-bg);
    color: var(--v2-sidebar-hover-text);
    text-decoration: none;
  }
  /* line 243, app/assets/stylesheets/application.tailwind.css */
  .v2-nav-link-active {
    background-color: var(--v2-sidebar-active-bg);
    color: var(--v2-sidebar-active-text);
    font-weight: 600;
  }
  /* line 248, app/assets/stylesheets/application.tailwind.css */
  .v2-nav-link-active:hover {
    background-color: var(--v2-sidebar-active-bg);
    color: var(--v2-sidebar-active-text);
  }
  /* line 252, app/assets/stylesheets/application.tailwind.css */
  .v2-nav-divider {
    @apply mx-5 my-3;
    border: none;
    border-top: 1px solid var(--v2-sidebar-divider);
  }
  /* line 257, app/assets/stylesheets/application.tailwind.css */
  .v2-nav-section-label {
    @apply px-5 pb-1 pt-2 text-xs font-semibold uppercase tracking-widest;
    color: var(--v2-sidebar-text);
    opacity: 0.55;
  }
  /* Tables */
  /* line 264, app/assets/stylesheets/application.tailwind.css */
  .v2-table {
    @apply w-full text-sm rounded-xl overflow-hidden;
    background-color: var(--v2-surface-bg);
    border: 1px solid var(--v2-surface-border);
    box-shadow: var(--v2-surface-shadow);
    border-collapse: separate;
    border-spacing: 0;
  }
  /* line 272, app/assets/stylesheets/application.tailwind.css */
  .v2-th {
    @apply px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide;
    background-color: var(--v2-table-header-bg);
    border-bottom: 1px solid var(--v2-surface-border);
    color: var(--v2-text-secondary);
  }
  /* line 278, app/assets/stylesheets/application.tailwind.css */
  .v2-th:first-child {
    border-radius: 0.75rem 0 0 0;
  }
  /* line 279, app/assets/stylesheets/application.tailwind.css */
  .v2-th:last-child {
    border-radius: 0 0.75rem 0 0;
  }
  /* line 280, app/assets/stylesheets/application.tailwind.css */
  .v2-td {
    @apply px-5 py-3;
    border-bottom: 1px solid var(--v2-surface-border);
    color: var(--v2-text-primary);
    transition: background-color 100ms;
  }
  /* line 286, app/assets/stylesheets/application.tailwind.css */
  .v2-td-actions {
    @apply px-4 py-2 flex items-center gap-1.5 flex-wrap;
    border-bottom: 1px solid var(--v2-surface-border);
    transition: background-color 100ms;
  }
  /* line 291, app/assets/stylesheets/application.tailwind.css */
  .v2-table tbody tr:hover .v2-td,
.v2-table tbody tr:hover .v2-td-actions {
    background-color: var(--v2-table-row-hover);
  }
  /* line 295, app/assets/stylesheets/application.tailwind.css */
  .v2-table tbody tr:last-child .v2-td,
.v2-table tbody tr:last-child .v2-td-actions {
    border-bottom: none;
  }
  /* line 299, app/assets/stylesheets/application.tailwind.css */
  .v2-table tbody tr:last-child .v2-td:first-child {
    border-radius: 0 0 0 0.75rem;
  }
  /* line 300, app/assets/stylesheets/application.tailwind.css */
  .v2-table tbody tr:last-child .v2-td:last-child,
.v2-table tbody tr:last-child .v2-td-actions:last-child {
    border-radius: 0 0 0.75rem 0;
  }
  /* Buttons */
  /* line 304, app/assets/stylesheets/application.tailwind.css */
  .v2-btn-primary {
    @apply inline-flex items-center px-3 py-1.5 text-xs font-semibold rounded-md transition-colors duration-150 cursor-pointer whitespace-nowrap;
    color: var(--v2-btn-primary-text);
    background-color: var(--v2-btn-primary-bg);
    border: none;
  }
  /* line 310, app/assets/stylesheets/application.tailwind.css */
  .v2-btn-primary:hover {
    background-color: var(--v2-btn-primary-hover);
  }
  /* line 312, app/assets/stylesheets/application.tailwind.css */
  .v2-btn-danger {
    @apply inline-flex items-center px-3 py-1.5 text-xs font-semibold rounded-md transition-colors duration-150 cursor-pointer whitespace-nowrap;
    color: var(--v2-btn-danger-text);
    background-color: var(--v2-btn-danger-bg);
    border: none;
  }
  /* line 318, app/assets/stylesheets/application.tailwind.css */
  .v2-btn-danger:hover {
    background-color: var(--v2-btn-danger-hover);
  }
  /* line 320, app/assets/stylesheets/application.tailwind.css */
  .v2-btn-action {
    @apply inline-flex items-center px-4 py-2 text-sm font-semibold rounded-lg transition-colors duration-150 cursor-pointer whitespace-nowrap;
    color: var(--v2-btn-action-text);
    background-color: var(--v2-btn-action-bg);
    border: none;
    box-shadow: var(--v2-surface-shadow);
    text-decoration: none;
  }
  /* line 328, app/assets/stylesheets/application.tailwind.css */
  .v2-btn-action:hover {
    background-color: var(--v2-btn-action-hover);
    color: var(--v2-btn-action-text);
    text-decoration: none;
  }
  /* Dashboard stat cards */
  /* line 335, app/assets/stylesheets/application.tailwind.css */
  .v2-card-container {
    @apply w-full grid gap-5;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  /* line 339, app/assets/stylesheets/application.tailwind.css */
  .v2-card-grid {
    @apply contents;
  }
  /* line 340, app/assets/stylesheets/application.tailwind.css */
  .v2-card,
.v2-card-alt {
    @apply p-5 rounded-xl flex flex-col gap-1;
    background-color: var(--v2-surface-bg);
    border: 1px solid var(--v2-surface-border);
    border-top: 4px solid var(--v2-card-accent);
    box-shadow: var(--v2-surface-shadow);
  }
  /* line 348, app/assets/stylesheets/application.tailwind.css */
  .v2-card-alt {
    border-top-color: var(--v2-card-alt-accent);
  }
  /* line 349, app/assets/stylesheets/application.tailwind.css */
  .v2-card-alert {
    @apply p-5 rounded-xl flex flex-col gap-1;
    background-color: var(--v2-card-alert-bg);
    border: 1px solid var(--v2-surface-border);
    border-top: 4px solid var(--v2-card-alert-accent);
    box-shadow: var(--v2-surface-shadow);
  }
  /* line 356, app/assets/stylesheets/application.tailwind.css */
  .v2-card-title {
    @apply text-xs font-semibold uppercase tracking-wide;
    color: var(--v2-text-secondary);
  }
  /* line 360, app/assets/stylesheets/application.tailwind.css */
  .v2-card-value {
    @apply text-3xl font-bold tabular-nums mt-1;
    color: var(--v2-text-primary);
  }
  /* Filter / stats bar */
  /* line 366, app/assets/stylesheets/application.tailwind.css */
  .v2-filter-bar {
    @apply mb-6 p-4 rounded-xl flex items-center gap-4 flex-wrap;
    background-color: var(--v2-surface-bg);
    border: 1px solid var(--v2-surface-border);
    box-shadow: var(--v2-surface-shadow);
  }
  /* line 372, app/assets/stylesheets/application.tailwind.css */
  .v2-filter-select {
    @apply text-sm rounded-lg px-3 py-1.5 outline-none border;
    background-color: var(--v2-surface-bg);
    border-color: var(--v2-surface-border);
    color: var(--v2-text-primary);
  }
  /* line 378, app/assets/stylesheets/application.tailwind.css */
  .v2-filter-select:focus {
    border-color: var(--v2-btn-primary-bg);
  }
  /* line 379, app/assets/stylesheets/application.tailwind.css */
  .v2-filter-select-inline {
    @apply text-xs font-semibold rounded-md px-2 py-1 outline-none border cursor-pointer;
    background-color: var(--v2-table-header-bg);
    border-color: var(--v2-surface-border);
    color: var(--v2-text-secondary);
  }
  /* line 385, app/assets/stylesheets/application.tailwind.css */
  .v2-stat-count {
    @apply text-3xl font-bold tabular-nums;
    color: var(--v2-text-primary);
  }
  /* line 389, app/assets/stylesheets/application.tailwind.css */
  .v2-stat-label {
    @apply text-sm;
    color: var(--v2-text-secondary);
  }
  /* Forms */
  /* line 395, app/assets/stylesheets/application.tailwind.css */
  .v2-form-card {
    @apply p-6 rounded-xl max-w-lg;
    background-color: var(--v2-surface-bg);
    border: 1px solid var(--v2-surface-border);
    box-shadow: var(--v2-surface-shadow-lg);
  }
  /* line 401, app/assets/stylesheets/application.tailwind.css */
  .v2-form-row {
    @apply flex items-center gap-3 py-2;
  }
  /* line 404, app/assets/stylesheets/application.tailwind.css */
  .v2-form-label {
    @apply text-sm font-medium w-32 flex-none;
    color: var(--v2-text-secondary);
  }
  /* line 408, app/assets/stylesheets/application.tailwind.css */
  .v2-form-input {
    @apply flex-1 text-sm px-3 py-1.5 rounded-lg border outline-none transition-colors duration-150;
    border-color: var(--v2-surface-border);
    color: var(--v2-text-primary);
    background-color: var(--v2-surface-bg);
  }
  /* line 414, app/assets/stylesheets/application.tailwind.css */
  .v2-form-input:focus {
    border-color: var(--v2-btn-primary-bg);
  }
  /* line 415, app/assets/stylesheets/application.tailwind.css */
  .v2-form-field {
    @apply flex-1 flex flex-col gap-1;
  }
  /* line 418, app/assets/stylesheets/application.tailwind.css */
  .v2-form-hint {
    @apply text-xs;
    color: var(--v2-text-secondary);
  }
  /* line 422, app/assets/stylesheets/application.tailwind.css */
  .v2-form-file-label {
    @apply block text-sm font-medium mb-2;
    color: var(--v2-text-secondary);
  }
  /* line 426, app/assets/stylesheets/application.tailwind.css */
  .v2-form-file {
    @apply text-sm rounded-lg px-3 py-2 w-full border outline-none;
    border-color: var(--v2-surface-border);
    color: var(--v2-text-primary);
    background-color: var(--v2-surface-bg);
  }
  /* Status badges */
  /* line 434, app/assets/stylesheets/application.tailwind.css */
  .v2-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  /* line 437, app/assets/stylesheets/application.tailwind.css */
  .v2-badge-success {
    background-color: var(--v2-badge-success-bg);
    color: var(--v2-badge-success-text);
  }
  /* line 441, app/assets/stylesheets/application.tailwind.css */
  .v2-badge-pending {
    background-color: var(--v2-badge-pending-bg);
    color: var(--v2-badge-pending-text);
  }
  /* line 445, app/assets/stylesheets/application.tailwind.css */
  .v2-badge-danger {
    background-color: var(--v2-badge-danger-bg);
    color: var(--v2-badge-danger-text);
  }
  /* line 450, app/assets/stylesheets/application.tailwind.css */
  .v2-chart-card {
    @apply p-5 rounded-xl;
    background-color: var(--v2-surface-bg);
    border: 1px solid var(--v2-surface-border);
    box-shadow: var(--v2-surface-shadow);
  }
  /* Warning notice — for telling an admin something about the page they would
     otherwise have to be told in person, such as that its values are not live.
     Borrowed from the pending badge's colours so it reads as a caution in
     either theme. */
  /* line 461, app/assets/stylesheets/application.tailwind.css */
  .v2-notice-warning {
    @apply rounded-lg border-l-4 px-4 py-3 mb-6 text-sm;
    background-color: var(--v2-badge-pending-bg);
    border-color: var(--v2-badge-pending-text);
    color: var(--v2-badge-pending-text);
  }
  /* line 468, app/assets/stylesheets/application.tailwind.css */
  .v2-notice-warning strong {
    @apply block text-base font-semibold mb-1;
  }
  /* line 472, app/assets/stylesheets/application.tailwind.css */
  .v2-notice-warning p {
    @apply leading-relaxed;
  }
  /* Login page */
  /* line 477, app/assets/stylesheets/application.tailwind.css */
  .v2-login-page {
    @apply min-h-screen flex items-center justify-center;
    background-color: var(--v2-page-bg);
  }
  /* line 481, app/assets/stylesheets/application.tailwind.css */
  .v2-login-card {
    @apply w-80 p-8 rounded-2xl;
    background-color: var(--v2-surface-bg);
    border: 1px solid var(--v2-surface-border);
    box-shadow: var(--v2-surface-shadow-lg);
  }
  /* line 487, app/assets/stylesheets/application.tailwind.css */
  .v2-login-title {
    @apply text-xl font-bold mb-6 text-center;
    color: var(--v2-text-primary);
  }
  /* line 491, app/assets/stylesheets/application.tailwind.css */
  .v2-login-btn {
    @apply w-full py-2.5 text-sm font-semibold rounded-lg transition-colors duration-150 cursor-pointer;
    color: var(--v2-btn-primary-text);
    background-color: var(--v2-btn-primary-bg);
    border: none;
  }
  /* line 497, app/assets/stylesheets/application.tailwind.css */
  .v2-login-btn:hover {
    background-color: var(--v2-btn-primary-hover);
  }
}

/* line 20, app/assets/stylesheets/application.scss */
:root {
  /* Default root size */
  font-size: clamp(0.75rem, calc(1vw + 0.5rem), 20px);
  line-height: calc(1vw + 1.5rem);
  font-family: 'GothamNarrow', sans-serif;
  font-weight: 300;
}

/* line 27, app/assets/stylesheets/application.scss */
.content {
  margin: 0 auto;
  padding: calc(1vw + 1rem) calc(1vw + 1rem);
}

/* line 33, app/assets/stylesheets/application.scss */
h1, h2, h3, h4 {
  color: #002e59;
  font-size: 2rem;
  line-height: 2rem;
  margin: 1rem 0;
}

/* line 39, app/assets/stylesheets/application.scss */
h2 {
  font-size: 1.5rem;
  line-height: 2rem;
}

/* line 43, app/assets/stylesheets/application.scss */
h3 {
  font-size: 1.2rem;
  line-height: 1.5rem;
}

/* line 47, app/assets/stylesheets/application.scss */
h4 {
  font-size: 1rem;
  line-height: 1.2rem;
}

/* line 51, app/assets/stylesheets/application.scss */
hr {
  border-width: 2px;
}

/* line 54, app/assets/stylesheets/application.scss */
a {
  color: #0065ca;
}

/* line 56, app/assets/stylesheets/application.scss */
a:hover {
  text-decoration: underline;
}

/* line 60, app/assets/stylesheets/application.scss */
p {
  font-size: 1.2rem;
  line-height: 1.8rem;
}

/* line 66, app/assets/stylesheets/application.scss */
.cta {
  background-color: #54722d;
  color: #fff;
  font-size: 1.8rem;
  margin: calc(1vw + 1rem) auto;
  padding: clamp(0.75rem, calc(1vw + 2rem), 33px);
  border-radius: .5rem;
  border-color: #54722d;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
  display: block;
  width: fit-content;
}

/* line 79, app/assets/stylesheets/application.scss */
.cta:hover {
  background-color: rgba(84, 114, 45, 0.8);
  cursor: pointer;
}

/* line 85, app/assets/stylesheets/application.scss */
header .content {
  padding: 0 calc(1vw + 1rem);
}

/* line 88, app/assets/stylesheets/application.scss */
.usaa-header,
.affinity-header {
  color: #fff;
  background-color: #123a5c;
  padding: calc(1vw + 0.5rem) 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
}

/* line 97, app/assets/stylesheets/application.scss */
.usaa-header a,
.affinity-header a {
  color: #fff;
}

/* line 99, app/assets/stylesheets/application.scss */
.sub-header {
  display: flex;
  justify-content: space-between;
  margin: calc(1vw + 1.5rem) auto;
}

/* line 104, app/assets/stylesheets/application.scss */
.usaa-perks-logo {
  max-height: calc(1vw + 2rem);
}

/* line 113, app/assets/stylesheets/application.scss */
.affinity-logo {
  max-height: calc(1vw + 2rem);
  align-self: center;
}

/* line 121, app/assets/stylesheets/application.scss */
.affinity-logo-link {
  display: flex;
  align-self: center;
}

/* line 128, app/assets/stylesheets/application.scss */
.affinity-name {
  display: flex;
  align-items: center;
  font-size: calc(0.5vw + 1rem);
  font-weight: 600;
  color: #123a5c;
}

/* line 137, app/assets/stylesheets/application.scss */
.powered-by {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: end;
}

/* line 143, app/assets/stylesheets/application.scss */
.powered-by span {
  margin-right: calc(1vw + 1rem);
}

/* line 146, app/assets/stylesheets/application.scss */
.powered-by img {
  max-height: calc(1vw + 1.5rem);
}

/* line 151, app/assets/stylesheets/application.scss */
.hero {
  display: flex;
  height: calc(1vw + 25rem);
  max-height: 70vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 85%;
}

/* line 166, app/assets/stylesheets/application.scss */
.hero .oem, .hero .oem .content {
  display: flex;
  align-self: flex-end;
  background-color: #000;
  flex-grow: 1;
}

/* line 172, app/assets/stylesheets/application.scss */
.hero .oem .content {
  justify-content: space-between;
  align-items: flex-end;
  padding: calc(1vw + 0.8rem) calc(1vw + 1rem);
}

/* line 177, app/assets/stylesheets/application.scss */
.hero .oem img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

/* line 182, app/assets/stylesheets/application.scss */
.hero .oem .oem-name {
  height: calc(1vw + .8rem);
}

/* line 185, app/assets/stylesheets/application.scss */
.hero .oem .oem-logo {
  height: calc(1vw + 3rem);
}

/* line 190, app/assets/stylesheets/application.scss */
.incentive-details {
  text-align: center;
  justify-content: center;
}

/* line 196, app/assets/stylesheets/application.scss */
.how-it-works {
  justify-items: center;
}

/* line 199, app/assets/stylesheets/application.scss */
.how-it-works ol {
  margin: 0 calc(1vw + 0.8rem);
  list-style: none;
  counter-reset: list-counter;
  /* Resets counter */
  padding-left: 0;
}

/* line 205, app/assets/stylesheets/application.scss */
.how-it-works ol li {
  counter-increment: list-counter;
  /* Increments counter */
  display: flex;
  align-items: center;
  margin: 2rem auto 1rem;
}

/* line 214, app/assets/stylesheets/application.scss */
.how-it-works ol li::before {
  content: counter(list-counter);
  /* Displays counter */
  font-weight: bold;
  font-size: 2rem;
  width: clamp(0.75rem, calc(1vw + 3rem), 5rem);
  height: clamp(0.75rem, calc(1vw + 3rem), 5rem);
  line-height: 3.5rem;
  justify-content: center;
  margin-right: 1.5rem;
  background-color: #002e59;
  color: white;
  border-radius: 50%;
  display: inline-flex;
  flex-shrink: 0;
}

/* line 231, app/assets/stylesheets/application.scss */
.what-are-member-incentives {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 40%;
  background-color: #5598bd;
  max-height: 70vh;
  position: relative;
  text-align: center;
  color: #1f2937;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  height: calc(1vw + 38rem);
}

/* line 260, app/assets/stylesheets/application.scss */
.what-are-member-incentives h1 {
  color: #1f2937;
}

/* line 274, app/assets/stylesheets/application.scss */
.what-are-member-incentives::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: min(max(60%, 24rem), 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* line 301, app/assets/stylesheets/application.scss */
.what-are-member-incentives .content {
  position: relative;
}

/* line 310, app/assets/stylesheets/application.scss */
.eligible-models {
  text-align: center;
}

/* line 313, app/assets/stylesheets/application.scss */
.eligible-models h1 {
  letter-spacing: -0.05rem;
}

/* line 316, app/assets/stylesheets/application.scss */
.eligible-models ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 2 equal columns */
  gap: 1.5rem 1rem;
  /* Space between items */
  list-style: none;
  margin-top: 3rem;
}

/* line 323, app/assets/stylesheets/application.scss */
.eligible-models ul li {
  justify-items: center;
  width: 100%;
}

/* line 327, app/assets/stylesheets/application.scss */
.eligible-models ul li img {
  width: 90%;
}

/* line 330, app/assets/stylesheets/application.scss */
.eligible-models ul li h2 {
  color: #000;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 337, app/assets/stylesheets/application.scss */
.eligible-models ul li h4 {
  font-size: 1.8rem;
  line-height: 2rem;
}

/* line 341, app/assets/stylesheets/application.scss */
.eligible-models ul li h4,
.eligible-models ul li h3 {
  color: #53722d;
  font-weight: 700;
}

/* line 348, app/assets/stylesheets/application.scss */
.registration.content {
  padding-top: 0;
}

/* line 351, app/assets/stylesheets/application.scss */
.registration .info-card {
  margin-bottom: 0.5rem;
}

/* line 354, app/assets/stylesheets/application.scss */
.registration .registration-form {
  margin: 2rem 0;
}

/* line 357, app/assets/stylesheets/application.scss */
.registration .registration-form-fields {
  display: grid;
  gap: 10px;
}

/* line 362, app/assets/stylesheets/application.scss */
.input-group {
  height: 6rem;
}

/* line 367, app/assets/stylesheets/application.scss */
.error-msg {
  color: red;
  font-style: italic;
  font-size: .8rem;
  display: none;
  margin: 0;
}

/* line 375, app/assets/stylesheets/application.scss */
input.input-error,
.input-error {
  border: 1px solid red;
}

/* line 380, app/assets/stylesheets/application.scss */
label {
  font-size: 1.2rem;
  display: block;
}

/* line 386, app/assets/stylesheets/application.scss */
input {
  border: 1px solid #0f0f0f;
  padding: .5rem;
  font-size: 1.2rem;
  width: 100%;
}

/* line 392, app/assets/stylesheets/application.scss */
input::placeholder {
  font-style: italic;
}

/* line 395, app/assets/stylesheets/application.scss */
input:focus {
  border-color: #002e59;
}

/* line 398, app/assets/stylesheets/application.scss */
input[type="checkbox"] {
  width: 2rem;
  height: 2rem;
  margin: 1rem 1rem 1rem 0;
}

/* line 404, app/assets/stylesheets/application.scss */
.tac {
  display: flex;
  align-items: center;
}

/* line 408, app/assets/stylesheets/application.scss */
.tac-checkbox-label {
  font-size: 1.4rem;
  font-style: italic;
}

/* line 415, app/assets/stylesheets/application.scss */
.coupon.content {
  padding-top: 0;
}

/* line 418, app/assets/stylesheets/application.scss */
.coupon hr {
  margin: 2.5rem auto;
}

/* line 421, app/assets/stylesheets/application.scss */
.coupon .oem-logo {
  width: clamp(3rem, 80vw, 15rem);
  height: auto;
  margin: 2rem auto;
}

/* line 426, app/assets/stylesheets/application.scss */
.coupon .offer-code-label,
.coupon .offer-code {
  font-weight: 400;
  text-align: center;
}

/* line 431, app/assets/stylesheets/application.scss */
.coupon .offer-code-label {
  font-size: 2rem;
  margin-bottom: calc(1vw + 1.5rem);
  color: #002e59;
}

/* line 436, app/assets/stylesheets/application.scss */
.coupon .offer-code {
  font-size: calc(1vw + 3.3rem);
  color: #000;
}

/* line 442, app/assets/stylesheets/application.scss */
.print-form .oem-logo {
  width: clamp(3rem, 10vw, 15rem);
  height: auto;
  display: block;
  margin: 0 auto 2rem;
}

/* line 448, app/assets/stylesheets/application.scss */
.print-form section {
  margin-top: 2rem;
}

/* line 451, app/assets/stylesheets/application.scss */
.pricing-table {
  width: 95%;
  margin: 2rem auto;
}

/* line 455, app/assets/stylesheets/application.scss */
.pricing-table h2 {
  margin-bottom: 0;
}

/* line 458, app/assets/stylesheets/application.scss */
.pricing-table p {
  margin-top: 0;
}

/* line 461, app/assets/stylesheets/application.scss */
.print-form table {
  width: 100%;
  border: 1px solid #ccc;
  border-spacing: 0;
}

/* line 466, app/assets/stylesheets/application.scss */
.print-form table tr th {
  padding: 0 .5rem;
  border: 1px solid #ddd;
  background-color: #ccc;
}

/* line 471, app/assets/stylesheets/application.scss */
.print-form table tr td {
  padding: 0 .5rem;
  border: 1px solid #ccc;
  width: 25%;
}

/* line 476, app/assets/stylesheets/application.scss */
.print-form table tr:nth-child(odd) {
  background-color: #fff;
}

/* line 479, app/assets/stylesheets/application.scss */
.print-form table tr:nth-child(even) {
  background-color: #f5f5f5;
}

/* line 482, app/assets/stylesheets/application.scss */
.print-form .eligible-models {
  font-style: italic;
  text-align: left;
  margin-top: 1rem;
  font-size: 1rem;
}

/* line 488, app/assets/stylesheets/application.scss */
.contact-oem-form tr td:nth-child(odd) {
  background-color: #eee;
  font-weight: bold;
}

/* line 492, app/assets/stylesheets/application.scss */
.print-form .fine-print ol {
  padding-left: 2rem;
}

/* line 495, app/assets/stylesheets/application.scss */
.contact-dealer-form td {
  vertical-align: top;
  font-weight: 700;
}

/* line 499, app/assets/stylesheets/application.scss */
.contact-dealer-form td,
.contact-oem-form td {
  width: 50%;
  height: 3.2rem;
  line-height: 1.8rem;
}

/* line 505, app/assets/stylesheets/application.scss */
.contact-dealer-form td div {
  font-weight: 300;
}

/* line 510, app/assets/stylesheets/application.scss */
.disclosures {
  background-color: #ebeae7;
  padding: 1rem 2rem;
}

/* line 514, app/assets/stylesheets/application.scss */
.disclosures p {
  font-size: clamp(0.6rem, 0.85vw, 0.8rem);
  line-height: 1.4;
  margin-bottom: 0.4em;
}

/* Plus size phones (≥ 430px) */
@media (min-width: 430px) {
  /* line 522, app/assets/stylesheets/application.scss */
  .hero {
    height: calc(1vw + 27rem);
  }
  /* line 527, app/assets/stylesheets/application.scss */
  .what-are-member-incentives {
    height: calc(1vw + 40rem);
  }
}

/* Tablets (≥ 600px) */
@media (min-width: 600px) {
  /* Styles for tablets */
}

/* Small Laptops (≥ 768px) */
@media (min-width: 768px) {
  /* line 538, app/assets/stylesheets/application.scss */
  .hero {
    height: calc(1vw + 37rem);
  }
  /* line 543, app/assets/stylesheets/application.scss */
  .what-are-member-incentives {
    height: calc(1vw + 46rem);
  }
  /* line 548, app/assets/stylesheets/application.scss */
  .eligible-models ul {
    /* 3 equal columns */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* line 553, app/assets/stylesheets/application.scss */
  .registration .registration-form-fields {
    display: grid;
    /* 2 equal columns */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* line 558, app/assets/stylesheets/application.scss */
  .input-group {
    height: 7rem;
  }
}

/* Desktops (≥ 1024px) */
@media (min-width: 1024px) {
  /* Styles for desktops */
  /* line 566, app/assets/stylesheets/application.scss */
  .content {
    max-width: 1024px;
  }
  /* line 570, app/assets/stylesheets/application.scss */
  .hero {
    height: calc(1vw + 41rem);
  }
  /* line 575, app/assets/stylesheets/application.scss */
  .what-are-member-incentives {
    height: calc(1vw + 49rem);
  }
}

/* Large Screens (≥ 1440px) */
@media (min-width: 1440px) {
  /* Styles for large screens */
  /* line 586, app/assets/stylesheets/application.scss */
  .hero {
    background-size: cover;
  }
}