:root {
  --rb-blue:        #0D4B78;
  --rb-light-blue:  #8CD8F4;
  --rb-medium-blue: #4291d7;
  --rb-white:       #ffffff;
  --rb-dark:        #062B46;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.dm-view { display: none; }

body {
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  background: var(--rb-blue);
  color: var(--rb-white);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* ─── ROOT (GRID) ─── */
.dm-root-container {
  width: 100%;
  max-width: 1280px;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  background: var(--rb-blue);
}

/* ─── TOOLBAR & LOGO ─── */
.dm-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0 2rem;
  background: var(--rb-blue);
}

.dm-toolbar-left {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 190px;
  max-width: 280px;
  width: clamp(190px,18vw,280px);
  aspect-ratio: 280/64;
  margin-right: 1rem;
}
.dm-logo-container {
  display: block;
  width: 100%;
  height: 100%;
}
.dm-logo-container picture,
.dm-logo-container img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Right side nav — always grows to fill leftover, never shrinks below (toolbar width − max logo width) */
.dm-toolbar-right {
  /* ❶ Zero out flex‐basis so flex-grow takes *all* free space */
  flex: 1 1 0%;
  /* ❷ Even when logo is at its 280px max, keep nav at least this wide */
  min-width: calc(100% - 280px);
  display: flex;
  justify-content: flex-end;
  overflow-x: auto;
}

/* Keep your custom scrollbar styling */
.dm-toolbar-right::-webkit-scrollbar {
  height: 6px;
}
.dm-toolbar-right::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}
.dm-toolbar-right::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
}


/* ─── NAVIGATION ─── */
.dm-nav {
  display: flex;
  gap: 1rem;
}
.dm-nav a {
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--rb-white);
  text-decoration: none;
  font-size: 1rem;
  position: relative;
  transition: background .2s, color .2s;
}
.dm-nav a:hover {
  background: rgba(255,255,255,0.1);
  color: var(--rb-light-blue);
  border-radius: 4px;
}
.dm-nav a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--rb-light-blue);
}



.dm-content {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
}

/* shared utilities */
.lead {
  font-size: 1.25rem;
  margin: 0.75rem 0;
}
ul.bullets {
  margin: 0.5rem 0 1.5rem 1.5rem;
}
ul.bullets li {
  margin-bottom: 0.4rem;
}

/* HOME */
#home-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
}
.home-title {
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.5rem;
}
.cta-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 2rem;
}

/* CTA button */
.btn-primary {
  width: 280px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg,#8CD8F4 0%,#fff 100%);
  color: var(--rb-blue);
  border: none;
  border-radius: 8px;
  font-size: 1.25rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform .2s;
}
.btn-primary img {
  height: 48px;
  margin-right: 0.7em;
}
.btn-primary:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg,#062B46 0%,#0D4B78 100%);
  color: var(--rb-light-blue);
  transition: background .2s, color .2s, transform .2s;
}

/* fade-in/out */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeOut{ from { opacity: 1 } to { opacity: 0 } }
.btn-primary.fade-in  { animation: fadeIn 1s ease-in forwards; }
.btn-primary.fade-out { animation: fadeOut 1s ease-out forwards; }
.btn-primary.skapa    { transition: opacity .5s ease-in; }

/* features & why-us */
.feature-list {
  list-style: none;
  margin: 1.5rem 0 2rem;
}
.why-us-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 80%;
  max-width: 600px;
}
.why-row {
  background: rgba(255,255,255,0.1);
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.why-row i {
  font-size: 1.5rem;
  color: var(--rb-light-blue);
  min-width: 32px;
  text-align: center;
}

/* ---------- PRICING ------------ */
.pricing-cards {
  display: flex;
  gap: 1rem;
  margin: 1rem 0 2rem;
  flex-wrap: wrap;
}
.pricing-cards .card {
  flex: 1 1 240px;
  background: var(--rb-dark);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  text-align: center;
}
.card h3 {
  margin-bottom: 0.5rem;
  color: var(--rb-light-blue);
}
.card .price {
  font-size: 1.5rem;
  margin: 0.25rem 0;
}
.card .price span {
  font-size: 0.9rem;
  font-weight: normal;
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
.pricing-table th,
.pricing-table td {
  padding: 0.75rem;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.15);
}
.pricing-table th {
  background: var(--rb-light-blue);
  color: var(--rb-blue);
}
.pricing-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.05);
}

/* ---------- AI grid ------------ */
.ai-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
}
.ai-card {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
.ai-card h3 {
  color: var(--rb-light-blue);
  margin-bottom: 0.5rem;
}
.ai-card .what {
  font-weight: bold;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
.ai-card .business {
  font-size: 0.9rem;
  opacity: 0.85;
}
/* —— AI-FUNKTIONER TABLE —— */
.ai-table {
  display: grid;
  grid-template-columns: minmax(200px,1fr) 2fr 2fr;
  gap: 1px;
  background: var(--rb-blue);
}
.ai-row {
  display: contents; /* allow the cells to form grid rows */
}
.ai-header .ai-cell {
  background: var(--rb-dark);
  color: var(--rb-white);
  font-weight: bold;
}
.ai-cell {
  background: var(--rb-medium-blue);
  color: var(--rb-white);
  padding: 1rem;
  font-size: 0.95rem;
  line-height: 1.4;
  border-radius: 8px;
}
.ai-row:nth-child(even) .ai-cell {
  background: rgba(255,255,255,0.2);
}
/* make header cells stand out */
.ai-header .ai-cell:nth-child(1) { text-align: left; }
.ai-header .ai-cell { text-align: center; }
/* ensure long text wraps nicely */
.ai-cell p,
.ai-cell {
  margin: 0;
  word-wrap: break-word;
}

/* SKICKA section layout */
.send-container {
  display: flex;
  flex-direction: column;  /* always stack vertically */
  gap: 1.5rem;
}
/* Individual box wrapper */
.send-box {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Header line */
.send-box .box-header {
  background: var(--rb-light-blue);
  color: var(--rb-blue);
  padding: 1rem;
  font-weight: bold;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.send-box .box-header i {
  font-size: 1.5rem;
}
/* Body area */
.send-box .box-body {
  padding: 1rem;
  color: var(--rb-white);
}
.send-box .box-body p {
  margin-bottom: 1rem;
}
.send-box .box-body ul {
  list-style: disc inside;
  margin: 0;
  padding-left: 1rem;
}
.send-box .box-body li {
  margin-bottom: 0.75rem;
}

/* —— Kivra box overrides —— */
.kivra-box {
  background: #EDF9E2;
}
.kivra-box .box-header {
  background: #003006;
  color: #EDF9E2;
}
/* —— Kivra logo —— */
/* Native size: 127×67px */
.kivra-logo {
  /* ❶ lock the native aspect ratio */
  aspect-ratio: 127 / 67;
  /* ❷ let it scale between 64px and its full width */
  width: clamp(64px, 10vw, 127px);
  /* ❸ height computed by aspect-ratio automatically */
  display: block;            /* avoid inline-gap */
  object-fit: contain;
}
.kivra-box .box-body {
  color: #003006;
}

/* CONTACT form */
#contact-form {
  max-width: 600px;
  margin: 1rem auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#contact-form .form-row {
  display: flex;
  flex-direction: column;
}
#contact-form label {
  margin-bottom: 0.25rem;
  font-weight: bold;
}
#contact-form input,
#contact-form textarea {
  padding: 0.5rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  color: var(--rb-white);
  font-size: 1rem;
}
#contact-form input:focus,
#contact-form textarea:focus {
  outline: none;
  border-color: var(--rb-light-blue);
}
#contact-submit {
  position: relative;
  align-self: flex-start;
  padding: 0.75rem 1.5rem;
  background: var(--rb-light-blue);
  color: var(--rb-blue);
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#contact-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
#contact-submit .btn-spinner {
  font-size: 1rem;
}
#contact-feedback {
  margin-top: 0.5rem;
  font-size: 0.95rem;
}
#contact-feedback.success {
  color: #8CD8F4;
}
#contact-feedback.error {
  color: #F28C8C;
}

/* ---------- footer ------------- */
.dm-footer {
  padding: 1rem;
  text-align: center;
  font-size: 0.9rem;
}

/* === GLOBAL RESPONSIVE OVERRIDES ================================ */

/* Root container adapts to any viewport, but preserves your 1280-px desktop cap */
.dm-root-container {
  width: 100%;
  max-width: 1280px;
  height: 100vh;
}

/* Medium screens: stack nav vertically and shrink logo ---------------- */
@media (max-width: 768px) {

  /* stop vertical centering so fixed toolbar sits at top */
  body {
    align-items: flex-start;
  }

  /* let the page scroll naturally */
  .dm-root-container {
    height: auto;
    border-radius: 0;
  }

  /* toolbar fixed at top */
  .dm-toolbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    padding: 0 1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  }

  /* reserve space below toolbar */
  .dm-content {
    padding: 1rem;
    margin-top: 60px;
  }

  /* stack nav links vertically */
  .dm-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }

  /* ----- LOGO (desktop + mobile, one set of rules) ---------------- */
.dm-logo-container{
  /* ❶  Desktop: 280 px   →   Mobile:  clamp(120 px,18 vw,260 px)              */
  /*     Keeps the logo crisp while allowing it to shrink responsively.       */
  width: clamp(190px,18vw,280px);

  /* ❷  Preserve the original aspect ratio (280 × 64) without hard‑coding     */
  aspect-ratio: 280/64;

  /* ❸  Make the anchor act like a true container                            */
  display:block;
}

/* 100 % rule applies to both <picture> and fallback <img> */
.dm-logo-container picture,
.dm-logo-container img{
  width:100%;
  height:100%;
  display:block;          /* prevent the small inline‑gap below images       */
  object-fit:contain;     /* never distort, always fit inside the rectangle  */
}

}

/* Small screens: 2-column nav grid with 4 rows each ------------------ */
@media (max-width: 480px) {
  .dm-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
}


/* Replace your existing .dm-root-container rules with this: */
.dm-root-container {
  width: 100%;
  max-width: 1280px;
  height: 100vh;

  /* → grid with exactly three rows: toolbar / content / footer */
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  background: var(--rb-blue);
}

/* Make sure the toolbar stays in the first row */
.dm-toolbar {
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 100;
}


/* ─── Login nav‑button ────────────────────────────── */
.login-bankid {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .75rem;                 /* equal click target */
  border-radius: 4px;
  transition: background .2s, color .2s;
}
.login-bankid:hover {
  background: rgba(255,255,255,.1);
  color: var(--rb-light-blue);
}
.bankid-logo-inline {
  height: 30px;                      /* visually matches x‑height of text */
  flex-shrink: 0;
}



/* Content always lives in the second row and scrolls if needed */
.dm-content {
  grid-row: 2;
  overflow-y: auto;
  padding: 2rem;
}

/* Footer sits in the third row */
.dm-footer {
  grid-row: 3;
}
/* —— OpenAI box overrides —— */
.openai-box {
  background: #212121;
  margin-top: 1.5rem; /* a little breathing room */
}
.openai-box .box-header {
  background: #181818;
  color: #FFFFFF;
}
.openai-box .box-body {
  background: #212121;
  color: #AFAFAF;
  padding: 1rem;
}

.openai-box .openai-features {
  list-style: disc inside;
  margin: 0;
  padding: 0.5rem 0 0 1.25rem;
  color: var(--rb-white);
  font-size: 0.95rem;
  line-height: 1.4;
}
.openai-box .openai-features li + li {
  margin-top: 0.5rem;
}

/* —— OpenAI logo —— */
/* Native size: 413×102px */
.openai-logo {
  aspect-ratio: 413 / 102;
  /* let it scale between 120px and its full width */
  width: clamp(120px, 15vw, 413px);
  display: block;
  object-fit: contain;
}

/* ─── MODAL SHELL ─── */
.dm-modal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.65);z-index:1200;
}
.dm-modal .modal-step{
  width:min(95vw,480px);background:#062B46;padding:2rem;border-radius:12px;
  display:flex;flex-direction:column;gap:1rem;animation:fadeIn .3s ease-in;
}
.modal-close{position:absolute;top:1rem;right:1rem;font-size:2rem;
  background:none;border:none;color:#fff;cursor:pointer;}
.bankid-help summary{cursor:pointer;font-weight:bold;margin-bottom:.5rem;}
.bankid-help .small, .modal-step .small{font-size:.85rem;color:#8CD8F4;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.remember{display:flex;align-items:center;gap:.5rem;font-size:.9rem;}
#qr-canvas{border:8px solid #fff;border-radius:8px;background:#fff;}
.btn-secondary{background:#8CD8F4;color:#062B46;border:none;border-radius:6px;
  padding:.6rem 1.2rem;cursor:pointer;font-weight:bold;}


/* STEP 1: Instruction list */
.instructions-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.instructions-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255,255,255,0.1);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.instructions-list li:last-child {
  margin-bottom: 0;
}

/* Icon styling remains the same */
.instructions-list li i {
  font-size: 1.5rem;
  color: var(--rb-light-blue);
  min-width: 32px;
  text-align: center;
}
.instructions-list li.full-width {
  grid-column: span 2;
}

/* Centered form & button */
.centered-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.centered-form label {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  font-size: 1rem;
}
.centered-form input {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: var(--rb-white);
  font-size: 1rem;
  text-align: center;
}
.centered-form input::placeholder {
  color: rgba(255,255,255,0.6);
}
.centered-btn {
  align-self: center;
  width: 200px;
  justify-content: center;
}
/* Style for inline error under the Logga in button */
.bankid-error {
  color: #F28C8C;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}
/* Centered form & button */
.centered-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.centered-form label {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  text-align: center;        /* ← center the label text */
}
.centered-form input {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: var(--rb-white);
  font-size: 1rem;
  text-align: center;
}
.centered-btn {
  align-self: center;
  width: 200px;
  justify-content: center;
}


/* STEP 3 – Tenant form */
#tenant-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#tenant-form .tenant-fields label {
  display: flex;
  flex-direction: column;
  font-size: 0.95rem;
  color: var(--rb-white);
}

#tenant-form .tenant-fields input {
  margin-top: 0.4rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  background: rgba(255,255,255,0.1);
  color: var(--rb-white);
  font-size: 1rem;
}

#tenant-form .tenant-fields input::placeholder {
  color: rgba(255,255,255,0.6);
}

#tenant-form label.full-width {
  display: flex;
  flex-direction: column;
  font-size: 0.95rem;
  color: var(--rb-white);
}

#tenant-form label.full-width input[type="file"] {
  margin-top: 0.4rem;
}

#tenant-save {
  align-self: flex-end;
  padding: 0.75rem 1.5rem;
}
/* STEP 3 modal: ensure plenty of breathing room */
#bankid-step-3.modal-step {
  /* override the default fixed width so our min applies */
  width: auto !important;
  min-width: 625px;
  min-height: 835px;
  /* you can keep your existing padding on .modal-step so the inputs never touch the border */
}
/* new Step 3 footer flex‐container */
.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* logo upload + preview */
.logo-upload {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.logo-preview {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.1); /* shows through transparent PNG */
  border-radius: 3px;
  object-fit: contain;
}

/* custom file‐select button */
.upload-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--rb-medium-blue);
  color: var(--rb-white);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  user-select: none;
}
.upload-btn i {
  font-size: 1.1rem;
}
.upload-btn:hover {
  background: var(--rb-light-blue);
  color: var(--rb-dark);
}

/* hide the real file input */
#logo-input {
  display: none;
}


/* Inline tenant‐form feedback */
.tenant-feedback {
  margin: 0.5rem 0;
  font-size: 0.95rem;
  color: var(--rb-light-blue);
}
.tenant-feedback.error {
  color: #F28C8C;
}
.tenant-feedback.success {
  color: #8CD8F4;
}

/* ─── STEP 4 modal sizing like Step 3 ───────────────────────── */
#bankid-step-4.modal-step {
  width: auto !important;
  min-width: 625px;
  min-height: 835px;
  position: relative;
  padding-bottom: 3rem; /* room for the proceed button */
}

/* “Gå vidare” button */
#proceed-subscription {
  position: absolute;
  bottom: 1.5rem;
  right: 2rem;
}

/* ─── Modern checklist icons ─────────────────────────────────── */
.auth-list {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}
.auth-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255,255,255,0.1);
  padding: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s;
}
.auth-item:hover {
  background: rgba(255,255,255,0.2);
}
.auth-icon {
  color: var(--rb-light-blue);
  font-size: 1.5rem;
  flex-shrink: 0;
}
.checkmark i {
  font-size: 1.4rem;
  color: var(--rb-white);
  flex-shrink: 0;
}
.auth-item.done .checkmark i {
  color: var(--rb-light-blue);
}

/* Container for the three cards */
.auth-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0;
}

/* Each authorization card */
.auth-card {
  display: grid;
  grid-template-columns: 48px 1fr auto 32px;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
}
.auth-card-icon {
  font-size: 1.5rem;
  color: var(--rb-light-blue);
}
.auth-card-body h4 {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  color: var(--rb-white);
}
.auth-card-body p {
  margin: 0;
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
}

/* Branded Kivra button */
.btn-kivra,
.btn-kivra-outline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
}
.btn-kivra {
  background: #003006;
  color: #EDF9E2;
  border: none;
}
.btn-kivra-outline {
  background: transparent;
  color: #EDF9E2;
  border: 2px solid #EDF9E2;
}
.btn-kivra img,
.btn-kivra-outline img {
  height: 1em;
}

/* DynamicMail outline */
.btn-primary-outline {
  background: transparent;
  color: var(--rb-white);
  border: 2px solid var(--rb-white);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-weight: bold;
}

/* Checkmark column */
.checkmark i {
  font-size: 1.4rem;
  color: var(--rb-white);
  transition: color .2s;
}
.auth-card.done .checkmark i {
  color: var(--rb-light-blue);
}



/* ─── Sub-modal shell & content ──────────────────────────────── */
.dm-submodal {
  display: none;
}
.dm-submodal.open {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1300;
}
.dm-submodal .modal-content {
  display: flex;
  flex-direction: column;
  width: 1060px;
  max-width: 95vw;
  height: 90vh;
  background: #062B46;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.dm-submodal .modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: 2rem;
  background: none; border: none; color: #fff;
  cursor: pointer;
}
.dm-submodal h4 {
  margin-bottom: 1rem;
  color: var(--rb-white);
  text-align: center;
}

/* make iframe fill remaining space, 100% width of modal-content */
.terms-frame {
  flex: 1;
  width: 100%;
  min-height: 0;   /* allow flex to control height */
  background: #fff;
  border-radius: 6px;
  border: none;
}

/* push Accept to bottom */
.dm-submodal .accept-btn {
  margin-top: auto;
}

/* Color coding for yes / no */
.pricing-table td .yes {
  display: inline-block;
  color: #56de9f;      /* green‐ish */
  font-weight: bold;
}
.pricing-table td .no {
  display: inline-block;
  color: #f28c8c;      /* red */
  font-weight: bold;
}
/* — Footer logo inline sizing — */
.footer-logo {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  margin: 0 0.1em;
}
.footer-logo img {
  width: 100%;
  height: auto;
}
.footer-logo source {
  width: 100%;
  height: auto;
}
/* disable clicking directly on the checkmark */
.checkmark {
  pointer-events: none;
}

/* card-buttons hover & focus animation */
.focusable {
  transition: transform .15s, box-shadow .15s;
}
.focusable:hover,
.focusable:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  outline: none;
}

/* inline error message above cards */
#legal-error {
  color: #F28C8C;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

/* ensure iframe shows only first page */
.terms-frame {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 6px;
  background: #fff;
  /* page=1 anchor handled in src */
}


.pricing-cards .card.trial {
  background: rgba(255,255,255,0.2);
  border: 2px dashed var(--rb-light-blue);
}
.pricing-cards .card.selected {
  box-shadow: 0 0 0 3px var(--rb-light-blue);
}

.dm-modal .modal-step {
  max-height: 90vh;       /* never taller than 90% of the viewport */
  overflow-y: auto;       /* add a vertical scrollbar when needed */
}


/* ────────────────────────────────────────────────────────── */
/* 1) Never let any FA icon shrink or get clipped by flex */
/* 2) Ensure a tight, unclipped line‐box for each icon     */
/* 3) Force a high‐contrast color on header icons         */
/* ────────────────────────────────────────────────────────── */

.fa-solid,
.fa-regular,
.fa-light,
.fa-duotone,
.fa-brands {
  /* never collapse away in tight flex layouts */
  flex-shrink: 0;
}

i[class*="fa-"] {
  /* force a clean square line-box */
  display: inline-block;
  line-height: 1;
}

/* make header icons pop on both light-blue & dark headers */
.send-box .box-header i,
.login-bankid i,
.home-title i,
.why-row i,
.auth-icon,
.checkmark i {
  /* always white for max contrast (override any inherited color) */
  color: var(--rb-white) !important;
}


/* Inline “button” that sits in text */
.btn-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.25em 0.6em;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--rb-blue);                     /* product-blue text */
  background: var(--rb-white);               /* white fill */
  border: 2px solid var(--rb-white);
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s, color .2s, transform .1s;
}

.btn-inline:hover {
  background: var(--rb-light-blue);
  color: var(--rb-blue);
  transform: translateY(-1px);
}

.btn-inline:active {
  transform: translateY(0);
}

/* ── Responsive video wrapper — reusable anywhere on the site ── */
.video-embed{
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;          /* 1920×1080 → perfect 16:9 */
  width: 100%;
  max-width: 960px;              /* optional visual cap */
  margin: 0 auto 2rem;           /* centre + space below CTA */
}
.video-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}




/* ─── Tenant-chooser list (inside BankID modal) ─── */
.tenant-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;                                /* match modal’s gap */
}

.tenant-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;                             /* same as .instructions-list */
  padding: 1rem;                            /* comfortable touch targets */
  border: 1px solid rgba(255,255,255,0.3);  /* light, semi-transparent border */
  border-radius: 8px;                       /* consistent with other cards */
  background: rgba(255,255,255,0.05);       /* subtle contrast on dark bg */
  cursor: pointer;
  transition: background .2s;
}

.tenant-list li:hover {
  background: rgba(255,255,255,0.1);        /* hover matches other hover cards */
}

.tenant-list img {
  flex-shrink: 0;                           /* never collapse the logo */
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;                       /* soften any square logos */
}




/* ============================================================
   STEP 2b — Company snapshot & Representative selection
   (Append to the END of your main stylesheet)
   ============================================================ */

/* Section container inherits modal look; no width overrides needed here. */
#bankid-step-select-rep h3,
#bankid-step-select-rep h4 {
  margin: 0 0 .5rem 0;
  color: var(--rb-white);
}

#bankid-step-select-rep h4 {
  font-size: 1rem;
  font-weight: 600;
  opacity: .95;
}

/* ---------- Company card ---------- */
.so-company .so-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.so-head {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.so-head i {
  color: var(--rb-light-blue);
}

.so-head .so-title {
  font-weight: 600;
  font-size: 1.05rem;
}

.so-help {
  margin-left: auto;
  opacity: .85;
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: var(--rb-white);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.so-help:hover,
.so-help:focus-visible {
  background: rgba(255,255,255,.12);
  border-color: var(--rb-light-blue);
  outline: none;
  transform: translateY(-1px);
}

.so-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem .75rem;
  margin-top: .5rem;
  font-size: .95rem;
}
.so-foot {
  opacity: .75;
  margin-top: .5rem;
  font-size: .9rem;
}

/* ---------- Representative grid ---------- */
.so-reps-wrap { margin-top: .5rem; }

.so-reps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .75rem;
}

/* Make the rep “cards” actual buttons for keyboard users */
.so-rep-card {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: .75rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.so-rep-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.25);
  transform: translateY(-1px);
}
.so-rep-card:focus-visible {
  outline: 2px solid var(--rb-light-blue);
  outline-offset: 2px;
}

/* Selected state */
.so-rep-card.selected {
  border-color: var(--rb-light-blue);
  box-shadow: 0 0 0 2px rgba(140,216,244,.35);
  background: rgba(140,216,244,.12);
}

/* Contents */
.so-rep-name {
  font-weight: 600;
  letter-spacing: .2px;
}
.so-rep-ssn {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .92rem;
  opacity: .9;
}
.so-rep-roles {
  font-size: .9rem;
  opacity: .8;
}

/* Continue button (disabled look already covered by your .btn-primary styles) */
#so-continue:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 560px) {
  .so-body { grid-template-columns: 1fr; }
  .so-reps { grid-template-columns: 1fr; }
}

/* ---------- Modal safety: never overflow viewport ---------- */
.dm-modal .modal-step {
  max-height: 90vh;         /* ensure vertical scroll when content grows */
  overflow-y: auto;
}

/* ---------- Icon consistency (no clipping in flex) ---------- */
i[class*="fa-"] { display: inline-block; line-height: 1; flex-shrink: 0; }

/* ============================================================
   OPTIONAL: subtle skeleton while your JS fills the company card
   (add .is-loading on #so-company-card or parent while fetching)
   ============================================================ */
.is-loading .so-card,
.is-loading .so-rep-card {
  position: relative;
  overflow: hidden;
}
.is-loading .so-card::after,
.is-loading .so-rep-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
     transparent 0%,
     rgba(255,255,255,.08) 45%,
     rgba(255,255,255,.12) 55%,
     transparent 100%);
  animation: so-shimmer 1.2s infinite;
}
@keyframes so-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }


/* Rep card text: ensure high contrast on dark bg */
.so-rep-name   { color: var(--rb-white); }
.so-rep-ssn    { color: rgba(255,255,255,.9); }
.so-rep-roles  { color: rgba(255,255,255,.85); }

/* Center the BankID button in Step 2b */
#bankid-step-select-rep .form-footer { justify-content: center; }

/* Help sub-modal matches “instructions-list” visuals */
#so-help-modal .instructions-list li i {
  color: var(--rb-light-blue);
}
#so-help-modal .modal-content h4 {
  color: var(--rb-white);
  text-align: center;
  margin-bottom: .75rem;
}



/* ============================================================
   DYNAMIC MAIL — VISUAL UPGRADE PACK 
   ============================================================ */

/* ── Brand variables (extends existing) ───────────────────── */
:root {
  /* Brand (existing) */
  --rb-blue:        #0D4B78;
  --rb-light-blue:  #8CD8F4;
  --rb-medium-blue: #4291d7;
  --rb-white:       #ffffff;
  --rb-dark:        #062B46;

  /* Derived tokens for gradients/glass */
  --rb-bg-1:        #062B46;                 /* deep */
  --rb-bg-2:        #0D4B78;                 /* brand base */
  --rb-bg-3:        #0b3e64;                 /* slightly darker blend */
  --rb-accent-1:    #8CD8F4;                 /* light highlight */
  --rb-accent-2:    #d3f2ff;                 /* pale highlight */
  --rb-card:        rgba(255,255,255,0.06);  /* base surface */
  --rb-card-2:      rgba(255,255,255,0.10);  /* hover surface */
  --rb-border:      rgba(255,255,255,0.16);
  --rb-border-2:    rgba(140,216,244,0.35);
  --rb-ring:        rgba(140,216,244,0.55);
  --rb-shadow:      0 10px 30px rgba(0,0,0,0.35), 0 2px 10px rgba(0,0,0,0.25);
  --rb-shadow-sm:   0 6px 18px rgba(0,0,0,0.25);
  --rb-shadow-xs:   0 2px 8px rgba(0,0,0,0.22);

  /* Background gradient stack */
  --rb-page-gradient:
    radial-gradient(1200px 800px at 10% 0%, rgba(140,216,244,0.12) 0%, rgba(140,216,244,0) 60%),
    radial-gradient(800px 600px at 90% 15%, rgba(211,242,255,0.10) 0%, rgba(211,242,255,0) 70%),
    radial-gradient(900px 700px at 50% 100%, rgba(12,61,100,0.25) 0%, rgba(12,61,100,0) 60%),
    linear-gradient(180deg, var(--rb-bg-3) 0%, var(--rb-bg-2) 60%, var(--rb-bg-1) 100%);

  /* Subtle dot‑noise (no external asset) */
  --rb-noise:
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
}

/* ── Page background enhancement ──────────────────────────── */
body {
  background: var(--rb-bg-2);
  background-image: var(--rb-page-gradient);
  background-attachment: fixed;
  color: var(--rb-white);
}

/* Soft texture overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: var(--rb-noise);
  background-size: 3px 3px;
  opacity: .18;
  mix-blend-mode: overlay;
  z-index: 0;
}

/* Keep app above texture */
.dm-root-container { position: relative; z-index: 1; }

/* ── Root container: glass card + gradient border ─────────── */
.dm-root-container {
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid var(--rb-border);
  box-shadow: var(--rb-shadow);
  overflow: hidden;
}

/* Subtle animated light sweep on the frame */
.dm-root-container::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(140,216,244,0.15), transparent 35%, transparent 65%, rgba(255,255,255,0.08));
  opacity: .35;
  mix-blend-mode: screen;
}

/* Reduce visual weight on small screens */
@media (max-width: 768px) {
  .dm-root-container {
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
}

/* ── Toolbar: translucent glass bar with underglow ───────── */
.dm-toolbar {
  backdrop-filter: saturate(120%) blur(10px);
  background: linear-gradient(180deg, rgba(6,43,70,0.78), rgba(6,43,70,0.55));
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

@supports not (backdrop-filter: blur(10px)) {
  .dm-toolbar { background: rgba(6,43,70,0.92); }
}

/* Active link: branded gradient underline + nicer hover */
.dm-nav a {
  position: relative;
  padding: .4rem .6rem;
  border-radius: 6px;
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.dm-nav a:hover {
  background: rgba(255,255,255,0.10);
  color: var(--rb-light-blue);
  box-shadow: var(--rb-shadow-xs) inset;
  transform: translateY(-1px);
}
.dm-nav a.active::after,
.dm-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: -8px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rb-accent-1), var(--rb-accent-2));
  box-shadow: 0 0 10px rgba(140,216,244,0.6);
}

/* Login chip polish */
.login-bankid {
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border-radius: 8px;
  padding: .35rem .65rem;
}
.login-bankid:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  color: var(--rb-light-blue);
  box-shadow: var(--rb-shadow-xs);
}

/* Language toggles */
.lang-btn {
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  transition: background .2s ease, transform .1s ease, border-color .2s ease;
}
.lang-btn:hover,
.lang-btn.active {
  transform: translateY(-1px);
  border-color: var(--rb-border-2);
}

/* ── Headings & hero title subtle glow ───────────────────── */
.home-title {
  text-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 10px 30px rgba(140,216,244,0.18);
}

/* ── Primary CTA button (brand gradient + sheen) ─────────── */
.btn-primary {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--rb-blue);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85)) padding-box,
    linear-gradient(135deg, var(--rb-accent-1), var(--rb-white)) border-box;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28), 0 6px 16px rgba(12,61,100,0.30);
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .2s ease, color .2s ease, background .2s ease;
}
.btn-primary::before {
  /* sheen line */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(140,216,244,0.20));
  border-radius: inherit;
  mix-blend-mode: screen;
  opacity: .9;
  transition: opacity .2s ease;
  pointer-events: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  color: var(--rb-white);
  background:
    linear-gradient(180deg, rgba(13,75,120,0.85), rgba(6,43,70,0.95)) padding-box,
    linear-gradient(135deg, var(--rb-accent-1), var(--rb-accent-2)) border-box;
  box-shadow: 0 14px 34px rgba(0,0,0,0.38), 0 10px 24px rgba(12,61,100,0.44);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--rb-ring);
  outline-offset: 2px;
}

/* Secondary & outline variants keep theme */
.btn-secondary {
  background: linear-gradient(180deg, rgba(140,216,244,0.95), rgba(140,216,244,0.85));
  color: var(--rb-dark);
  border: 1px solid rgba(140,216,244,0.5);
  box-shadow: var(--rb-shadow-xs);
}
.btn-primary-outline {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 2px solid rgba(255,255,255,0.6);
  color: var(--rb-white);
}
.btn-primary-outline:hover {
  border-color: var(--rb-accent-1);
  color: var(--rb-accent-1);
  box-shadow: var(--rb-shadow-xs);
}

/* Kivra chips get a subtle sheen */
.kivra-box .box-header,
.openai-box .box-header {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.kivra-box .box-header::after,
.openai-box .box-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(140,216,244,0.6), rgba(255,255,255,0));
}

/* ── Cards & content boxes (glass look) ───────────────────── */
.card,
.send-box,
.ai-card,
.so-card,
.so-rep-card,
.auth-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid var(--rb-border);
  border-radius: 10px;
  box-shadow: var(--rb-shadow-sm);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .3s ease;
}

.card:hover,
.send-box:hover,
.ai-card:hover,
.so-rep-card:hover,
.auth-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.32);
  border-color: var(--rb-border-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
}

/* “Selected” frames read stronger but on‑brand */
.pricing-cards .card.selected,
.so-rep-card.selected,
.auth-card.done {
  box-shadow: 0 0 0 3px rgba(140,216,244,0.35), var(--rb-shadow-sm);
  border-color: rgba(140,216,244,0.6);
  background: linear-gradient(180deg, rgba(140,216,244,0.18), rgba(255,255,255,0.06));
}

/* Trial style maintains your dashed accent but lifts surface */
.pricing-cards .card.trial {
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.06));
  border: 2px dashed var(--rb-light-blue);
}

/* Headers inside boxes pop with subtle weight */
.box-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border-bottom: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px 8px 0 0;
}

/* Kivra brand remains, with gentle gradient tint */
.kivra-box {
  background: linear-gradient(180deg, #EDF9E2, #E6F5DA);
  color: #003006;
}
.kivra-box .box-header {
  background: linear-gradient(180deg, #003006, #012906);
  color: #EDF9E2;
}

/* OpenAI dark card keeps contrast */
.openai-box {
  background: linear-gradient(180deg, #222, #1a1a1a);
  border: 1px solid rgba(255,255,255,0.12);
}

/* ── Pricing table polish ─────────────────────────────────── */
.pricing-table {
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  box-shadow: var(--rb-shadow-xs);
}
.pricing-table th {
  background: linear-gradient(180deg, rgba(140,216,244,0.95), rgba(140,216,244,0.85));
  color: var(--rb-blue);
  border-bottom: none;
}
.pricing-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.06);
}
.pricing-table tbody tr:hover td {
  background: rgba(140,216,244,0.10);
}

/* Yes / No emphasis consistent */
.pricing-table td .yes {
  color: #56de9f;
  font-weight: 700;
}
.pricing-table td .no {
  color: #f28c8c;
  font-weight: 700;
}

/* ── AI table: elevate rows and headers ───────────────────── */
.ai-table {
  gap: 8px;
  background: transparent; /* remove block fill */
}
.ai-header .ai-cell {
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.18);
}
.ai-cell {
  background: linear-gradient(180deg, rgba(66,145,215,0.25), rgba(66,145,215,0.18));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  box-shadow: var(--rb-shadow-xs);
}
.ai-row:nth-child(even) .ai-cell {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
}

/* ── Forms & inputs (glass + focus ring) ──────────────────── */
#contact-form input,
#contact-form textarea,
#tenant-form .tenant-fields input {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#contact-form input:focus,
#contact-form textarea:focus,
#tenant-form .tenant-fields input:focus {
  border-color: var(--rb-accent-1);
  box-shadow: 0 0 0 3px rgba(140,216,244,0.25);
  outline: none;
}

/* Upload button polish */
.upload-btn {
  background: linear-gradient(180deg, rgba(66,145,215,0.95), rgba(66,145,215,0.85));
  border: 1px solid rgba(66,145,215,0.65);
  color: var(--rb-white);
  box-shadow: var(--rb-shadow-xs);
}
.upload-btn:hover {
  background: linear-gradient(180deg, var(--rb-light-blue), #bdefff);
  color: var(--rb-dark);
}

/* Tenant list cards hover */
.tenant-list li {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.20);
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.tenant-list li:hover {
  transform: translateY(-2px);
  border-color: var(--rb-border-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
}

/* ── Video frame subtle border & glow ─────────────────────── */
.video-embed {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.video-embed iframe { border: none; }

/* ── Modal polish: glass sheet + safe scroll ─────────────── */
.dm-modal {
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
}
.dm-modal .modal-step {
  background: linear-gradient(180deg, rgba(6,43,70,0.94), rgba(6,43,70,0.88));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.5);
}

/* Sub-modal content */
.dm-submodal .modal-content {
  background: linear-gradient(180deg, rgba(6,43,70,0.95), rgba(6,43,70,0.90));
  border: 1px solid rgba(255,255,255,0.12);
}

/* ── Footer: lighter border & clarity ─────────────────────── */
.dm-footer {
  border-top: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

/* ── Utility glows & borders (from reference, themed) ─────── */
.glow       { box-shadow: 0 0 112px -48px rgba(140,216,244,0.9); }
.glow-small { box-shadow: 0 0 150px -25px rgba(140,216,244,0.9); }
.text-glow  { text-shadow: 0 0 26px rgba(140,216,244,0.85); }
.inside-glow{ box-shadow: inset 0 0 26px -7px rgba(202,214,243,0.8); }
.border-glow{
  border: .5px solid rgba(205,228,253,.66);
  box-shadow: 0 0 60px -20px rgba(140,216,244,0.6);
}

/* Optional hero background like your reference */
.gradient-background {
  background-image:
    radial-gradient(18% 28% at 24% 50%, rgba(206,212,255,.20) 7%, rgba(7,58,255,0) 40%),
    radial-gradient(30% 45% at 80% 20%, rgba(140,216,244,.20) 10%, rgba(7,58,255,0) 60%),
    radial-gradient(50% 60% at 50% 110%, rgba(13,75,120,.35) 10%, rgba(13,75,120,0) 70%),
    linear-gradient(180deg, var(--rb-bg-2) 0%, var(--rb-bg-1) 100%);
  background-size: cover;
}

/* ── Focus visibility & accessibility ─────────────────────── */
:focus-visible {
  outline: 2px solid var(--rb-ring);
  outline-offset: 2px;
}

/* ── Motion safety ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Small layout refinements for mobile ──────────────────── */
@media (max-width: 768px) {
  .dm-toolbar { box-shadow: 0 6px 18px rgba(0,0,0,0.3); }
  .dm-content { padding: 1.25rem; }
  .pricing-cards,
  .send-container { gap: .75rem; }
}
@media (max-width: 480px) {
  .dm-nav { gap: .4rem; }
  .btn-primary { width: 100%; }
}

/* ── Keep icon clarity on glass backgrounds ───────────────── */
i[class*="fa-"] { text-shadow: 0 1px 0 rgba(0,0,0,0.25); }

/* ── BankID login button in the session-expired view ─────── */
#session-expired-login-btn.btn-primary {
  border: 1px solid rgba(255,255,255,0.18);
  background:
    linear-gradient(180deg, rgba(13,75,120,0.85), rgba(6,43,70,0.95)) padding-box,
    linear-gradient(135deg, var(--rb-accent-1), var(--rb-accent-2)) border-box;
  color: var(--rb-white);
}
#session-expired-login-btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.38);
}

/* ── Elevated “why rows” for the home section ────────────── */
.why-row {
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  box-shadow: var(--rb-shadow-xs);
}

/* ── Auth list items hover feedback ───────────────────────── */
.auth-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.20);
}
.auth-item:hover { background: rgba(255,255,255,0.12); }

/* ── Terms iframe chrome ─────────────────────────────────── */
.terms-frame {
  border: 1px solid rgba(0,0,0,0.08);
}

/* ── Keep your existing “focusable” lift a touch stronger ── */
.focusable:hover,
.focusable:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.24);
}




/* ============================================================
   FIX PACK — layout safety, nav flags visibility, Kivra hover
   (append to the END of your stylesheet)
   ============================================================ */

/* ---------- 0) Consistent inner width & gutters ----------- */
:root{
  /* Max width for content inside the main page container */
  --page-max: 1120px;
  /* Symmetric, responsive side padding */
  --page-gutter: clamp(16px, 3.5vw, 32px);
}

/* Keep content symmetrically centered inside .dm-root-container */
.dm-content{
  padding-inline: var(--page-gutter) !important;
  /* Avoid any accidental horizontal scroll from long tokens */
  overflow-x: hidden;
}

/* Every visible view sits within a centered measure */
.dm-content > .dm-view{
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  min-width: 0; /* critical: allow children to shrink within */
}

/* Also apply symmetric paddings at the toolbar to match content */
.dm-toolbar{
  padding-inline: var(--page-gutter) !important;
}

/* ---------- 1) Language flags: never get clipped ----------- */
/* Allow the right pane to actually shrink; enable clean scroll */
.dm-toolbar-right{
  flex: 1 1 auto;        /* allow natural shrink/grow */
  min-width: 0;          /* CRITICAL: avoid clipping children */
  overflow-x: auto;
  position: relative;    /* for the fade indicator below (optional) */
  -webkit-overflow-scrolling: touch;
}

/* Make the nav as wide as its content so horizontal scroll works predictably */
.dm-nav{
  min-width: max-content;
  align-items: center;
}

/* Ensure the flag buttons themselves never collapse */
.lang-switch{ 
  display: flex; 
  gap: .4rem; 
  flex: 0 0 auto; 
  white-space: nowrap; 
}
.lang-btn{ 
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  line-height: 1;
}

/* Optional subtle end-fade to signal scroll on overflow */
.dm-toolbar-right::after{
  content: "";
  position: absolute; inset: 0 0 0 auto; width: 28px;
  pointer-events: none;
  background: linear-gradient(to left, rgba(13,75,120,.85), rgba(13,75,120,0));
  opacity: .75;
  /* Only show when actually scrollable */
  display: none;
}
@supports (selector(:has(*))){
  .dm-toolbar-right:has(.dm-nav){ 
    /* show the fade only if content overflows */
  }
}
/* Simple heuristic: always show on small/medium widths where overflow is likely */
@media (max-width: 1100px){
  .dm-toolbar-right::after{ display: block; }
}

/* ---------- 2) Cards always resize within container -------- */
/* Keep card groups centered relative to the inner measure */
.pricing-cards,
.ai-grid,
.auth-cards,
.send-container{
  margin-inline: auto;
  max-width: 100%;
}

/* Let flex/grid items shrink instead of forcing overflow */
.pricing-cards .card,
.ai-card,
.auth-card,
.send-box{
  min-width: 0;                 /* CRITICAL in flex/grid contexts */
  max-width: 100%;
  overflow-wrap: anywhere;      /* prevent long tokens from pushing widths */
}

/* Preserve your horizontal layout, but make flex-basis responsive.
   This keeps cards balanced and symmetric across widths. */
.pricing-cards .card{
  flex: 1 1 clamp(240px, 28%, 360px);
}

/* AI grid already uses auto-fit; enforce safe min width */
.ai-grid{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* If any table or wide content appears, ensure it never bleeds */
.dm-content table{
  max-width: 100%;
}

/* ---------- 3) Friendlier Kivra hover (no harsh clash) ----- */
/* Base look (unchanged colors), but we give it a subtle border to match others */
.kivra-box{
  border: 1px solid #CDEFCB; /* soft green edge */
  background: #EDF9E2;       /* keep the base brand background */
}

/* Override the generic .send-box:hover visual so Kivra feels calmer */
.kivra-box:hover{
  transform: translateY(-1px); /* gentle lift */
  background: linear-gradient(180deg, #EFFAE6, #EAF6E0);
  border-color: #B9E7B5;       /* slightly deeper green for focus */
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Keep header contrast but avoid aggressive flips on hover */
.kivra-box .box-header{
  background: #003006;
  color: #EDF9E2;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.kivra-box:hover .box-header{
  background: #04380A; /* a touch lighter for hover without clashing */
}

/* Maintain body text readability on both base & hover */
.kivra-box .box-body{
  color: #08390E;
}

/* ---------- Small refinements for narrow screens ----------- */
@media (max-width: 768px){
  /* Maintain the inner gutter and keep content centered */
  .dm-content{ padding-inline: var(--page-gutter) !important; }

  /* Toolbar keeps the same gutter; overflow scrolling continues to work */
  .dm-toolbar{ padding-inline: var(--page-gutter) !important; }
}