:root {
  --rb-blue:        #0D4B78;
  --rb-light-blue:  #8CD8F4;
  --rb-medium-blue: #4291d7;
  --rb-white:       #ffffff;
  --rb-dark:        #062B46;
  --z-modal:        2000;
  --dm-auth-focus:  rgba(140,216,244,0.72);
  --dm-auth-border: rgba(255,255,255,0.12);
  --dm-auth-panel:  linear-gradient(180deg, rgba(6,43,70,0.94), rgba(6,43,70,0.88));
  --dm-auth-card-bg: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  --dm-auth-card-bg-hover: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  --dm-auth-card-border: rgba(255,255,255,0.36);
  --dm-auth-muted: rgba(255,255,255,0.82);
  --dm-auth-muted-2: rgba(255,255,255,0.76);
  --rb-danger-text: #FFB4B4;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Render staging: hide the shell until CSS + JS are ready */
html.dm-prep body {
  background: var(--rb-blue);
  color: var(--rb-white);
}
html.dm-prep .dm-root-container {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}
html.dm-ready .dm-root-container {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease;
}
@media (prefers-reduced-motion: reduce) {
  html.dm-ready .dm-root-container { transition: none; }
}
.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: flex-start;
  min-height: 100vh;
  height: auto;
  overflow-x: hidden;
}

/* ─── ROOT (GRID) ─── */
.dm-root-container {
  width: 100%;
  max-width: 1280px;
  min-height: 100vh;
  height: auto;
  margin: 0 auto;
  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-inline-end: 1rem;
}
.dm-logo-container {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.dm-logo-container picture,
.dm-logo-container .dm-dynamic-logo-mount,
.dm-logo-container img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.dm-logo-container .dm-dynamic-logo-mount {
  position: relative;
  aspect-ratio: 430.85 / 98.92;
  overflow: visible;
}

.dm-logo-container .dm-dynamic-logo-fallback,
.dm-logo-container .dm-dynamic-logo-fallback img,
.dm-logo-container .dm-dynamic-logo-inline {
  display: block;
  width: 100%;
  height: 100%;
}

.dm-logo-container .dm-dynamic-logo-inline {
  position: absolute;
  inset: 0;
  object-fit: contain;
}

.dm-logo-container .dm-dynamic-logo-mount.is-inline-ready .dm-dynamic-logo-fallback {
  opacity: 0;
  pointer-events: none;
}
.dm-logo-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  cursor: pointer;
}

/* 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;
}
[dir="rtl"] .dm-toolbar-right{
  justify-content: flex-start;
}

/* 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-accent-2, #D3F2FF);
  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-hero {
  width: min(100%, 980px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin: 0 auto 1.75rem;
  text-align: center;
}
.home-hero-eyebrow {
  margin: 0;
  color: var(--rb-light-blue);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.home-title {
  font-size: 2rem;
  line-height: 1.14;
  font-weight: 600;
  text-align: center;
  max-width: 860px;
  margin: 0;
  overflow-wrap: anywhere;
}
.home-hero-lead {
  width: min(100%, 820px);
  margin: 0;
  color: rgba(255,255,255,0.88);
  font-size: 1.05rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.home-hero-flow {
  width: min(100%, 980px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.35rem 0 0;
  padding: 0;
}
.home-hero-flow__item {
  min-width: 0;
  min-height: 7rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035));
  box-shadow: 0 10px 28px rgba(6,43,70,0.18);
}
.home-hero-flow__label {
  color: var(--rb-white);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}
.home-hero-flow__detail {
  color: rgba(255,255,255,0.78);
  font-size: 0.84rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.home-workflow-proof {
  width: min(100%, 980px);
  display: grid;
  gap: 0.65rem;
  margin-top: 0.2rem;
  padding: 0.85rem;
  border: 1px solid rgba(140,216,244,0.28);
  border-radius: 8px;
  background: rgba(6,43,70,0.36);
}
.home-workflow-proof__heading {
  margin: 0;
  color: var(--rb-light-blue);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
}
.home-workflow-proof__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-workflow-proof__item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.7rem 0.6rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
}
.home-workflow-proof__label {
  color: var(--rb-white);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
}
.home-workflow-proof__detail {
  color: rgba(255,255,255,0.78);
  font-size: 0.76rem;
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.home-proof-route-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.2rem;
}
.home-proof-route-links .btn-inline {
  min-block-size: 2.35rem;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}
.cta-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  width: 100%;
  margin-bottom: 2rem;
}

.home-buyer-paths {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  width: min(100%, 480px);
}

.home-buyer-paths__link {
  min-block-size: 2.5rem;
  padding-inline: 0.9rem;
  justify-content: center;
  text-align: center;
}

.dm-structured-primary-media {
  width: min(100%, 960px);
  max-width: 100%;
  margin: 0 auto 2rem;
  display: grid;
  gap: 0.55rem;
  justify-items: center;
}

.dm-structured-primary-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: contain;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 52px rgba(6,43,70,0.28);
}

.dm-structured-primary-media figcaption {
  width: min(100%, 760px);
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,0.82);
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: anywhere;
}

/* 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;
}
#cta-btn {
  max-inline-size: 100%;
  touch-action: manipulation;
}
.btn-primary img {
  height: 48px;
  margin-inline-end: 0.7em;
}
.btn-primary:hover,
#cta-btn.is-cta-active {
  transform: scale(1.05);
  background: linear-gradient(135deg,#062B46 0%,#0D4B78 100%);
  color: var(--rb-light-blue);
  transition: background .2s, color .2s, transform .2s;
}
.btn-primary:focus-visible,
.btn-inline:focus-visible {
  outline: 3px solid var(--rb-white);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px rgba(140,216,244,0.38);
}

/* 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 */
.feature-list {
  list-style: none;
  margin: 1.5rem 0 2rem;
}

.dm-public-ratings {
  width: min(100%, 720px);
  margin: 2rem auto 0;
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
}
.dm-public-ratings__summary,
.dm-public-ratings__empty {
  display: grid;
  gap: .45rem;
  justify-items: center;
  text-align: center;
}
.dm-public-ratings__summary[hidden],
.dm-public-ratings__empty[hidden],
.dm-public-ratings__fields[hidden] {
  display: none !important;
}
.dm-public-ratings__stars,
.dm-public-ratings__star-picker {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .35rem;
}
.dm-public-ratings__stars {
  min-height: 32px;
  color: #FFD166;
  font-size: 1.35rem;
}
.dm-public-ratings__aggregate-copy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.35;
}
.dm-public-ratings__aggregate-copy strong,
.dm-public-ratings__kicker {
  color: var(--rb-light-blue);
  font-weight: 700;
}
.dm-public-ratings__form {
  display: grid;
  gap: 1rem;
}
.dm-public-ratings__star-picker {
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
}
.dm-public-ratings__star {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 8px;
  background: rgba(6,43,70,0.55);
  color: rgba(255,255,255,0.72);
  cursor: pointer;
  font-size: 1.15rem;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.dm-public-ratings__star:hover,
.dm-public-ratings__star[data-active="true"],
.dm-public-ratings__star[aria-checked="true"] {
  color: #FFD166;
  border-color: rgba(255,209,102,0.8);
  background: rgba(255,209,102,0.14);
}
.dm-public-ratings__star:focus-visible,
.dm-public-ratings__inline button:focus-visible,
.dm-public-ratings__submit button:focus-visible,
.dm-public-ratings__fields input:focus-visible,
.dm-public-ratings__fields textarea:focus-visible {
  outline: 2px solid var(--dm-auth-focus);
  outline-offset: 2px;
}
.dm-public-ratings__fields {
  display: grid;
  gap: .45rem;
}
.dm-public-ratings__fields label {
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}
.dm-public-ratings__inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
}
.dm-public-ratings__fields input,
.dm-public-ratings__fields textarea {
  width: 100%;
  min-height: 42px;
  padding: .65rem .75rem;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: var(--rb-white);
  font: inherit;
}
.dm-public-ratings__fields textarea {
  min-height: 86px;
  resize: vertical;
}
.dm-public-ratings__inline button,
.dm-public-ratings__submit button {
  min-height: 42px;
  padding: .65rem .9rem;
  border: 0;
  border-radius: 8px;
  background: var(--rb-light-blue);
  color: var(--rb-blue);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.dm-public-ratings__inline button[disabled],
.dm-public-ratings__submit button[disabled] {
  opacity: .62;
  cursor: progress;
}
.dm-public-ratings__submit {
  grid-template-columns: 1fr;
}
.dm-public-ratings__status {
  min-height: 24px;
  color: rgba(255,255,255,0.82);
  text-align: center;
}
.dm-public-ratings__status[data-state="error"] {
  color: var(--rb-danger-text);
}
.dm-public-ratings__status[data-state="verified"],
.dm-public-ratings__status[data-state="pending_moderation"],
.dm-public-ratings__status[data-state="approved_aggregate"] {
  color: #9be28c;
}
@media (max-width: 640px) {
  .dm-public-ratings {
    padding: 1rem;
  }
  .dm-public-ratings__inline {
    grid-template-columns: 1fr;
  }
  .dm-public-ratings__inline button,
  .dm-public-ratings__submit button {
    width: 100%;
  }
  .dm-public-ratings__star {
    width: 40px;
    height: 40px;
  }
}

/* ---------- PRICING ------------ */
#pricing-view {
  --dm-pricing-card-min: 17.5rem;
  --dm-pricing-card-gap: 1rem;
  --dm-pricing-card-pad-y: 1.15rem;
  --dm-pricing-card-pad-x: 1.25rem;
  --dm-pricing-price-min-block: 3.75rem;
  --dm-pricing-audience-min-block: 3.35rem;
  --dm-pricing-cta-min-block: 3.5rem;
}
#pricing-view .pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--dm-pricing-card-min)), 1fr));
  gap: var(--dm-pricing-card-gap);
  margin: 1rem 0 2rem;
  align-items: stretch;
  min-inline-size: 0;
}
#pricing-view .pricing-cards .card {
  min-inline-size: 0;
  max-inline-size: 100%;
  background: var(--rb-dark);
  padding: var(--dm-pricing-card-pad-y) var(--dm-pricing-card-pad-x);
  border-radius: 8px;
  text-align: center;
  display: grid;
  grid-template-rows:
    auto
    minmax(var(--dm-pricing-price-min-block), auto)
    minmax(var(--dm-pricing-audience-min-block), 1fr)
    minmax(var(--dm-pricing-cta-min-block), auto);
  gap: 0.65rem;
  align-items: stretch;
  overflow-wrap: anywhere;
}
#pricing-view .pricing-cards .card h3 {
  margin: 0;
  color: var(--rb-light-blue);
  line-height: 1.2;
}
#pricing-view .pricing-cards .card .price {
  min-block-size: var(--dm-pricing-price-min-block);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.15rem 0.35rem;
  margin: 0;
  color: var(--rb-white);
  line-height: 1.15;
}
#pricing-view .pricing-cards .card .price span {
  font-size: 0.9rem;
  font-weight: normal;
}
#pricing-view .pricing-cards .card .price [data-dm-pricing-card-value] {
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
#pricing-view .pricing-cards .audience {
  min-block-size: var(--dm-pricing-audience-min-block);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1.35;
  color: rgba(255,255,255,0.86);
  overflow-wrap: anywhere;
}
#pricing-view .pricing-action {
  margin-top: auto;
  min-block-size: var(--dm-pricing-cta-min-block);
  inline-size: 100%;
  max-inline-size: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}
#pricing-view .pricing-action:disabled,
#pricing-view .pricing-action[aria-disabled="true"] {
  cursor: not-allowed;
  color: rgba(6,43,70,0.78);
  filter: saturate(0.74);
  transform: none;
}
#pricing-view .pricing-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
#pricing-view .pricing-table th,
#pricing-view .pricing-table td {
  padding: 0.75rem;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.15);
  overflow-wrap: anywhere;
  line-height: 1.35;
}
#pricing-view .pricing-table th {
  background: var(--rb-light-blue);
  color: var(--rb-blue);
}
#pricing-view .pricing-table th:first-child,
#pricing-view .pricing-table td:first-child {
  width: 28%;
  text-align: start;
}
#pricing-view .pricing-table th:not(:first-child),
#pricing-view .pricing-table td:not(:first-child) {
  width: 24%;
}
#pricing-view .pricing-table td[data-dm-pricing-row] {
  font-weight: 700;
}
#pricing-view .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-workflow-lead {
  max-width: 760px;
  margin: 0.75rem 0 1rem;
  color: rgba(255,255,255,0.9);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.ai-workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin: 1rem 0 1.5rem;
  align-items: stretch;
  min-inline-size: 0;
}
.ai-workflow-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.55rem;
  min-inline-size: 0;
  min-block-size: 10.5rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.045));
  box-shadow: var(--rb-shadow-xs);
}
.ai-workflow-step {
  inline-size: 2.35rem;
  block-size: 2.35rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(140,216,244,0.42);
  border-radius: 999px;
  color: var(--rb-light-blue);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}
.ai-workflow-card h4 {
  margin: 0;
  color: var(--rb-white);
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.ai-workflow-card p {
  margin: 0;
  color: rgba(255,255,255,0.88);
  font-size: 0.92rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* —— 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: start; }
.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-inline-start: 1rem;
}
.send-box .box-body li {
  margin-bottom: 0.75rem;
}

.google-workspace-section {
  margin-block: 1.5rem;
  text-align: start;
}

.google-workspace-section h2 {
  margin: 0 0 0.5rem;
  color: var(--rb-white);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.2;
}

.google-workspace-section .section-lead {
  margin: 0 0 1rem;
  color: rgba(255,255,255,0.86);
  max-width: 72ch;
}

.google-workspace-grid {
  gap: 1rem;
}

.google-workspace-section code {
  direction: ltr;
  unicode-bidi: plaintext;
  overflow-wrap: anywhere;
}

.google-workspace-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.data-rooms-proof {
  width: min(100%, 960px);
  display: grid;
  gap: 1rem;
  margin: 1.25rem auto 2rem;
  padding: 1.1rem;
  border: 1px solid rgba(140,216,244,0.24);
  border-radius: 8px;
  background: rgba(6,43,70,0.26);
}

.data-rooms-proof__header {
  display: grid;
  gap: 0.45rem;
  max-width: 74ch;
}

.data-rooms-proof__eyebrow {
  color: var(--rb-light-blue);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
}

.data-rooms-proof h2,
.data-rooms-proof h3,
.data-rooms-proof p {
  margin: 0;
}

.data-rooms-proof h2 {
  color: var(--rb-white);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.2;
}

.data-rooms-proof__header p {
  color: rgba(255,255,255,0.84);
  font-size: 0.98rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.data-rooms-proof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.85rem;
}

.data-rooms-proof__item {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.55rem;
  padding: 0.9rem;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
}

.data-rooms-proof__item i {
  color: var(--rb-light-blue);
  font-size: 1.05rem;
  line-height: 1;
}

.data-rooms-proof__item h3 {
  color: var(--rb-white);
  font-size: 0.98rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.data-rooms-proof__item p {
  color: rgba(255,255,255,0.78);
  font-size: 0.86rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.data-rooms-proof__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.accounting-proof {
  border-color: rgba(86,222,159,0.24);
  background: rgba(7,48,55,0.26);
}

.accounting-proof .data-rooms-proof__eyebrow,
.accounting-proof .data-rooms-proof__item i {
  color: #56de9f;
}

.public-integration-chips,
.public-integration-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  min-width: 0;
}

.public-integration-chips {
  margin: 0 0 0.9rem;
}

.public-integration-strip {
  margin: 0.25rem 0 1rem;
}

.public-integration-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  min-width: 0;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(140,216,244,0.44);
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  color: var(--rb-white);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.public-integration-chip i {
  flex: 0 0 auto;
  color: var(--rb-light-blue);
  font-size: 0.95rem;
}

.public-integration-chip span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* —— 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: var(--rb-danger-text);
}

/* ---------- footer ------------- */
.dm-footer {
  grid-row: 3;
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3.5vw, 3rem);
  border-top: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(10px);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  gap: 1.25rem 1.75rem;
  align-items: flex-start;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.footer-logo-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 11px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
  flex-shrink: 0;
}
.footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.footer-brand-name {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.footer-tagline {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.82);
}
.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.88);
}
.footer-meta-line {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.footer-meta-line i {
  color: var(--rb-light-blue);
  margin-top: 0.1rem;
}
.footer-heading {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rb-light-blue);
  margin-bottom: 0.65rem;
  font-weight: 700;
}
.footer-link-list,
.footer-social {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.footer-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  color: var(--rb-white);
  text-decoration: none;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.footer-link span {
  line-height: 1.4;
}
.footer-link i {
  color: var(--rb-light-blue);
  font-size: 0.95rem;
}
.footer-link:hover {
  color: var(--rb-light-blue);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
.footer-link .external-indicator {
  margin-inline-start: auto;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}
.footer-column {
  min-width: 0;
}
[dir="rtl"] .footer-inner {
  direction: ltr;
}
[dir="rtl"] .footer-brand,
[dir="rtl"] .footer-column {
  direction: rtl;
  text-align: start;
}
.footer-brand,
.footer-column,
.footer-meta,
.footer-meta-line,
.footer-link-list,
.footer-social,
.footer-link,
.footer-tagline,
.footer-link span,
.footer-meta-line span {
  min-inline-size: 0;
  max-inline-size: 100%;
}
.footer-link {
  inline-size: 100%;
}
.footer-tagline,
.footer-link span,
.footer-meta-line span {
  overflow-wrap: anywhere;
}
@media (max-width: 1100px) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .dm-footer {
    padding: 1.5rem var(--page-gutter, 1.25rem);
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .footer-logo-row {
    align-items: flex-start;
  }
  .footer-link {
    padding: 0.5rem 0.6rem;
    width: 100%;
  }
  .footer-brand,
  .footer-column {
    width: 100%;
  }
}

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

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

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

/* 100 % rule applies to both <picture> and fallback <img> */
.dm-logo-container picture,
.dm-logo-container .dm-dynamic-logo-mount,
.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;
  min-height: 100vh;
  height: auto;

  /* → 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-accent-2, #D3F2FF);
}
.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{
  display:none;
  position:fixed;
  inset:0;
  align-items:center;
  justify-content:center;
  padding:clamp(12px,3vw,24px);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:rgba(0,0,0,.65);
  z-index:var(--z-modal);
}
.dm-modal.is-open{display:flex;}
.dm-modal[hidden]{display:none!important;}
.dm-auth-dialog{
  position:relative;
  width:min(calc(100vw - 32px), var(--dm-auth-dialog-width, 520px));
  max-height:calc(100dvh - 32px);
}
#bankid-modal[data-active-step="tenant"],
#bankid-modal[data-active-step="rep"],
#bankid-modal[data-active-step="company"],
#bankid-modal[data-active-step="legal"],
#bankid-modal[data-active-step="checkout"]{
  --dm-auth-dialog-width:720px;
}
.dm-auth-dialog > .auth-method-step,
.dm-auth-dialog > .modal-step{
  width:100%;
  max-width:none;
  min-width:0;
  max-height:inherit;
}
.dm-modal .modal-step{
  background:#062B46;
  padding:clamp(1.25rem,3vw,2rem);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:1rem;
  overflow-y:auto;
  animation:fadeIn .3s ease-in;
}
.dm-modal .modal-step[hidden],
.auth-method-step[hidden]{display:none!important;}
.dm-auth-dialog > .modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:8px;
  background:rgba(255,255,255,0.08);
  color:#fff;
  cursor:pointer;
  font-size:1.8rem;
  line-height:1;
}
.dm-auth-dialog > .modal-close:hover{
  background:rgba(255,255,255,0.14);
}
.dm-auth-dialog > .modal-close:focus-visible,
.dm-submodal .modal-close:focus-visible,
.auth-method-card:focus-visible,
.tenant-list li:focus-visible {
  outline: 2px solid var(--dm-auth-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(140,216,244,.18);
}
.auth-method-step {
  overflow-y: auto;
  background: var(--dm-auth-panel);
  color: var(--rb-white);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--dm-auth-border);
  border-radius: 12px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.50);
  flex-direction: column;
  gap: 1rem;
  animation: fadeIn .3s ease-in;
}
.auth-method-step:not([hidden]) { display: flex; }
.auth-method-eyebrow {
  margin: 0;
  color: var(--rb-light-blue);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.auth-method-step h3 {
  margin: 0;
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1.2;
}
.auth-method-copy {
  margin: 0;
  color: var(--dm-auth-muted);
  line-height: 1.55;
}
.auth-method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
.auth-method-card {
  min-height: 72px;
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
  padding: .85rem 1rem;
  border: 1px solid var(--dm-auth-card-border);
  border-radius: 8px;
  background: var(--dm-auth-card-bg);
  color: var(--rb-white);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.auth-method-card:hover {
  border-color: rgba(140,216,244,.62);
  background: var(--dm-auth-card-bg-hover);
  transform: translateY(-1px);
}
.auth-method-card[aria-busy="true"] {
  cursor: progress;
  opacity: .72;
}
.auth-method-card--google {
  background: var(--dm-auth-card-bg);
  color: var(--rb-white);
  border-color: var(--dm-auth-card-border);
}
.auth-method-card--google:hover {
  background: var(--dm-auth-card-bg-hover);
  border-color: rgba(140,216,244,.62);
}
.auth-method-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.auth-method-icon--bankid {
  background: #0D4B78;
}
.auth-method-icon--bankid img {
  width: 34px;
  height: auto;
  display: block;
}
.auth-method-icon--google {
  background: #fff;
  color: #4285f4;
  border: 1px solid #dadce0;
  font-size: 1.25rem;
}
.auth-method-icon--google i {
  line-height: 1;
}
.auth-method-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.auth-method-body strong {
  line-height: 1.2;
}
.auth-method-body span {
  color: var(--dm-auth-muted-2);
  font-size: .9rem;
  line-height: 1.35;
}
.auth-method-card--google .auth-method-body span {
  color: var(--dm-auth-muted-2);
}
.auth-method-step[data-auth-phase="finishing"] .auth-method-grid {
  display: none;
}
.auth-method-status {
  margin: 0;
  color: var(--rb-light-blue);
  line-height: 1.4;
}
.auth-method-status[data-tone="loading"] {
  min-height: 58px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
  padding: .78rem .86rem;
  border: 1px solid rgba(140,216,244,.32);
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  color: var(--rb-light-blue);
}
.auth-method-status[data-tone="error"] {
  color: var(--rb-danger-text);
}
.auth-method-status__loader {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: currentColor;
}
.auth-method-status__text {
  min-width: 0;
  color: inherit;
  font-weight: 700;
  line-height: 1.35;
}
.dm-saml-motion-loader {
  width: 38px;
  height: 38px;
  display: block;
  overflow: visible;
  color: currentColor;
}
.dm-saml-motion-loader__track {
  opacity: .26;
}
.dm-saml-motion-loader__sweep {
  transform-origin: 24px 24px;
  animation: dm-saml-loader-spin 1.2s linear infinite;
}
.dm-saml-motion-loader__page {
  transform-origin: 24px 24px;
  animation: dm-saml-loader-page 1.8s ease-in-out infinite;
}
.dm-saml-motion-loader__line {
  transform-origin: 24px 24px;
  animation: dm-saml-loader-line 1.8s ease-in-out infinite;
}
.dm-saml-motion-loader__line--2 {
  animation-delay: .18s;
}
.dm-saml-motion-loader__line--3 {
  animation-delay: .36s;
}
@keyframes dm-saml-loader-spin {
  to { transform: rotate(360deg); }
}
@keyframes dm-saml-loader-page {
  0%, 100% { transform: translateY(0); opacity: .86; }
  50% { transform: translateY(-2px); opacity: 1; }
}
@keyframes dm-saml-loader-line {
  0%, 100% { opacity: .45; transform: scaleX(.72); }
  50% { opacity: 1; transform: scaleX(1); }
}
.dynamicbooks-synthetic-login--modal {
  display: grid;
  gap: .75rem;
  margin-top: .25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.14);
}
.dynamicbooks-synthetic-login--modal label {
  display: grid;
  gap: .35rem;
  color: var(--dm-auth-muted);
  font-size: .9rem;
}
.dynamicbooks-synthetic-login--modal input {
  min-height: 42px;
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--dm-auth-card-border);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: var(--rb-white);
}
.dynamicbooks-synthetic-login--modal input:focus-visible {
  outline: 2px solid var(--dm-auth-focus);
  outline-offset: 2px;
}
.dynamicbooks-synthetic-login--modal button {
  min-height: 42px;
  justify-self: start;
  padding: .65rem 1rem;
  border: 0;
  border-radius: 8px;
  background: var(--rb-light-blue);
  color: #062236;
  font-weight: 700;
  cursor: pointer;
}
.dynamicbooks-synthetic-login--modal button:hover {
  filter: brightness(1.05);
}
.dynamicbooks-synthetic-login--modal [role="status"] {
  margin: 0;
  color: var(--dm-auth-muted-2);
  min-height: 1.2em;
}
.auth-linked-accounts {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.16);
}
.auth-linked-accounts__label {
  margin: 0 0 .45rem;
  color: rgba(255,255,255,.82);
  font-size: .85rem;
  font-weight: 700;
}
.auth-linked-accounts__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0;
  padding: 0;
}
.auth-linked-accounts__list li {
  padding: .35rem .55rem;
  border-radius: 6px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  font-size: .82rem;
  line-height: 1.25;
}
@media (max-width: 380px) {
  .dm-auth-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }
  .auth-method-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: .75rem;
    min-height: 68px;
    padding: .75rem;
  }
  .auth-method-icon {
    width: 40px;
    height: 40px;
  }
  .auth-method-icon--bankid img {
    width: 30px;
  }
}
@media (max-height: 640px) {
  .dm-modal {
    align-items: flex-start;
  }
}
.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;}
.qr-timer{width:100%;display:flex;flex-direction:column;gap:.35rem;align-items:stretch;}
.qr-timer-bar{position:relative;height:6px;background:rgba(255,255,255,.2);border-radius:999px;overflow:hidden;}
#qr-timer-fill{position:absolute;inset:0;width:100%;background:linear-gradient(90deg,#8CD8F4,#4EB3F2);transform-origin:left center;transition:width .25s ease;}
#qr-timer-text{margin:0;color:#8CD8F4;font-size:.85rem;}
.qr-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;}
.qr-actions .btn-primary img{height:1.2em;margin-right:.35rem;filter:drop-shadow(0 0 0 rgba(0,0,0,0));}
.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: var(--rb-danger-text);
  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 {
  width: 100%;
  min-width: 0;
  min-height: 0;
}
/* 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: var(--rb-danger-text);
}
.tenant-feedback.success {
  color: #8CD8F4;
}

/* ─── STEP 4 modal sizing like Step 3 ───────────────────────── */
#bankid-step-4.modal-step {
  width: 100%;
  min-width: 0;
  min-height: 0;
  position: relative;
}
#bankid-step-5.modal-step {
  width: 100%;
  min-width: 0;
  min-height: 0;
}

/* “Gå vidare” button */
#proceed-subscription {
  position: static;
  align-self: flex-end;
  margin-top: .5rem;
}

/* ─── 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-view .pricing-table td .yes {
  display: inline-block;
  color: #56de9f;      /* green‐ish */
  font-weight: bold;
}
#pricing-view .pricing-table td .no {
  display: inline-block;
  color: var(--rb-danger-text);
  font-weight: bold;
}
/* 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: var(--rb-danger-text);
  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: inherit;    /* never taller than the dialog wrapper */
  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,
.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-poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.video-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 1;
}




/* ─── 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: 44px;
  height: 44px;
  padding: 5px;
  object-fit: contain;
  border-radius: 8px;                       /* soften any square logos */
  background: #fff;
  border: 1px solid rgba(255,255,255,0.34);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

.tenant-list li span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}




/* ============================================================
   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; }
}
@media (max-width: 640px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .auth-card {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
  }
  .auth-card .btn-kivra,
  .auth-card .btn-kivra-outline,
  .auth-card .btn-primary-outline,
  .auth-card .checkmark {
    grid-column: 2;
    justify-self: start;
  }
  #proceed-subscription {
    align-self: stretch;
    width: 100%;
  }
}

/* ---------- Modal safety: never overflow viewport ---------- */
.dm-modal .modal-step {
  max-height: inherit;      /* 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:        #8CD8F4;
  --rb-danger-text: #FFB4B4;
  --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-accent-2, #D3F2FF);
  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;
  inset-inline: 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-accent-2, #D3F2FF);
  box-shadow: var(--rb-shadow-xs);
}

/* Locale selector */
.dm-locale-selector{
  position: relative;
  inline-size: clamp(220px, 24vw, 360px);
  max-inline-size: 100%;
  min-inline-size: 0;
}
.dm-locale-selector__trigger{
  width: 100%;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding: .68rem .82rem;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  color: var(--rb-white);
  cursor: pointer;
  text-align: start;
  transition: background .2s ease, transform .1s ease, border-color .2s ease;
}
.dm-locale-selector__trigger:hover{
  transform: translateY(-1px);
  border-color: rgba(140,216,244,0.45);
}
.dm-locale-selector__trigger:focus,
.dm-locale-selector__search:focus,
.dm-locale-selector__option:focus,
.dm-locale-selector__locale-chip:focus,
.dm-locale-selector__close:focus,
.lang-btn:focus{
  outline: 2px solid var(--rb-light-blue);
  outline-offset: 2px;
}
.dm-locale-selector__triggercopy,
.dm-locale-selector__currentcopy,
.dm-locale-selector__copy{
  min-width: 0;
  display: grid;
  gap: .18rem;
  overflow-wrap: anywhere;
}
.dm-locale-selector__triggerlabel,
.dm-locale-selector__title,
.dm-locale-selector__currentcopy strong{
  min-inline-size: 0;
  max-inline-size: 100%;
  font-weight: 600;
  color: var(--rb-white);
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.dm-locale-selector__triggersub,
.dm-locale-selector__subtitle,
.dm-locale-selector__currentcopy span,
.dm-locale-selector__currentlabel{
  min-inline-size: 0;
  max-inline-size: 100%;
  font-size: .88rem;
  color: var(--dm-auth-muted);
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.dm-locale-selector__copy span{
  min-inline-size: 0;
  max-inline-size: 100%;
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.dm-locale-selector__triggerlabel,
.dm-locale-selector__triggersub{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-locale-selector__flag{
  flex: 0 0 auto;
  font-size: 1.2rem;
  line-height: 1;
}
.dm-locale-selector__panel{
  position: absolute;
  top: calc(100% + .6rem);
  inset-inline-end: 0;
  width: min(400px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(6,43,70,0.98), rgba(6,43,70,0.94));
  box-shadow: 0 20px 40px rgba(0,0,0,0.28);
  z-index: 1000;
}
[dir="rtl"] .dm-locale-selector__panel{
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.dm-locale-selector__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .8rem;
}
.dm-locale-selector__heading{
  font-size: 1rem;
  font-weight: 600;
}
.dm-locale-selector__close{
  border: 0;
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  background: rgba(255,255,255,0.08);
  color: var(--rb-white);
  cursor: pointer;
}
.dm-locale-selector__searchwrap{
  display: block;
  margin-bottom: .8rem;
}
.dm-locale-selector__search{
  width: 100%;
  min-inline-size: 0;
  padding: .72rem .82rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  color: var(--rb-white);
}
.dm-locale-selector__search::placeholder{
  color: rgba(255,255,255,0.68);
}
.dm-locale-selector__currentmeta{
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: .45rem;
  min-inline-size: 0;
}
.dm-locale-selector__currentchips,
.dm-locale-selector__chips{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  min-inline-size: 0;
}
.dm-locale-selector__currentchips{
  margin-bottom: .85rem;
}
.dm-locale-selector__chip{
  display: inline-flex;
  align-items: center;
  max-inline-size: 100%;
  padding: .2rem .52rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  color: var(--dm-auth-muted);
  font-size: .76rem;
  overflow-wrap: anywhere;
}
.dm-locale-selector__list{
  display: grid;
  gap: .6rem;
  min-inline-size: 0;
  max-inline-size: 100%;
}
.dm-locale-selector__country{
  min-inline-size: 0;
  max-inline-size: 100%;
}
.dm-locale-selector__option{
  width: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .78rem .82rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  color: var(--rb-white);
  cursor: pointer;
  text-align: start;
  overflow-wrap: anywhere;
  word-break: normal;
}
.dm-locale-selector__country-languages{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin-top: .4rem;
}
.dm-locale-selector__option:hover,
.dm-locale-selector__option.is-active{
  border-color: rgba(140,216,244,0.45);
  background: rgba(140,216,244,0.12);
}
.dm-locale-selector__empty{
  padding-top: .7rem;
  color: var(--dm-auth-muted);
}
.dm-locale-selector__trigger:focus-visible,
.dm-locale-selector__search:focus-visible,
.dm-locale-selector__option:focus-visible,
.dm-locale-selector__locale-chip:focus-visible,
.dm-locale-selector__close:focus-visible{
  outline: 2px solid var(--rb-light-blue);
  outline-offset: 2px;
}

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

#cta-btn.btn-primary {
  width: min(100%, 280px);
  min-height: 64px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #8CD8F4 0%, #fff 100%);
  color: var(--rb-blue);
  box-shadow: none;
  font-size: 1.25rem;
  line-height: 1.15;
  font-weight: 700;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  overflow: hidden;
  transform: translateZ(0);
  transition: background .2s, color .2s, transform .2s, opacity .5s ease-in;
}
#cta-btn.btn-primary::before {
  content: none;
}
#cta-btn.btn-primary img {
  height: 48px;
  width: auto;
  margin-right: 0.7em;
  flex-shrink: 0;
}
#cta-btn.btn-primary:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg, #062B46 0%, #0D4B78 100%);
  color: var(--rb-light-blue);
  box-shadow: none;
}
#cta-btn.btn-primary.fade-in {
  animation: fadeIn 1s ease-in forwards;
}
#cta-btn.btn-primary.fade-out {
  animation: fadeOut 1s ease-out forwards;
}
#cta-btn.btn-primary.skapa {
  transition: opacity .5s ease-in, background .2s, color .2s, transform .2s;
}

/* 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-view .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-view .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-view .pricing-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.06);
}
#pricing-view .pricing-table tbody tr:hover td {
  background: rgba(140,216,244,0.10);
}
.pricing-source-note,
.pricing-footnote{
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--rb-light-blue);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.pricing-source-note{
  color: rgba(255,255,255,0.84);
}

/* Yes / No emphasis consistent */
#pricing-view .pricing-table td .yes {
  color: #56de9f;
  font-weight: 700;
}
#pricing-view .pricing-table td .no {
  color: var(--rb-danger-text);
  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);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dm-modal {
    backdrop-filter: blur(4px);
    -webkit-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.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), 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;
  }
  .dm-saml-motion-loader__sweep,
  .dm-saml-motion-loader__page,
  .dm-saml-motion-loader__line {
    animation: none !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-view .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); }

/* ── Session expired layout ───────────────────────────────── */
#session-expired-view { padding: 2.5rem 1.5rem 3rem; }
.session-expired-container {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: 18px;
  border: 1px solid var(--rb-border);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    radial-gradient(700px 600px at 18% -5%, rgba(140,216,244,0.14), rgba(140,216,244,0)),
    radial-gradient(500px 500px at 90% 10%, rgba(211,242,255,0.12), rgba(211,242,255,0)),
    var(--rb-page-gradient);
  box-shadow: var(--rb-shadow);
  backdrop-filter: blur(12px);
}
.session-expired-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.session-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rb-light-blue);
  width: max-content;
}
.session-copy {
  max-width: 52ch;
  line-height: 1.6;
}
.session-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
}
.session-point {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--rb-shadow-xs);
}
.icon-circle {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--rb-blue);
  background: linear-gradient(145deg, rgba(140,216,244,0.38), rgba(211,242,255,0.22));
  flex: 0 0 42px;
}
.icon-circle i{
  font-size: 1.2rem;
  line-height: 1;
}
.point-title {
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.point-copy {
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 0.9;
}
.session-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 0.5rem;
}
.session-hint {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.78);
}
.session-expired-visual {
  position: relative;
  min-height: 260px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--rb-border-2);
  background:
    radial-gradient(520px 320px at 20% 15%, rgba(140,216,244,0.18), rgba(140,216,244,0)),
    radial-gradient(520px 320px at 80% 30%, rgba(211,242,255,0.16), rgba(211,242,255,0)),
    linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: var(--rb-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.session-burst {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.16), rgba(255,255,255,0));
  filter: blur(28px);
  opacity: 0.7;
}
.session-lockup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.2rem 1.4rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  box-shadow: var(--rb-shadow-xs);
}
.session-lock-glyph {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--rb-dark);
  background: linear-gradient(135deg, var(--rb-accent-1), var(--rb-white));
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
  font-size: 1.9rem;
}
.session-status {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.10);
  font-weight: 600;
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7AE28C;
  box-shadow: 0 0 0 6px rgba(122,226,140,0.14);
  display: inline-block;
}

/* ── 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 {
  width: min(100%, 360px);
  min-height: 64px;
  padding: 0.95rem 1.25rem;
  font-size: 1.1rem;
  gap: 0.65rem;
}
#session-expired-login-btn img {
  height: 1.35em;
  margin: 0;
}
#session-expired-login-btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.38);
}

@media (max-width: 960px) {
  .session-expired-container { grid-template-columns: 1fr; }
  .session-expired-visual { min-height: 220px; }
}
@media (max-width: 620px) {
  #session-expired-view { padding: 1.75rem 1.1rem 2.25rem; }
  .session-pill { width: 100%; justify-content: center; }
  .session-actions { align-items: stretch; }
  #session-expired-login-btn { width: 100%; }
}

/* ── 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; 
  align-items: center;
  flex: 0 0 auto; 
  white-space: nowrap; 
}

/* 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-view .pricing-cards,
.ai-grid,
.auth-cards,
.send-container{
  margin-inline: auto;
  max-width: 100%;
}

/* Let flex/grid items shrink instead of forcing overflow */
#pricing-view .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 */
}

/* Pricing cards are CSS Grid items on the public pricing surface. */
#pricing-view .pricing-cards .card{
  flex: initial;
}

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


/* ============================================================
   Mobile-first layout & navigation refresh
   ============================================================ */
:root{
  --toolbar-height: 84px;
  /* Runtime-measured value lives here; falls back to the static default */
  --dm-toolbar-height: var(--toolbar-height);
}
@media (max-width: 640px){
  :root{
    --toolbar-height: 72px;
    --dm-toolbar-height: var(--toolbar-height);
  }
}

/* When JS confirms the toolbar is floating (mobile), collapse the grid row
   and drive spacing from the measured toolbar height to avoid double bars. */
@media (max-width: 1024px){
  html.dm-toolbar-floating body{
    padding-top: 0 !important;
  }
  html.dm-toolbar-floating .dm-root-container{
    grid-template-rows: 0 1fr auto;
  }
  html.dm-toolbar-floating .dm-content{
    padding-top: var(--dm-toolbar-height, var(--toolbar-height));
    min-height: calc(100vh - var(--dm-toolbar-height, var(--toolbar-height)));
  }
}

/* Logo stack controls desktop/mobile swap */
.dm-logo-container{
  height: auto;
}
.dm-logo-stack{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 56px;
}
.dm-logo-stack .dm-logo-desktop,
.dm-logo-stack .dm-logo-mobile{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity .28s ease, transform .28s ease;
}
.dm-logo-stack .dm-logo-desktop{
  opacity: 1;
}
.dm-logo-stack .dm-logo-mobile{
  object-fit: cover;
  opacity: 0;
  transform: translateY(calc(-50% + 8px)) scale(.97);
  width: 56px;
  height: 56px;
  max-width: 56px;
  margin: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  top: 50%;
  border-radius: 12px;
  overflow: hidden;
}
.dm-logo-stack .dm-logo-mobile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.dm-logo-stack.show-mobile .dm-logo-desktop{
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  pointer-events: none;
}
.dm-logo-stack.show-mobile .dm-logo-mobile{
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Nav toggle */
.nav-toggle{
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
   flex: 0 0 auto;
  margin-inline-start: auto;
  border-radius: 10px;
  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));
  color: var(--rb-white);
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.nav-toggle:hover{
  transform: translateY(-1px);
  border-color: var(--rb-border-2);
}
.nav-toggle-box{
  display: grid;
  gap: 6px;
}
.nav-toggle-box span{
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.dm-root-container.nav-open .nav-toggle-box span:nth-child(1){
  transform: translateY(4px) rotate(45deg);
}
.dm-root-container.nav-open .nav-toggle-box span:nth-child(2){
  opacity: 0;
}
.dm-root-container.nav-open .nav-toggle-box span:nth-child(3){
  transform: translateY(-4px) rotate(-45deg);
}

/* Nav scrim */
.dm-nav-scrim{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 110;
}

/* Table overflow helper */
#pricing-view .table-scroll{
  width: 100%;
  overflow-x: auto;
  border-radius: 10px;
  margin-top: 1rem;
}
#pricing-view .table-scroll .pricing-table{
  min-width: 760px;
}
#pricing-view .pricing-action{
  inline-size: 100%;
  max-inline-size: none;
}
#pricing-view .pricing-action:disabled:hover,
#pricing-view .pricing-action[aria-disabled="true"]:hover{
  transform: none;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28), 0 6px 16px rgba(12,61,100,0.30);
}
#pricing-view[data-dm-pricing-state="pending"] [data-dm-pricing-card-value],
#pricing-view[data-dm-pricing-state="fallback"] [data-dm-pricing-card-value],
#pricing-view [data-dm-pricing-state="fallback"]{
  color: var(--rb-white);
}
#pricing-view .pricing-table td[data-dm-pricing-row]{
  min-inline-size: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* Layout refinements */
.dm-toolbar{
  align-items: center;
  gap: 1rem;
}
.dm-toolbar-left{
  min-width: 180px;
  max-width: 280px;
  width: clamp(180px, 32vw, 260px);
}
.dm-toolbar-right{
  min-width: 0;
}

/* Mobile + tablet */
@media (max-width: 1024px){
  body{
    display: block;
    min-height: 100vh;
    height: auto;
    align-items: stretch;
    padding-top: var(--dm-toolbar-height, var(--toolbar-height));
  }

  .dm-root-container{
    height: auto;
    min-height: 100vh;
    border-radius: 0;
    padding-top: 0;
  }

  .dm-toolbar{
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 140;
    padding-inline: var(--page-gutter);
  }

  .dm-toolbar-left{
    min-width: 160px;
    width: clamp(160px, 42vw, 240px);
  }

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

  .dm-toolbar-right{
    position: fixed;
    inset: var(--dm-toolbar-height, var(--toolbar-height)) var(--page-gutter) auto var(--page-gutter);
    max-height: calc(100vh - var(--dm-toolbar-height, var(--toolbar-height)));
    padding: 1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(6,43,70,0.95), rgba(6,43,70,0.88));
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 14px 30px rgba(0,0,0,0.28);
    transform: translateY(-120%);
    transition: transform .24s ease, opacity .24s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 130;
    overflow: hidden; /* prevent overlay scrollbar from covering toggle */
  }
  .dm-toolbar-right .dm-nav{
    max-height: calc(100vh - var(--dm-toolbar-height, var(--toolbar-height)) - 2.5rem);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .dm-toolbar-right .dm-nav::-webkit-scrollbar{ display: none; }

  .dm-root-container.nav-open .dm-toolbar-right{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* hide scrollbars in the open state */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .dm-root-container.nav-open .dm-toolbar-right::-webkit-scrollbar{ display: none; }

  .dm-root-container.nav-open .dm-nav-scrim{
    display: block;
  }

  .dm-nav{
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    min-width: 100%;
  }

  .dm-nav a{
    width: 100%;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  }

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

  .lang-switch{
    width: 100%;
    justify-content: flex-start;
    padding-top: 0.25rem;
  }
  .dm-locale-selector{
    width: min(100%, 420px);
  }
  .dm-locale-selector__panel{
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: min(100%, calc(100vw - (2 * var(--page-gutter))));
  }

  .dm-content{
    padding: 1.25rem var(--page-gutter);
    overflow: visible;
    margin-top: 0;
    min-height: calc(100vh - var(--dm-toolbar-height, var(--toolbar-height)));
  }

  .dm-content > .dm-view{
    max-width: 100%;
  }

  .dm-footer{
    padding-inline: var(--page-gutter);
  }
}

/* Locale selector geometry upgrade */
.dm-toolbar-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  min-width: 0;
  overflow: visible;
}
[dir="rtl"] .dm-toolbar-right{
  justify-content: flex-start;
}
.dm-toolbar-right::after{
  display: none;
}
.dm-nav{
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
}
.dm-nav a{
  flex: 0 0 auto;
}
.lang-switch{
  flex: 0 0 auto;
  min-width: 0;
  max-width: min(360px, 32vw);
  margin-inline-start: 0;
}
.lang-switch .dm-locale-selector{
  inline-size: 100%;
}

@media (max-width: 1024px){
  .dm-toolbar-right{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: .875rem;
    max-block-size: calc(100dvh - var(--dm-toolbar-height, var(--toolbar-height)) - (2 * var(--page-gutter)));
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .dm-toolbar-right .dm-nav{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
    min-width: 0;
    max-height: none;
    overflow: visible;
    scrollbar-width: auto;
    -ms-overflow-style: auto;
  }
  .dm-toolbar-right .dm-nav::-webkit-scrollbar{
    display: initial;
  }
  .dm-root-container.nav-open .dm-toolbar-right{
    scrollbar-width: auto;
    -ms-overflow-style: auto;
  }
  .dm-root-container.nav-open .dm-toolbar-right::-webkit-scrollbar{
    display: initial;
  }
  .lang-switch{
    width: 100%;
    max-width: none;
    padding-top: 0;
    justify-content: stretch;
  }
  .dm-locale-selector{
    inline-size: 100%;
  }
  .dm-locale-selector__panel{
    position: static;
    inset: auto;
    inline-size: 100%;
    max-inline-size: 100%;
    max-block-size: min(52dvh, 420px);
    margin-block-start: .75rem;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 16px;
  }
}

/* Small screens */
@media (max-width: 768px){
  .dm-toolbar{
    padding-block: 0.75rem;
  }

  .dm-root-container{
    box-shadow: none;
  }

  .dm-logo-stack{
    min-height: 54px;
  }

  .dm-logo-mobile{
    max-width: 180px;
  }

  .home-title{
    font-size: 1.75rem;
    text-align: center;
  }

  .home-hero{
    gap: 0.8rem;
    margin-bottom: 1.35rem;
  }

  .home-hero-lead{
    font-size: 1rem;
    line-height: 1.5;
  }

  .home-hero-flow{
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .home-hero-flow__item{
    min-height: 0;
  }

  .home-workflow-proof{
    max-width: 560px;
    padding: 0.75rem;
  }

  .home-workflow-proof__list{
    grid-template-columns: 1fr;
  }

  .cta-container{
    margin-bottom: 1.5rem;
  }

  .btn-primary{
    width: 100%;
    max-width: 340px;
  }

  #pricing-view .pricing-cards{
    gap: 0.75rem;
  }

  #pricing-view .pricing-cards .card{
    padding: 1rem;
  }

  #pricing-view .pricing-table th,
  #pricing-view .pricing-table td{
    font-size: 0.95rem;
  }

  .send-container{
    gap: 1rem;
  }

  .video-embed{
    max-width: 100%;
  }
}

/* Extra-small */
@media (max-width: 520px){
  .dm-toolbar-left{
    min-width: 150px;
    width: clamp(150px, 60vw, 210px);
  }

  .dm-nav a{
    font-size: 1rem;
  }

  .dm-logo-stack{
    min-height: 48px;
  }

}

/* Motion safety for logo swap */
@media (prefers-reduced-motion: reduce){
  .dm-logo-stack .dm-logo-desktop,
  .dm-logo-stack .dm-logo-mobile{
    transition: none;
  }
  .dm-toolbar-right{
    transition: none;
  }
}

/* Stack AI table as cards on narrow screens */
@media (max-width: 900px){
  .ai-table{ display: none; }
  .ai-stack{
    display: grid;
  }
}

/* Pricing stack (mobile) */
#pricing-view .pricing-stack{
  display: none;
  gap: 1rem;
  margin: 1rem 0 0;
}
#pricing-view .pricing-stack .plan-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-inline-size: 0;
  overflow: hidden;
  box-shadow: var(--rb-shadow-xs);
}
#pricing-view .pricing-stack .plan-meta{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-weight: 600;
  margin-top: .35rem;
}
#pricing-view .pricing-stack .plan-summary{
  padding: 1rem 1rem 0.75rem;
  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);
}
#pricing-view .pricing-stack .plan-summary h3{
  margin: 0 0 .35rem;
  color: var(--rb-light-blue);
  font-size: 1.2rem;
}
#pricing-view .pricing-stack .plan-price{
  font-size: 1.1rem;
  color: var(--rb-white);
}
#pricing-view .pricing-stack .plan-audience{
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
}
#pricing-view .pricing-stack ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
}
#pricing-view .pricing-stack li{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: .5rem;
  padding: .65rem .5rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  min-inline-size: 0;
}
#pricing-view .pricing-stack .feature-label{
  font-weight: 600;
  color: var(--rb-white);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
#pricing-view .pricing-stack .feature-value{
  text-align: end;
  color: var(--rb-white);
  min-inline-size: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
#pricing-view .pricing-stack .feature-value .yes{ color: #56de9f; font-weight: 700; }
#pricing-view .pricing-stack .feature-value .no { color: var(--rb-danger-text); font-weight: 700; }
#pricing-view .pricing-stack .plan-action{
  padding: 0 1rem 1rem;
}
#pricing-view .pricing-stack .pricing-stack-action{
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: var(--dm-pricing-cta-min-block);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 900px){
  #pricing-view .table-scroll{ display: none; }
  #pricing-view .pricing-cards{ display: none; }
  #bankid-step-5 .pricing-cards{
    display: flex;
    flex-direction: column;
  }
  #bankid-step-5 .pricing-cards .card{
    flex: 1 1 auto;
    width: 100%;
  }
  #pricing-view .pricing-stack{
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 1.25rem;
  }
}

@media (max-width: 480px){
  #pricing-view .pricing-stack li{
    grid-template-columns: 1fr;
  }
  #pricing-view .pricing-stack .feature-value{
    text-align: start;
  }
}

/* AI stack cards */
.ai-stack{
  display: none;
  gap: 1rem;
  margin-top: 1rem;
}
.ai-card-mobile{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  box-shadow: var(--rb-shadow-xs);
  padding: 1rem;
}
.ai-card-mobile h4{
  margin: 0 0 .5rem;
  color: var(--rb-light-blue);
  font-size: 1.1rem;
}
.ai-card-mobile .ai-what{
  font-weight: 600;
  margin: 0 0 .35rem;
  color: var(--rb-white);
}
.ai-card-mobile .ai-value{
  margin: 0;
  color: rgba(255,255,255,0.9);
}

@media (max-width: 900px){
  .ai-stack{
    display: grid;
  }
}

/* Run 017: responsive public-site geometry for newly added proof blocks. */
:root{
  --dm-public-grid-gap: clamp(0.75rem, 1.6vw, 1rem);
  --dm-public-card-pad: clamp(0.85rem, 1.4vw, 1.05rem);
  --dm-public-card-min-block: 9.5rem;
  --dm-public-integration-card-min-block: 11.5rem;
}

#home-view,
#ai-view,
#send-view,
#receive-view,
#sign-view,
#pay-view,
.google-workspace-section,
.data-rooms-proof,
.dm-public-ratings{
  min-inline-size: 0;
  max-inline-size: 100%;
}

.home-hero-flow,
.home-workflow-proof__list{
  align-items: stretch;
}

.home-hero-flow__item,
.home-workflow-proof__item,
.data-rooms-proof__item,
.ai-workflow-card,
.public-integration-card{
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.home-hero-flow__item,
.home-workflow-proof__item{
  min-block-size: 6.5rem;
}

.google-workspace-grid,
.data-rooms-proof__grid,
.ai-workflow-grid,
[data-public-integration-slot-cards]{
  display: grid;
  gap: var(--dm-public-grid-gap);
  align-items: stretch;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.google-workspace-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: 1rem;
}

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

.data-rooms-proof__item{
  min-block-size: var(--dm-public-card-min-block);
  padding: var(--dm-public-card-pad);
}

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

.ai-workflow-card{
  min-block-size: var(--dm-public-card-min-block);
}

[data-public-integration-slot-cards]{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-block: 1rem 1.25rem;
}

[data-public-integration-slot-cards][hidden]{
  display: none !important;
}

.public-integration-card{
  inline-size: 100%;
  min-block-size: var(--dm-public-integration-card-min-block);
  align-self: stretch;
  display: grid;
  grid-template-rows: auto 1fr;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: var(--rb-white);
}

.public-integration-card .box-header,
.public-integration-card .box-body{
  min-inline-size: 0;
}

.public-integration-card .box-header{
  align-items: flex-start;
  line-height: 1.25;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border-bottom: 1px solid rgba(255,255,255,0.12);
  color: var(--rb-white);
}

.public-integration-card .box-header span,
.public-integration-card .box-body :where(p, li, span){
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.public-integration-card [data-public-integration-card-icon]{
  color: var(--rb-light-blue) !important;
  flex: 0 0 auto;
  inline-size: 1.35em;
  text-align: center;
}

.public-integration-card [data-public-integration-card-title]{
  color: var(--rb-white);
}

.public-integration-card .box-body{
  display: grid;
  gap: 0.65rem;
  color: var(--rb-white);
}

.public-integration-card .box-body p{
  margin: 0;
}

.public-integration-card [data-public-integration-card-badge]{
  color: var(--rb-light-blue);
  font-weight: 700;
}

.public-integration-card [data-public-integration-card-bullets]{
  margin: 0;
  padding-inline-start: 1.15rem;
  list-style-position: outside;
}

[dir="rtl"] .public-integration-card [data-public-integration-card-bullets]{
  padding-inline-start: 0;
  padding-inline-end: 1.15rem;
}

.public-integration-card:focus-within{
  outline: 2px solid var(--rb-light-blue);
  outline-offset: 3px;
}

.dm-public-ratings{
  inline-size: min(100%, 720px);
}

.dm-public-ratings__star-picker{
  flex-wrap: wrap;
}

@media (max-width: 1024px){
  .home-hero-flow,
  .home-workflow-proof__list,
  .data-rooms-proof__grid,
  .ai-workflow-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .google-workspace-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px){
  .home-hero-flow,
  .home-workflow-proof__list,
  .data-rooms-proof__grid,
  .ai-workflow-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  #home-view{
    padding-inline: 0;
  }

  .home-hero-flow,
  .home-workflow-proof__list,
  .data-rooms-proof__grid,
  .ai-workflow-grid,
  [data-public-integration-slot-cards]{
    grid-template-columns: 1fr;
  }

  .home-hero-flow__item,
  .home-workflow-proof__item,
  .data-rooms-proof__item,
  .ai-workflow-card,
  .public-integration-card{
    min-block-size: 0;
  }

  .google-workspace-links,
  .data-rooms-proof__links,
  .home-proof-route-links{
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* CMP overlay */
[data-cmp-root]{
  position: fixed;
  inset: 0;
  z-index: 2200;
  pointer-events: none;
}
[data-cmp-root] .dm-cmp-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6,43,70,0.85);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
[data-cmp-root].cmp-visible{
  pointer-events: auto;
}
[data-cmp-root].cmp-visible .dm-cmp-overlay{
  opacity: 1;
  visibility: visible;
}
.dm-cmp-dialog{
  width: min(960px, 92vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--rb-blue);
  color: #fff;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.dm-cmp-header{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0.5rem;
}
.cmp-title-wrap h2{
  margin: 0 0 .25rem;
}
.cmp-subtitle{
  margin: 0;
  color: rgba(255,255,255,0.85);
}
.cmp-eyebrow{
  margin: 0 0 .25rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .75rem;
  color: var(--rb-light-blue);
}
.cmp-logo{
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
}
.cmp-logo img{
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.cmp-close{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
}
.dm-cmp-body{
  padding: 0 1.5rem 1rem;
  overflow-y: auto;
}
.cmp-policy a{
  color: var(--rb-light-blue);
  font-weight: 600;
  text-decoration: none;
}
.cmp-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: .75rem;
}
.cmp-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 0.85rem 1rem;
}
.cmp-card-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}
.cmp-cat-title{
  margin: 0 0 .25rem;
  font-weight: 700;
  color: #fff;
}
.cmp-cat-desc{
  margin: 0;
  color: rgba(255,255,255,0.85);
  font-size: .95rem;
}
.cmp-services{
  margin-top: .5rem;
}
.cmp-services-label{
  margin: 0 0 .35rem;
  font-weight: 600;
  color: var(--rb-light-blue);
}
.cmp-service{
  list-style: none;
  margin: 0;
  padding: .15rem 0;
}
.cmp-service.muted{
  color: rgba(255,255,255,0.6);
}
.cmp-toggle{
  display: inline-flex;
  align-items: center;
  position: relative;
}
.cmp-toggle input{
  opacity: 0;
  width: 0;
  height: 0;
}
.cmp-slider{
  width: 46px;
  height: 26px;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  position: relative;
  display: block;
  transition: background .2s ease;
}
.cmp-slider::after{
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s ease;
}
.cmp-toggle input:checked + .cmp-slider{
  background: var(--rb-light-blue);
}
.cmp-toggle input:checked + .cmp-slider::after{
  transform: translateX(18px);
}
.cmp-toggle input:disabled + .cmp-slider{
  opacity: .6;
}
.cmp-badge.essential{
  display: inline-block;
  padding: .35rem .6rem;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  font-weight: 600;
  color: #fff;
}
.dm-cmp-actions{
  display: flex;
  gap: .5rem;
  padding: 0 1.5rem 1.25rem;
}
.cmp-btn{
  flex: 1;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: .8rem 1rem;
  font-weight: 700;
  cursor: pointer;
}
.cmp-btn.primary{
  background: var(--rb-medium-blue);
  border-color: var(--rb-medium-blue);
}
.cmp-btn.ghost{
  background: transparent;
}
.cmp-btn:hover{
  filter: brightness(1.05);
}
.cmp-close:hover{
  background: rgba(255,255,255,0.08);
}
body.cmp-locked{
  overflow: hidden;
}
.footer-link.cmp-trigger-btn{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  color: inherit;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  text-align: left;
}
.footer-link.cmp-trigger-btn:hover{
  color: var(--rb-light-blue);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

@media (max-width: 640px){
  .dm-cmp-dialog{
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
  .dm-cmp-actions{
    flex-direction: column;
  }
}