/* ============================================================
   v2 overrides, loaded LAST in the robok group: cascade repairs
   against the app's global reset, plus the clean custom navbar that
   replaces the template's jQuery-dependent validnavs header.
   ============================================================ */

/* ---- Lenis smooth scroll ----
   CSS smooth scrolling must stay OFF: running it alongside Lenis makes
   the two fight for the scroll position, which reads as stutter. Lenis
   owns the motion, so these are its required styles. */
/* Bootstrap ships :root{scroll-behavior:smooth} inside a
   prefers-reduced-motion query. With the smooth-scroll library off,
   nothing else overrides it, and it would animate every programmatic
   scroll behind the user's back. Scrolling belongs to the browser. */
html,
:root {
  scroll-behavior: auto !important;
}

html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Preflight strips heading sizing; re-assert the template's voice. */
.robok-page h1,
.robok-page h2,
.robok-page h3,
.robok-page h4,
.robok-page h5,
.robok-page h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: 600;
  line-height: 1.2;
}
.robok-page h2 {
  font-size: 42px;
}
/* The dark machine windows keep their own type colours. */
.robok-page .dark h1,
.robok-page .dark h2,
.robok-page .dark h3,
.robok-page .dark h4,
.robok-page .dark h5,
.robok-page .dark h6 {
  color: inherit;
}
.robok-page .text-light h1,
.robok-page .text-light h2,
.robok-page .text-light h3,
.robok-page .text-light h4,
.robok-page .text-light h5 {
  color: #ffffff;
}
.robok-page p:not(.dark p) {
  color: var(--color-paragraph);
}
.robok-page .text-light p {
  color: var(--white-common);
}
.robok-page img {
  max-width: 100%;
  height: auto;
}
.robok-page a {
  text-decoration: none;
}
.robok-page ul {
  list-style: none;
}

/* ---- the clean navbar (no template JS required) ---- */
/* Clear glass over the top of the page, frosted once the page has
   moved under it (.bq-nav-scrolled is toggled in robok-init.js). */
.bq-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.bq-nav.bq-nav-scrolled {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: rgba(0, 6, 98, 0.06);
}
/* Without backdrop-filter the bar would be unreadable text over live
   content, so those browsers get a solid one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bq-nav.bq-nav-scrolled {
    background: rgba(255, 255, 255, 0.96);
  }
}
/* Anchored sections stop below the fixed bar, not behind it. */
.robok-page div[id],
.robok-page section[id] {
  scroll-margin-top: 96px;
}
.bq-nav .bq-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
}
.bq-nav .bq-links {
  display: none;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
}
@media (min-width: 992px) {
  .bq-nav .bq-links {
    display: flex;
  }
}
.bq-nav .bq-links a {
  color: var(--color-heading);
  font-weight: 500;
  font-size: 15px;
  transition: color 0.25s ease;
}
.bq-nav .bq-links a:hover {
  color: var(--color-primary);
}
.bq-nav .btn-style-one {
  padding: 13px 28px;
  white-space: nowrap;
}

/* ---- mobile menu ----
   Below 992px the inline links are hidden, which used to leave phones
   with no navigation at all above the footer. A <details> disclosure
   needs no JavaScript and closes over the same links the desktop bar
   shows, plus the trial CTA. */
.bq-nav-mobile {
  display: none;
  position: relative;
}
@media (max-width: 991px) {
  .bq-nav-mobile {
    display: block;
  }
  /* The inline CTA gives its spot to the menu on phones; the same
     action lives inside the menu panel instead. */
  .bq-nav .bq-nav-inner > .btn-style-one {
    display: none;
  }
}
.bq-nav-mobile > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 6, 98, 0.12);
  background: rgba(255, 255, 255, 0.7);
}
.bq-nav-mobile > summary::-webkit-details-marker {
  display: none;
}
.bq-nav-mobile > summary span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--color-heading);
}
.bq-nav-mobile[open] > summary span:nth-child(2) {
  opacity: 0;
}
.bq-nav-mobile nav {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  background: #ffffff;
  border: 1px solid rgba(0, 6, 98, 0.08);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 6, 98, 0.14);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bq-nav-mobile nav a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--color-heading);
  font-weight: 500;
  font-size: 15px;
}
.bq-nav-mobile nav a:active,
.bq-nav-mobile nav a:hover {
  background: rgba(116, 118, 255, 0.08);
}
.bq-nav-mobile nav .btn-style-one {
  margin-top: 8px;
  text-align: center;
  color: var(--white);
}

/* ---- hero heading as h1 ----
   The template dresses the banner heading as h2 and sizes it at three
   breakpoints (75/60/42px). The document needs an h1 for a correct
   outline, so the same look is carried here, fluid instead of stepped. */
.banner-style-three-info h1 {
  font-size: clamp(42px, 5.5vw, 75px);
  line-height: 1.1;
  margin-bottom: 25px;
}
.banner-style-three-info h1 strong {
  font-size: inherit;
  background: var(--bg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- hero chat bubbles, re-anchored ----
   The template parks BOTH bubbles at top:55% and separates them with
   margin-top offsets tuned to the one-line strings it shipped with,
   then pulls the second to right:-100px, off the viewport. Instead of
   patching those numbers, each bubble is anchored to its own edge of
   the column: the first hangs from the top, the second stands on the
   bottom. Neither position depends on the other's height, so longer
   copy can never make them collide or escape again. */
.chat-bot-thumb .chat-item {
  top: 4%;
  right: 0;
  margin-top: 0;
}
.chat-bot-thumb .chat-item:nth-child(2n) {
  top: auto;
  bottom: 4%;
  right: 0;
  margin-top: 0;
}
.chat-bot-thumb .chat-item p {
  max-width: 300px;
  text-align: left;
}
@media (max-width: 1399px) {
  .chat-bot-thumb .chat-item p {
    max-width: 260px;
  }
}

/* ---- FAQ accordion ----
   The template paints .accordion-body with --dark-secondary, and our
   paragraph rule paints the text --color-paragraph. Dark grey on dark
   charcoal is about 1.3:1 where WCAG asks 4.5:1, so the answers were
   effectively invisible once opened. Light panel, dark text. */
.robok-page .accordion-style-one-item .accordion-body {
  background: #ffffff;
  border-radius: 0 0 12px 12px;
  padding: 4px 22px 22px;
}
.robok-page .accordion-style-one-item .accordion-body p {
  color: var(--color-paragraph);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 0;
}
.robok-page .accordion-style-one-item {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.robok-page .accordion-style-one-item summary.accordion-button {
  font-size: 16px;
}

/* ---- entity canvases on small screens ----
   The mandala canvases are drawn at a fixed pixel size (up to 500px in
   the dark band). On a phone that is wider than the viewport; letting
   CSS scale the canvas down keeps the whole figure visible instead of
   cropping its wings. */
.choose-us-thumb canvas,
.chat-bot-thumb canvas,
.dashboard-info canvas {
  max-width: 100%;
  height: auto;
}

/* ---- site posts (blog, case studies, guides, changelog) ---- */
.bq-post-card {
  background: #ffffff;
  border: 1px solid rgba(0, 6, 98, 0.08);
  border-radius: 14px;
  padding: 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Featured image on a card. Fixed ratio so a row of cards lines up
   whatever shape the images are. */
.bq-post-thumb {
  display: block;
  margin: -28px -28px 18px;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
}
.bq-post-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.bq-post-thumb:hover img {
  transform: scale(1.04);
}
.bq-article-hero {
  width: 100%;
  border-radius: 14px;
  margin-bottom: 32px;
  display: block;
}
.bq-post-card h3 {
  font-size: 20px;
  line-height: 1.35;
  margin-bottom: 10px;
}
.bq-post-card h3 a {
  color: var(--color-heading);
}
.bq-post-card h3 a:hover {
  color: var(--color-primary);
}
.bq-post-card p {
  margin-bottom: 12px;
}
.bq-post-date {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.bq-post-more {
  margin-top: auto;
  font-weight: 600;
  color: var(--color-heading);
}
.bq-post-more i {
  font-size: 12px;
  margin-left: 6px;
}
.bq-article h2 {
  font-size: 28px;
  margin: 34px 0 14px;
}
.bq-article h3 {
  font-size: 21px;
  margin: 26px 0 12px;
}
.bq-article p,
.bq-article li {
  font-size: 16px;
  line-height: 1.9;
}
.bq-article ul,
.bq-article ol {
  padding-left: 22px;
  margin-bottom: 18px;
}
.bq-article ul li {
  list-style: disc;
}
.bq-article ol li {
  list-style: decimal;
}
.bq-article blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: 18px;
  margin: 22px 0;
  color: var(--color-heading);
}
.bq-changelog-entry {
  border-bottom: 1px solid rgba(0, 6, 98, 0.08);
  padding-bottom: 26px;
  margin-bottom: 30px;
}
.bq-changelog-entry h3 {
  margin-bottom: 10px;
}

/* ---- consent bar ----
   Two equally weighted buttons. Declining must be exactly as easy as
   accepting, which is both the legal test for valid consent and the
   only honest way to ask. */
.bq-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  max-width: 640px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(0, 6, 98, 0.12);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 6, 98, 0.16);
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
/* The fixed dialog would otherwise sit on top of the footer's last
   rows, hiding the copyright and the legal links.

   Reserve the room by EXTENDING THE FOOTER rather than adding a block
   after it. The first attempt used a spacer element, which reserved
   the space correctly and rendered it white, because it landed outside
   the dark footer on a white body: a bright band bolted under the
   page, which looked worse than the problem it solved.

   Growing the footer's own padding means the reserved space is the
   footer's colour by definition, with no second place to keep that
   colour in step. :has() also means it applies only while the dialog
   is on screen and unwinds by itself when the visitor chooses. */
body:has(.bq-consent) .bq-footer {
  padding-bottom: 216px;
}
.bq-consent p {
  flex: 1 1 280px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-paragraph);
}
.bq-consent a {
  color: var(--color-primary);
  text-decoration: underline;
}
.bq-consent-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.bq-consent button {
  border-radius: 9999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(0, 6, 98, 0.15);
  background: #ffffff;
  color: var(--color-heading);
}
/* `.bq-consent button` is (0,1,1) and this was (0,1,0), so the generic
   rule won and the accept button rendered white like the other two:
   three identical pills reading as one grey blob. Matching the
   compound selector's specificity fixes it.

   DELIBERATELY NOT a louder button than "Necessary only". Accepting and
   declining have to carry the same visual weight, or the consent stops
   being freely given under EU guidance. Both are solid and equal; the
   quiet one is "Choose", which only opens the detail. */
.bq-consent .bq-consent-accept,
.bq-consent .bq-consent-reject {
  background: #16182b;
  border-color: #16182b;
  color: #ffffff;
}
.bq-consent .bq-consent-accept:hover,
.bq-consent .bq-consent-reject:hover {
  background: #262a48;
  border-color: #262a48;
}
.bq-consent-options {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bq-consent-options label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-paragraph);
  cursor: pointer;
}
.bq-consent-options input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}
.bq-consent-options strong {
  color: var(--color-heading);
}
.bq-consent-note {
  font-size: 12px !important;
  color: var(--color-paragraph);
  opacity: 0.75;
  margin: 0 !important;
}
/* The withdrawal control, styled as the legal links beside it. */
.bq-cookie-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.bq-cookie-link:hover {
  color: var(--color-primary);
}

/* ---- the quotable sentence ----
   Speakable schema points a voice assistant at this selector, so it
   has to be one element containing one complete claim. */
.bq-takeaway {
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-heading);
  border-left: 3px solid var(--color-primary);
  padding: 2px 0 2px 20px;
  margin-bottom: 32px;
}

/* ---- FAQ, visible as well as structured ----
   Marking up questions that are not on the page is a guidelines
   violation, and a reader wants them anyway. */
.bq-faq {
  margin-top: 48px;
  border-top: 1px solid rgba(0, 6, 98, 0.08);
  padding-top: 28px;
}
.bq-faq h2 {
  font-size: 24px;
  margin-bottom: 16px;
}
.bq-faq-item {
  background: #ffffff;
  border: 1px solid rgba(0, 6, 98, 0.08);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.bq-faq-item summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 16px;
  color: var(--color-heading);
  list-style: none;
}
.bq-faq-item summary::-webkit-details-marker { display: none; }
.bq-faq-item[open] summary { padding-bottom: 6px; }
.bq-faq-item > div { padding: 0 20px 18px; }

/* ---- byline ---- */
.bq-byline {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 6, 98, 0.08);
}
.bq-byline-name {
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 2px;
}
.bq-byline-role {
  font-size: 13px;
  color: var(--color-primary);
  margin-bottom: 8px;
}

/* ---- case study: the stat band and the pull quote ----
   The two things a reader scans for, given room to be scanned. */
.bq-stat-band {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
  padding: 28px 0 36px;
  border-bottom: 1px solid rgba(0, 6, 98, 0.08);
  margin-bottom: 12px;
}
.bq-stat-value {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 4px;
}
.bq-stat-label {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0;
}
.bq-case-quote {
  border-left: 3px solid var(--color-primary);
  padding: 4px 0 4px 22px;
  margin: 38px 0 0;
}
.bq-case-quote p {
  font-size: 19px;
  line-height: 1.7;
  color: var(--color-heading);
  margin-bottom: 8px;
}
.bq-case-quote cite {
  font-size: 13px;
  font-style: normal;
  color: var(--color-paragraph);
}
@media (max-width: 767px) {
  .bq-stat-band { gap: 24px 32px; }
  .bq-stat-value { font-size: 30px; }
}

/* ---- inner-page banner (shared by every non-home page) ---- */
/* Top padding clears the fixed navbar that floats over it. */
.bq-page-banner {
  padding: 165px 0 80px;
  border-bottom: 1px solid rgba(0, 6, 98, 0.06);
}
.bq-page-banner .sub-title {
  margin-bottom: 10px;
}
.robok-page .bq-page-banner h1.title {
  font-size: 52px;
  line-height: 1.12;
  margin-bottom: 18px;
}
.bq-page-banner p {
  font-size: 17px;
  max-width: 640px;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .bq-page-banner {
    padding: 125px 0 55px;
  }
  .robok-page .bq-page-banner h1.title {
    font-size: 34px;
  }
}

/* ---- long-form legal pages ---- */
.bq-legal h2 {
  font-size: 22px;
  margin-bottom: 14px;
}
.bq-legal p,
.bq-legal li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-paragraph);
}
.bq-legal section {
  margin-top: 42px;
}
.bq-legal h3 {
  font-size: 17px;
  margin: 26px 0 10px;
}
.bq-legal ul,
.bq-legal ol {
  padding-left: 22px;
  margin-bottom: 16px;
}
.bq-legal ul li {
  list-style: disc;
  margin-bottom: 6px;
}
.bq-legal ol li {
  list-style: decimal;
  margin-bottom: 6px;
}
/* The entity block that opens both policies: who you are contracting
   with, which a policy is not valid without. */
.bq-legal .bq-entity {
  border-left: 3px solid var(--color-primary);
  padding: 4px 0 4px 18px;
  margin-bottom: 8px;
}
.bq-legal .bq-entity p {
  margin-bottom: 4px;
}
.bq-legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.bq-legal table th,
.bq-legal table td {
  border-bottom: 1px solid rgba(0, 6, 98, 0.08);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  color: var(--color-paragraph);
}
.bq-legal table th {
  color: var(--color-heading);
  font-weight: 600;
}
.bq-legal .bq-notice {
  border: 1px solid rgba(116, 118, 255, 0.35);
  background: rgba(116, 118, 255, 0.07);
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 14px;
  color: var(--color-paragraph);
}
.bq-legal .bq-notice strong {
  color: var(--color-heading);
}

/* Numbered editorial rows (features, about). */
.bq-row-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.14em;
}
.bq-hairline-list li {
  border-top: 1px solid rgba(0, 6, 98, 0.08);
  padding: 22px 0;
}
.bq-hairline-list li:last-child {
  border-bottom: 1px solid rgba(0, 6, 98, 0.08);
}
.bq-hairline-list h4 {
  font-size: 18px;
  margin-bottom: 6px;
}
.bq-hairline-list p {
  font-size: 14.5px;
  margin-bottom: 0;
}

/* Chip rows (the capability inventory). */
.bq-chip {
  display: inline-block;
  border: 1px solid rgba(0, 6, 98, 0.12);
  border-radius: 30px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  font-size: 13px;
  color: var(--color-paragraph);
  background: #ffffff;
  transition: all 0.25s ease;
}
.bq-chip:hover {
  border-color: rgba(116, 118, 255, 0.5);
  color: var(--color-heading);
}
.text-light .bq-chip {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--white-common);
}

/* ---- footer ---- */
.bq-footer {
  background: var(--dark-optional);
  color: var(--white-common);
}
.bq-footer .bq-footer-main {
  padding: 80px 0 40px;
}
.bq-footer h5 {
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.bq-footer p {
  color: var(--white-secondary);
  font-size: 14.5px;
  line-height: 1.8;
}
.bq-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bq-footer ul li {
  margin-bottom: 12px;
}
.bq-footer ul li a {
  color: var(--white-secondary);
  font-size: 14.5px;
  transition: color 0.25s ease;
}
.bq-footer ul li a:hover {
  color: #ffffff;
}
.bq-footer .bq-soon {
  color: rgba(181, 181, 188, 0.55);
  font-size: 14.5px;
}
.bq-footer .bq-soon span {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-left: 8px;
  color: var(--color-secondary);
}
/* The copyright line rendered at 3.04:1, below the 4.5:1 WCAG AA needs
   for normal text.

   NOTE THE SELECTOR. `.bq-footer p` is (0,1,1) and loses to the
   template's `.robok-page p:not(.dark p)` at (0,2,2), because :not()
   inherits the specificity of its argument. Leading with .robok-page
   takes this to (0,3,1). Measured in the browser rather than reasoned
   about: the first attempt at this rule was silently overridden and
   shipped looking unchanged. */
.robok-page .bq-footer .bq-subfooter p,
.robok-page .bq-footer .bq-subfooter nav a {
  color: #96969f;
}
.robok-page .bq-footer .bq-subfooter nav a:hover {
  color: #ffffff;
}
.bq-footer .bq-subfooter {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.bq-footer .bq-subfooter p {
  margin: 0;
  font-size: 13px;
  color: rgba(181, 181, 188, 0.75);
}
.bq-footer .bq-subfooter nav {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.bq-footer .bq-subfooter nav a {
  font-size: 13px;
  color: rgba(181, 181, 188, 0.75);
  transition: color 0.25s ease;
}
.bq-footer .bq-subfooter nav a:hover {
  color: #ffffff;
}

/* FAQ: template accordion skin on native details/summary. */
.robok-page details.accordion-style-one-item summary {
  list-style: none;
  cursor: pointer;
}
.robok-page details.accordion-style-one-item summary::-webkit-details-marker {
  display: none;
}
.robok-page details.accordion-style-one-item .accordion-body {
  padding-top: 0;
}

/* The demo island inherits Sora but keeps its own compact scale. */
.robok-page #cta .title {
  margin-bottom: 6px;
}

/* ---- demo island cascade repairs ----
   Bootstrap's .border utility carries !important and the template
   styles bare <button>; both flatten the island's pills. Re-assert
   the island's geometry inside this scope. */
.robok-page #cta .rounded-full {
  border-radius: 9999px !important;
}
.robok-page #cta .rounded-2xl {
  border-radius: 1rem !important;
}
.robok-page #cta .rounded-xl {
  border-radius: 0.75rem !important;
}
.robok-page #cta .rounded-md {
  border-radius: 0.375rem !important;
}
.robok-page #cta .rounded {
  border-radius: 0.25rem !important;
}
.robok-page #cta .border {
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: rgba(13, 18, 32, 0.14);
}

/* ---- the dark machine windows embedded in these light pages ----
   Same Bootstrap collisions as the demo island: `.border` carries
   !important and would flatten the window's hairline to Bootstrap
   gray, and bare <button> loses its radius. */
.robok-page .dark .border {
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #273156;
}
.robok-page .dark .rounded-full {
  border-radius: 9999px !important;
}
.robok-page .dark .rounded-2xl {
  border-radius: 1rem !important;
}
.robok-page .dark .rounded-xl {
  border-radius: 0.75rem !important;
}
.robok-page .dark .rounded-lg {
  border-radius: 0.5rem !important;
}
.robok-page .dark .rounded-md {
  border-radius: 0.375rem !important;
}
.robok-page #cta textarea {
  border: none;
  box-shadow: none;
  outline: none;
}

/* Bootstrap ships same-named spacing helpers with !important on a
   different scale (3 = 1rem, 4 = 1.5rem, 5 = 3rem); re-assert the
   Tailwind values for the names the island actually uses. */
.robok-page .p-3 {
  padding: 0.75rem !important;
}
.robok-page .p-4 {
  padding: 1rem !important;
}
.robok-page .p-5 {
  padding: 1.25rem !important;
}
.robok-page .px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.robok-page .px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.robok-page .py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
.robok-page .py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.robok-page .mt-3 {
  margin-top: 0.75rem !important;
}

/* Bootstrap's reset sets font-size/line-height: inherit on <button>,
   which outranks the layered Tailwind text utilities on the chips. */
.robok-page button.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.robok-page button.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}