/* ==========================================================================
   IOTA Labs — brand layer
   Loaded AFTER the base template stylesheet. Everything brand-specific lives
   here so the vendor CSS stays untouched and upgradable.
   ========================================================================== */

:root {
  /* --- Brand constants ---------------------------------------------------
     Taken from the logo artwork. These two are the identity; they do not get
     tuned to suit a layout. Everything else on this page is derived.     */
  --iota--brand-navy: #050B35;
  --iota--brand-blue: #0241FB;

  /* --- Accent ramp -------------------------------------------------------
     The template drives every button, gradient text and glow from a single
     4-stop ramp. Swapping these four values re-skins the whole site.
     Anchored on the logo blue and opened out to violet so the gradients
     still have somewhere to travel.                                     */
  --color--primary-1: #0241FB; /* brand blue — the logo's accent square */
  --color--primary-2: #3B6BFF; /* azure */
  --color--primary-3: #6A6BFF; /* indigo */
  --color--primary-4: #9B5CFF; /* violet */

  /* --- Interactive accent ------------------------------------------------
     The brand blue is only 2.9:1 against --color--dark, so it cannot carry
     text, links, focus rings or small icons. Those use a lightened tint of
     the same hue: #6E9BFF is 7.2:1 (AAA). Keep the brand blue for large
     fills and gradient stops, where contrast is not load-bearing.       */
  --iota--accent: #6E9BFF;
  --iota--accent-soft: #A8C2FF;
  --iota--accent-deep: #9B5CFF;
  --iota--glow: #0241FB59;

  /* Slightly cooler neutrals — pairs better with a cyan accent than the
     original warm-leaning grays. */
  --color--gray-2: #171b24;
  --color--gray-6: #19212f;
  --color--border-color: #7d94a833;
}

/* --- Vendor badge injected by the Webflow runtime ------------------------ */
.w-webflow-badge {
  display: none !important;
}

/* --- Text selection ------------------------------------------------------ */
::selection {
  background: var(--iota--accent);
  color: #05080f;
}

/* --- Keyboard focus (the template ships none) ---------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--iota--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The template kills the ring on form fields with `.w-input:focus {outline:0}`,
   which at (0,2,0) out-specifies the element selector above -- so text inputs
   and selects had no focus indicator at all. Match that specificity to put it
   back; without this the forms fail WCAG 2.4.7. */
.w-input:focus-visible,
.w-select:focus-visible,
.w-input:focus-visible[type="text"],
textarea.w-input:focus-visible {
  outline: 2px solid var(--iota--accent);
  outline-offset: 2px;
  border-color: var(--iota--accent);
}

/* --- Primary buttons: add a soft accent glow ----------------------------- */
.button-primary,
.nav-button-sm {
  box-shadow: 0 0 0 0 var(--iota--glow);
  transition: box-shadow .35s ease, transform .35s ease;
}

.button-primary:hover,
.nav-button-sm:hover {
  box-shadow: 0 6px 28px -6px var(--iota--glow);
}

/* --- Logo plinth: cool it down from neutral gray to a deep blue-black ---
   Solid background-color under the gradient so page text cannot show through
   the circle when it protrudes above/below the floating nav pill. */
.nav-brand-wrap,
.solution-logo-wrap {
  background-color: #04070d;
  background-image: linear-gradient(#26314a, #04070d);
  box-shadow: inset 0 0 0 1px #0241FB2e;
}

/* Keep the floating nav above the bottom blur veil and above Webflow IX
   transforms on long pages (blog body text was painting over the AI badge).
   Still below chat (1500) and the cookie banner (2000). */
.navbar {
  z-index: 1100;
  isolation: isolate;
  transform: translateZ(0);
}

.blur-gradient {
  z-index: 1;
  pointer-events: none;
}

/* Engine Room CTA: Webflow IX starts .tech-stack-content-main at opacity:0
   and fades it in on scroll. On production that interaction often never
   completes, so "Put This Stack To Work" is in the DOM but invisible.
   Keep the block and the button painted regardless of IX. The head also
   hides .button-primary until .w-mod-ix3; beat that for this CTA. */
.tech-stack-content-main {
  opacity: 1 !important;
  transform: none !important;
}

.tech-stack-cta {
  z-index: 4;
  opacity: 1 !important;
}

html.w-mod-js .tech-stack-cta a.button-primary {
  visibility: visible !important;
}

/* Testimonials no longer carry the "4.5 rating" row. Keep the slider from
   collapsing via height:100% against a shorter title stack, and add a little
   top air to the FAQ so it does not ride up under the slider arrows. */
.testimonial-slider {
  height: auto;
  min-height: 30.8125rem;
}

.testimonial-disclosure {
  max-width: 38rem;
  margin: .75rem auto 0;
  color: var(--color--gray-5);
  font-size: var(--_typography---body--body-sm);
  line-height: 1.55;
  text-align: center;
}

.testimonial-avatar {
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--color--border-color);
}

.testimonial-context-label {
  border: 1px solid var(--color--border-color);
  border-radius: 999px;
  padding: .35rem .65rem;
  color: var(--color--gray-5);
  font-family: "JetBrains Mono", monospace;
  font-size: .6875rem;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

.faqs-section {
  padding-top: 4.5rem;
}

/* --- Homepage newsletter -------------------------------------------------
   A deliberately secondary conversion panel between the hero and the main
   content. It borrows the site's inset borders, cool surfaces and mono CTA
   language without competing with the discovery-call buttons. */
.home-newsletter-section {
  position: relative;
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

.home-newsletter-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(26rem, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
  padding: clamp(2rem, 4.5vw, 4rem);
  border: 1px solid var(--color--border-color);
  border-radius: var(--border-radius--m);
  background:
    radial-gradient(circle at 82% 15%, #0241fb20, transparent 38%),
    linear-gradient(145deg, #111722 0%, var(--color--dark) 70%);
  box-shadow: 0 0 0 6px var(--color--gray-1);
}

.home-newsletter-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 9px,
    #7d94a80a 9px,
    #7d94a80a 10px
  );
  pointer-events: none;
}

.home-newsletter-copy,
.home-newsletter-action {
  position: relative;
  z-index: 1;
}

.home-newsletter-heading {
  max-width: 15ch;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: 1.08;
}

.home-newsletter-body {
  max-width: 34rem;
  margin: 0;
  color: var(--_color---body-text);
  font-size: var(--_typography---body--body-m);
  line-height: 1.55;
}

.home-newsletter-form {
  margin: 0;
}

.home-newsletter-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .625rem;
}

.home-newsletter-input {
  min-width: 0;
  width: 100%;
  height: 3.75rem;
  margin: 0;
  padding: 0 1.125rem;
  border: 1px solid #858b9440;
  border-radius: var(--border-radius--form-input);
  background: linear-gradient(180deg, var(--color--gray-2), #0b0f17);
  color: var(--color--white);
  font: inherit;
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.home-newsletter-input::placeholder {
  color: var(--color--gray-3);
}

.home-newsletter-input:hover {
  border-color: #858b9470;
}

.home-newsletter-input.is-invalid {
  border-color: #ff667d;
  box-shadow: 0 0 0 3px #ff667d1f;
}

.home-newsletter-button {
  min-height: 3.75rem;
  padding: 0 1.35rem;
  border: 1px solid #6e9bff70;
  border-radius: var(--border-radius--button);
  background: linear-gradient(180deg, #252c39, #171b24);
  color: var(--color--white);
  font-family: var(--_typography---font-family--body-alt);
  font-size: var(--_typography---body--body-s);
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.home-newsletter-button:hover:not(:disabled) {
  border-color: var(--iota--accent);
  background: linear-gradient(180deg, #2b3444, #1b2130);
  transform: translateY(-1px);
}

.home-newsletter-button:disabled {
  opacity: .58;
  cursor: wait;
}

.home-newsletter-note,
.home-newsletter-message {
  margin: .75rem 0 0;
  font-size: var(--_typography---body--body-xs);
  line-height: 1.45;
}

.home-newsletter-note {
  color: var(--color--gray-3);
}

.home-newsletter-error {
  color: #ff8a9d;
}

.home-newsletter-success {
  color: #8fe7bd;
}

.home-newsletter-message[hidden] {
  display: none !important;
}

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

@media (max-width: 991px) {
  .home-newsletter-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .home-newsletter-heading,
  .home-newsletter-body {
    max-width: 38rem;
  }
}

@media (max-width: 600px) {
  .home-newsletter-section {
    padding: 3rem 0;
  }

  .home-newsletter-panel {
    gap: 1.75rem;
    padding: 1.5rem;
  }

  .home-newsletter-heading {
    font-size: 2rem;
  }

  .home-newsletter-body {
    font-size: var(--_typography---body--body-sm);
  }

  .home-newsletter-field {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-newsletter-button {
    width: 100%;
  }
}

/* --- Logo system --------------------------------------------------------
   Two files carry the identity: the mark (1225:1232, near enough square)
   and the horizontal lockup (4339:1232, i.e. 3.522:1). The template had
   sized these slots 36x42 for the old portrait mark, which letterboxes the
   new one, so each slot is re-cut to the real aspect ratio.

   The mark ships in two optical sizes. Below ~48px the separator gaps fall
   under a pixel and the counters close up, so anything at UI scale uses
   the -compact cut, which opens those gaps to ~3.5%. object-fit is kept as
   a guard in case a slot is ever resized without updating the ratio.    */
.logo,
.solution-logo,
.footer-logo,
.hero-logo,
.footer-bottom-logo {
  object-fit: contain;
  object-position: center;
}

/* The two slots that sit inside a round plinth use the -badge cut, which
   pads its viewBox to 1400 wide so the ink is optically centred. That costs
   12.5% of the slot, so these are sized up to compensate and still read the
   same size as the flat marks elsewhere. */
.logo {
  width: 39px;
  height: 39px;
}

.solution-logo {
  width: 43px;
  height: 43px;
}

.footer-logo {
  width: 42px;
  height: 42px;
}

/* Full lockup in the hero: let width follow the aspect ratio */
.hero-logo {
  width: auto;
  height: 34px;
}

/* Footer ghost lockup, lifted just enough to read as intentional */
.footer-bottom-logo {
  opacity: .07;
  width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  .solution-logo {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 767px) {
  .logo {
    width: 27px;
    height: 27px;
  }
}

/* --- Statutory trading disclosure -------------------------------------
   Required on a UK limited company's website by the Companies (Trading
   Disclosures) Regulations 2008. Small, but it must be legible.        */
.footer-legal-entity {
  color: var(--color--gray-3);
  font-size: var(--_typography---body--body-xs);
  line-height: 1.6em;
  max-width: 62ch;
  margin: 0 auto .5rem;
}

/* --- Form honeypot -------------------------------------------------------
   Bait field for bots. Must stay in the layout and remain focusable-free
   rather than display:none, which some bots detect and skip. Screen readers
   ignore it via aria-hidden + tabindex="-1" on the input itself.        */
.iota-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --- Form error message: the template styles it as a generic block ------- */
.w-form-fail {
  border-radius: var(--border-radius--s, 6px);
}

/* --- Cookie consent banner ---------------------------------------------
   Sits bottom-left on desktop so it clears the floating nav, and stacks
   above the nav bar on mobile. Accept and Reject are given equal visual
   weight, which ICO guidance requires.                                  */
.cookie-banner {
  position: fixed;
  z-index: 2000;
  bottom: 1.5rem;
  left: 1.5rem;
  width: min(27rem, calc(100vw - 3rem));
  padding: 1.375rem 1.5rem 1.5rem;
  border: 1px solid var(--color--border-color);
  border-radius: var(--border-radius--m);
  background: linear-gradient(var(--color--gray-1), var(--color--dark));
  box-shadow: 0 24px 60px -18px #000c, 0 0 0 1px #0241FB1f;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-banner-title {
  margin: 0 0 .5rem;
  color: var(--color--white);
  font-family: var(--_typography---font-family--body-alt);
  font-size: var(--_typography---body--body-s);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cookie-banner-text {
  margin: 0 0 1.125rem;
  color: var(--color--gray-3);
  font-size: var(--_typography---body--body-s);
  line-height: 1.6em;
}

.cookie-banner-link {
  color: var(--iota--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap--gap-3);
}

.cookie-btn {
  flex: 1 1 0;
  min-width: 8.5rem;
  padding: .75rem 1rem;
  border: 1px solid var(--color--border-color);
  border-radius: var(--border-radius--button);
  background: var(--color--gray-2);
  color: var(--color--white);
  font-family: var(--_typography---font-family--body-alt);
  font-size: var(--_typography---body--body-s);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.cookie-btn:hover {
  border-color: var(--iota--accent);
  transform: translateY(-1px);
}

.cookie-btn-accept {
  border-color: #0241FB99;
  background: linear-gradient(var(--color--gray-6), var(--color--gray-2));
}

@media (max-width: 767px) {
  .cookie-banner {
    left: .75rem;
    right: .75rem;
    bottom: 6.5rem; /* clear the floating mobile nav */
    width: auto;
  }
}

/* --- Custom scrollbar --------------------------------------------------- */
* {
  scrollbar-color: #2a3444 var(--color--dark);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color--dark);
}

::-webkit-scrollbar-thumb {
  background: #2a3444;
  border: 2px solid var(--color--dark);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3b4a5e;
}

/* --- Generated blog article body ----------------------------------------
   Webflow's .blog-rich-text assumes CMS HTML with padded h1/h4 and only
   styles <p>. Our pipeline must emit proper <p> tags; these rules keep
   spacing/indentation consistent when it does.                         */
.blog-rich-text {
  max-width: 700px;
}

.blog-rich-text > *:first-child {
  margin-top: 0;
}

.blog-rich-text h2,
.blog-rich-text h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-left: 0;
  padding-right: 0;
  font-weight: 600;
  line-height: 1.35;
}

.blog-rich-text h2:first-child,
.blog-rich-text h3:first-child {
  margin-top: 0;
}

.blog-rich-text p {
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-left: 0;
  padding-right: 0;
  line-height: 1.7;
}

.blog-rich-text ul,
.blog-rich-text ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}

.blog-rich-text li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.blog-rich-text a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.blog-rich-text strong {
  font-weight: 600;
}

/* ==========================================================================
   iotalabs AI assistant
   Built from the brand tokens above so the widget reads as part of the site
   rather than a bolted-on chat product. Every colour is a token or a token
   derivative; nothing introduces a new theme.

   Stacking order, deliberately: cookie banner (2000) > chat (1500) > floating
   navbar (1100). The consent banner is a legal control and must always win.
   ========================================================================== */

:root {
  --iota-chat-z: 1500;
  --iota-chat-surface: #10141d;
  --iota-chat-surface-2: #161b26;
  --iota-chat-line: #26303f;
  --iota-chat-radius: var(--border-radius--l, 1.875rem);
  /* Clears the floating navbar (bottom 40px + pill) on desktop. */
  --iota-chat-offset: 112px;
}

/* An explicit display value beats the UA stylesheet's [hidden] rule, so any
   chat element using display:flex would stay laid out (and keep swallowing
   clicks) after being hidden. Restore the expected behaviour explicitly. */
.iota-chat-panel[hidden],
.iota-chat-quick[hidden],
.iota-chat-lead-slot[hidden] { display: none !important; }

/* --- launcher ----------------------------------------------------------- */
.iota-chat-launcher {
  position: fixed;
  right: 24px;
  bottom: var(--iota-chat-offset);
  z-index: var(--iota-chat-z);
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 52px;
  padding: 0 1.125rem 0 .875rem;
  border: 1px solid var(--color--border-color);
  border-radius: 999px;
  background: linear-gradient(#26314a, #070b14);
  box-shadow: 0 10px 30px -10px #000c, inset 0 0 0 1px #0241fb2e;
  color: var(--color--white);
  font-family: var(--_typography---font-family--body-alt);
  font-size: var(--_typography---body--body-s);
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.iota-chat-launcher:hover {
  transform: translateY(-2px);
  border-color: #0241fb99;
  box-shadow: 0 16px 38px -12px #000d, 0 0 0 1px var(--iota--glow);
}

.iota-chat-launcher-mark { width: 22px; height: 22px; display: block; }
.iota-chat-launcher-label { white-space: nowrap; }

/* A single attention cue on first visit, never a loop. */
@keyframes iota-chat-nudge {
  0%, 100% { transform: translateY(0); }
  15%      { transform: translateY(-6px); }
  30%      { transform: translateY(0); }
  45%      { transform: translateY(-3px); }
  60%      { transform: translateY(0); }
}
.iota-chat-launcher.is-nudge { animation: iota-chat-nudge 2.2s ease; }

/* --- the nav brand plinth acts as the assistant trigger ------------------ */
.iota-chat-trigger {
  cursor: pointer;
  position: relative;
  z-index: 2;
  overflow: visible;
  /* The brand slot is a 80×40 layout spacer; never paint it as a rect button. */
  background: transparent;
  box-shadow: none;
}

.iota-chat-trigger .brand-bg-inner-wrap {
  z-index: 3;
  isolation: isolate;
  /* Opaque disk behind the rainbow ring so scrolled blog copy cannot bleed
     through the protruding plinth. */
  background-color: #04070d;
}

.iota-chat-trigger .brand-bg-inner-wrap,
.iota-chat-trigger .nav-brand-wrap {
  overflow: visible;
}

/* Keep the circular plinth a fixed circle so the AI badge and logo cannot
   reflow into a rectangular hit-target while Webflow/IX settle. */
.iota-chat-trigger .nav-brand-wrap {
  position: relative;
  z-index: 2;
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 100%;
  background-color: #04070d;
  background-image: linear-gradient(#26314a, #04070d);
}

/* Animated AI/CHAT badge. It stays entirely inside the circular launcher and
   alternates its cue so the control reads as a chatbot without external copy. */
.iota-chat-trigger-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 34px;
  height: 18px;
  border: 1px solid #0f1830;
  border-radius: 999px;
  background: var(--iota--accent);
  box-shadow: 0 0 0 0 #6e9bff00;
  color: #071022;
  font-family: var(--_typography---font-family--body-alt);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  animation: iota-chat-badge-pulse 3.8s ease-in-out infinite;
}

.iota-chat-trigger-badge-ai,
.iota-chat-trigger-badge-chat {
  position: absolute;
  display: grid;
  place-items: center;
  inset: 0;
  transition: opacity .25s ease, transform .25s ease;
}

.iota-chat-trigger-badge-ai {
  animation: iota-chat-badge-ai 5s ease-in-out infinite;
}

.iota-chat-trigger-badge-chat {
  opacity: 0;
  transform: translateY(6px);
  animation: iota-chat-badge-chat 5s ease-in-out infinite;
}

@keyframes iota-chat-badge-ai {
  0%, 38%, 100% { opacity: 1; transform: translateY(0); }
  48%, 82% { opacity: 0; transform: translateY(-6px); }
}

@keyframes iota-chat-badge-chat {
  0%, 38%, 92%, 100% { opacity: 0; transform: translateY(6px); }
  48%, 82% { opacity: 1; transform: translateY(0); }
}

@keyframes iota-chat-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 #6e9bff00; }
  50% { box-shadow: 0 0 0 5px #6e9bff1f, 0 0 14px 2px #0241fb40; }
}

/* Focus the circle, not the rectangular <a.brand> box. */
.iota-chat-trigger:focus,
.iota-chat-trigger:focus-visible {
  outline: none;
}

.iota-chat-trigger:focus-visible .nav-brand-wrap {
  outline: 2px solid var(--iota--accent);
  outline-offset: 4px;
}

/* Nudge animates the plinth (where the badge lives), never the brand spacer. */
.iota-chat-trigger .brand-bg-inner-wrap.is-nudge,
.iota-chat-launcher.is-nudge {
  animation: iota-chat-nudge 2.2s ease;
}

/* Fallback launcher only — never show beside an adopted nav brand. */
body:has(.iota-chat-trigger) .iota-chat-launcher {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .iota-chat-trigger .nav-brand-wrap {
    width: 46px;
    height: 46px;
  }

  .iota-chat-trigger-badge {
    top: 2px;
    right: 2px;
    width: 28px;
    height: 15px;
    font-size: .4375rem;
  }
}

/* --- nav: hold the right-hand links from first paint --------------------
   The floating nav is a Webflow "variant" component whose right-hand list
   (Pricing, Blog) is finalised by Webflow's runtime JS. On a cold load that
   JS lands after first paint, so the right side can briefly render empty and
   the bar looks lopsided. Pinning the homepage desktop state in render-blocking
   CSS removes that flash. Specificity (0,4,0) beats Webflow's own (0,2,0) rules
   without !important. Scoped to the home variant and >=768px, so other pages and
   the mobile hamburger overlay are untouched. */
@media screen and (min-width: 768px) {
  .navbar[data-wf--navbar--variant="home"] .nav-menu-right { display: flex; }
  .navbar[data-wf--navbar--variant="home"] .nav-list.home { display: flex; }
  .navbar[data-wf--navbar--variant="home"] .nav-list:not(.home) { display: none; }
}

/* --- modal shell -------------------------------------------------------- */
.iota-chat-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--iota-chat-z) - 1);
  background: #04060cd9;
  backdrop-filter: blur(3px);
  animation: iota-chat-fade .18s ease;
}

@keyframes iota-chat-fade { from { opacity: 0; } to { opacity: 1; } }

.iota-chat-panel,
.iota-chat-panel * { box-sizing: border-box; }

.iota-chat-panel {
  position: fixed;
  z-index: var(--iota-chat-z);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--iota-chat-line);
  border-radius: var(--iota-chat-radius);
  background:
    radial-gradient(1100px 520px at 50% -10%, #16224a4d, transparent 70%),
    var(--iota-chat-surface);
  box-shadow: 0 40px 120px -30px #000f, 0 0 0 1px #0241fb1f;
  color: var(--color--white);
  font-family: var(--_typography---font-family--body);
  overflow: hidden;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

/* docked (restored-down) */
.iota-chat-panel:not(.is-expanded) {
  left: 50%;
  bottom: calc(var(--iota-chat-offset) + 4px);
  width: min(480px, calc(100vw - 48px));
  height: min(640px, calc(100vh - var(--iota-chat-offset) - 76px));
  transform: translateX(-50%) translateY(10px) scale(.99);
}
.iota-chat-panel:not(.is-expanded).is-open { opacity: 1; transform: translateX(-50%); }

/* full screen */
.iota-chat-panel.is-expanded {
  inset: 24px;
  width: auto;
  height: auto;
  max-width: 1560px;
  margin: 0 auto;
  transform: scale(.99);
}
.iota-chat-panel.is-expanded.is-open { opacity: 1; transform: none; }

/* --- header ------------------------------------------------------------- */
.iota-chat-header {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--iota-chat-line);
  background: linear-gradient(#141b2c, #10141d);
  flex: none;
}

.iota-chat-brand { display: flex; align-items: center; gap: .5rem; flex: none; }
.iota-chat-brand-mark { width: 24px; height: 24px; display: block; }
.iota-chat-wordmark { font-size: 1rem; font-weight: 500; letter-spacing: -.01em; }
.iota-chat-wordmark-name { color: #fff; }
.iota-chat-wordmark-ai {
  margin-left: .25rem;
  color: var(--iota--accent);
  font-weight: 600;
}
.iota-chat-beta {
  padding: .15rem .4rem;
  border: 1px solid #2f3d5c;
  border-radius: 5px;
  background: #18213a;
  color: #9fb4d8;
  font-family: var(--_typography---font-family--body-alt);
  font-size: .625rem;
  letter-spacing: .08em;
}
.iota-chat-headrule { width: 1px; height: 22px; background: var(--iota-chat-line); flex: none; }
.iota-chat-tagline {
  color: var(--color--gray-3);
  font-size: var(--_typography---body--body-s);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.iota-chat-header-actions {
  display: flex; align-items: center; gap: .375rem;
  margin-left: auto; flex: none;
}

.iota-chat-ghostbtn {
  padding: .5rem .875rem;
  border: 1px solid var(--iota-chat-line);
  border-radius: var(--border-radius--sm, .5rem);
  background: #161d2c;
  color: #c3cddb;
  font-family: var(--_typography---font-family--body-alt);
  font-size: .719rem;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.iota-chat-ghostbtn:hover { border-color: var(--iota--accent); color: #fff; }

.iota-chat-icon-btn {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid transparent;
  border-radius: var(--border-radius--sm, .5rem);
  background: none;
  color: var(--color--gray-3);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.iota-chat-icon-btn:hover {
  color: #fff; background: var(--iota-chat-surface-2); border-color: var(--iota-chat-line);
}

/* A full-screen modal must not let the page scroll behind it. Scoped to the
   expanded state so the docked panel still allows normal page scrolling. */
body.iota-chat-open { overflow: hidden; }

/* --- body --------------------------------------------------------------- */
.iota-chat-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- welcome screen ----------------------------------------------------- */
.iota-chat-welcome {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1.5rem 1.75rem;
  text-align: center;
}
.iota-chat-welcome[hidden] { display: none; }

/* A single, calm app-icon tile — no orbiting ring. The mark carries the brand;
   the tile just gives it a resting place. */
.iota-chat-halo {
  display: inline-grid;
  place-items: center;
  width: 60px; height: 60px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--iota-chat-line);
  border-radius: 15px;
  background: linear-gradient(160deg, #1a2338, #0f1420);
  box-shadow: inset 0 1px 0 0 #ffffff0d, 0 10px 30px -14px var(--iota--glow);
}
.iota-chat-halo-ring { display: none; }
.iota-chat-halo-tile { display: contents; }
.iota-chat-halo-mark { width: 30px; height: 30px; display: block; }

.iota-chat-hello {
  margin: 0 0 .625rem;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: #fff;
}
.iota-chat-hello-accent {
  color: var(--iota--accent);
}
.iota-chat-hello-sub {
  margin: 0 auto 2rem;
  max-width: 32rem;
  color: var(--color--gray-3);
  font-size: var(--_typography---body--body-sm);
  line-height: 1.6;
}

/* starting-point cards */
.iota-chat-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 0;
  text-align: left;
}
.iota-chat-card {
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1.125rem;
  border: 1px solid var(--iota-chat-line);
  border-radius: var(--border-radius--m, .625rem);
  background: linear-gradient(#141b2b, #10151f);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.iota-chat-card[hidden] { display: none; }
.iota-chat-card:hover {
  border-color: #3f56b8;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -14px var(--iota--glow);
}
.iota-chat-card-icon { color: var(--iota--accent); line-height: 0; margin-bottom: .35rem; }
.iota-chat-card-title { color: #fff; font-size: var(--_typography---body--body-sm); font-weight: 500; }
.iota-chat-card-blurb { color: var(--color--gray-3); font-size: .781rem; line-height: 1.5; }
.iota-chat-card-arrow {
  display: grid; place-items: center;
  width: 26px; height: 26px; margin-top: .5rem;
  border: 1px solid var(--iota-chat-line);
  border-radius: 50%;
  color: #7e8ca3;
  line-height: 0;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.iota-chat-card:hover .iota-chat-card-arrow {
  color: #fff; border-color: var(--iota--accent); transform: translateX(2px);
}

/* project brief */
.iota-chat-brief {
  border: 1px solid var(--iota-chat-line);
  border-radius: var(--border-radius--m, .625rem);
  background: #111826;
  text-align: left;
  overflow: hidden;
}
.iota-chat-brief-head {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1rem;
}
.iota-chat-brief-icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--iota-chat-line);
  border-radius: 9px;
  background: #172033;
  color: var(--iota--accent);
  line-height: 0;
}
.iota-chat-brief-titles { display: flex; flex-direction: column; min-width: 0; }
.iota-chat-brief-title {
  color: #fff;
  font-family: var(--_typography---font-family--body-alt);
  font-size: var(--_typography---body--body-s);
  font-weight: var(--_typography---body--font-weight-500, 500);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.iota-chat-brief-sub { color: var(--color--gray-3); font-size: .75rem; }
.iota-chat-brief-progress {
  display: flex; align-items: center; gap: .625rem;
  margin-left: auto; flex: none;
}
.iota-chat-brief-count {
  color: var(--color--gray-3);
  font-family: var(--_typography---font-family--body-alt);
  font-size: .719rem;
}
.iota-chat-brief-bar {
  display: block; width: 120px; height: 4px;
  border-radius: 999px; background: #232d42; overflow: hidden;
}
.iota-chat-brief-fill {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color--primary-2), var(--color--primary-4));
  transition: width .3s ease;
}
.iota-chat-brief-toggle { transition: transform .2s ease; }
.iota-chat-brief.is-collapsed .iota-chat-brief-toggle { transform: rotate(180deg); }

.iota-chat-brief-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .25rem .75rem;
  padding: 0 1rem 1rem;
}
.iota-chat-brief.is-collapsed .iota-chat-brief-list { display: none; }

.iota-chat-brief-item {
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .5rem .25rem;
  border: 0; background: none;
  color: #b6c2d4;
  font-size: var(--_typography---body--body-s);
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: color .2s ease, background .2s ease;
}
.iota-chat-brief-item:hover { color: #fff; background: #172033; }
.iota-chat-brief-dot {
  width: 16px; height: 16px; flex: none; margin-top: .15rem;
  border: 1.5px solid #3a465e;
  border-radius: 50%;
  transition: background .2s ease, border-color .2s ease;
}
.iota-chat-brief-item.is-active .iota-chat-brief-dot { border-color: var(--iota--accent); }
.iota-chat-brief-item.is-done .iota-chat-brief-dot {
  border-color: #46d39a;
  background: #46d39a;
  box-shadow: inset 0 0 0 3px #111826;
}
.iota-chat-brief-item.is-done { color: #7f8ca0; }
.iota-chat-brief-q { flex: 1 1 auto; }

/* --- footer / composer -------------------------------------------------- */
.iota-chat-foot {
  flex: none;
  padding: .875rem 1.125rem 1rem;
  border-top: 1px solid var(--iota-chat-line);
  background: linear-gradient(#0f141e, #0c1018);
}
.iota-chat-composer {
  display: flex; align-items: center; gap: .625rem;
  max-width: 900px; margin: 0 auto;
  padding: .5rem .5rem .5rem .75rem;
  border: 1px solid #2b3a63;
  border-radius: 999px;
  background: #0d1220;
  box-shadow: 0 0 0 1px #0241fb1a, 0 10px 30px -18px #000;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.iota-chat-composer:focus-within {
  border-color: var(--iota--accent);
  box-shadow: 0 0 0 3px var(--iota--glow);
}
.iota-chat-composer-spark {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: linear-gradient(#1d2a54, #141b2e);
  color: var(--iota--accent);
  line-height: 0;
}
.iota-chat-input {
  flex: 1 1 auto;
  min-height: 26px; max-height: 132px;
  padding: .25rem 0;
  border: 0; background: none;
  color: #fff;
  font-family: var(--_typography---font-family--body);
  font-size: var(--_typography---body--body-sm);
  line-height: 1.5;
  resize: none;
}
.iota-chat-input:focus { outline: none; }
.iota-chat-input::placeholder { color: #5f6b7d; }
.iota-chat-send {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color--primary-2), var(--color--primary-1));
  color: #fff;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.iota-chat-send:disabled { opacity: .35; cursor: not-allowed; }
.iota-chat-send:not(:disabled):hover { transform: scale(1.05); }

.iota-chat-disclaimer {
  margin: .625rem 0 0;
  color: #5f6b7d;
  font-size: .688rem;
  text-align: center;
}

.iota-chat-stopwrap { text-align: center; }
.iota-chat-stopwrap:not(:empty) { padding-bottom: .625rem; }

/* --- transcript --------------------------------------------------------- */
.iota-chat-log {
  /* Cap the measure: full-bleed lines in a 1500px modal are unreadable.
     Matches the composer's width so the column reads as one. */
  max-width: 900px;
  margin: 0 auto;
  flex: 1 1 auto;
  min-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  scroll-behavior: smooth;
}

.iota-chat-row { display: flex; flex-direction: column; max-width: 100%; }
.iota-chat-row-user { align-items: flex-end; }
.iota-chat-row-assistant { align-items: flex-start; }

.iota-chat-bubble {
  max-width: 88%;
  padding: .625rem .875rem;
  border-radius: 14px;
  font-size: var(--_typography---body--body-s);
  line-height: 1.6;
  /* long URLs and unbroken words must never widen the panel */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.iota-chat-bubble-user {
  background: linear-gradient(#1d2740, #141a26);
  border: 1px solid #2a3550;
  border-bottom-right-radius: 5px;
  color: var(--color--white);
}

.iota-chat-bubble-assistant {
  background: var(--iota-chat-surface-2);
  border: 1px solid var(--iota-chat-line);
  border-bottom-left-radius: 5px;
  color: #dbe3ee;
}

.iota-chat-bubble p { margin: 0 0 .5rem; }
.iota-chat-bubble p:last-child { margin-bottom: 0; }
.iota-chat-list { margin: 0 0 .5rem; padding-left: 1.1rem; }
.iota-chat-list:last-child { margin-bottom: 0; }
.iota-chat-list li { margin: 0 0 .25rem; }
.iota-chat-bubble code {
  padding: .1em .35em;
  border-radius: 4px;
  background: #0b0f18;
  font-family: var(--_typography---font-family--body-alt);
  font-size: .85em;
}
.iota-chat-link {
  color: var(--iota--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.iota-chat-link:hover { color: var(--iota--accent-soft); }

.iota-chat-tools { margin-top: .25rem; }
.iota-chat-tool {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: #5f6b7d;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.iota-chat-tool:hover { color: var(--iota--accent); border-color: var(--iota-chat-line); }
.iota-chat-tool.is-done { color: #46d39a; }

/* typing indicator */
.iota-chat-typing {
  display: inline-flex; gap: 4px;
  padding: .75rem .875rem;
  border: 1px solid var(--iota-chat-line);
  border-radius: 14px;
  background: var(--iota-chat-surface-2);
}
.iota-chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--iota--accent);
  animation: iota-chat-dot 1.1s infinite ease-in-out;
}
.iota-chat-typing span:nth-child(2) { animation-delay: .15s; }
.iota-chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes iota-chat-dot {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* --- quick actions ------------------------------------------------------ */
.iota-chat-quick {
  display: flex; flex-wrap: wrap; gap: .375rem;
  padding: 0 1rem .75rem;
  flex: none;
}
.iota-chat-chip {
  padding: .4rem .7rem;
  border: 1px solid var(--iota-chat-line);
  border-radius: 999px;
  background: var(--iota-chat-surface-2);
  color: #c3cddb;
  font-family: var(--_typography---font-family--body-alt);
  font-size: .75rem;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.iota-chat-chip:hover {
  border-color: #0241fb99;
  color: var(--color--white);
  transform: translateY(-1px);
}

/* --- composer ----------------------------------------------------------- */
.iota-chat-composer {
  display: flex; align-items: flex-end; gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--iota-chat-line);
  background: var(--iota-chat-surface);
  flex: none;
}

.iota-chat-input {
  flex: 1 1 auto;
  min-height: 40px; max-height: 132px;
  padding: .55rem .75rem;
  border: 1px solid var(--iota-chat-line);
  border-radius: 10px;
  background: #0c1018;
  color: var(--color--white);
  font-family: var(--_typography---font-family--body);
  font-size: var(--_typography---body--body-s);
  line-height: 1.5;
  resize: none;
}
.iota-chat-input::placeholder { color: #5f6b7d; }
.iota-chat-input:focus { border-color: var(--iota--accent); outline: none; }

.iota-chat-send {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid #0241fb66;
  border-radius: 10px;
  background: linear-gradient(var(--color--primary-1), #0230c4);
  color: #fff;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.iota-chat-send:disabled { opacity: .4; cursor: not-allowed; }
.iota-chat-send:not(:disabled):hover { transform: translateY(-1px); }

/* --- footer / misc ------------------------------------------------------ */
.iota-chat-footer {
  padding: 0 1rem .75rem;
  color: #5f6b7d;
  font-size: .688rem;
  line-height: 1.5;
  flex: none;
}
.iota-chat-textbtn {
  border: 0; background: none; padding: 0;
  color: var(--iota--accent);
  font: inherit;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.iota-chat-textbtn:hover { color: var(--iota--accent-soft); }

.iota-chat-stopwrap:not(:empty) { padding: 0 1rem .5rem; flex: none; }
.iota-chat-stop {
  padding: .35rem .7rem;
  border: 1px solid var(--iota-chat-line);
  border-radius: 999px;
  background: var(--iota-chat-surface-2);
  color: #c3cddb;
  font-family: var(--_typography---font-family--body-alt);
  font-size: .719rem;
  cursor: pointer;
}
.iota-chat-stop:hover { border-color: var(--iota--accent); color: #fff; }

.iota-chat-error {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
  padding: .625rem .75rem;
  border: 1px solid #7a2b3a;
  border-radius: 10px;
  background: #1d1218;
  color: #ffb4c0;
  font-size: var(--_typography---body--body-s);
  line-height: 1.55;
}

.iota-chat-success {
  padding: .75rem .875rem;
  border: 1px solid #1f5f46;
  border-radius: 10px;
  background: #0f1d18;
  color: #8ce3bd;
  font-size: var(--_typography---body--body-s);
  line-height: 1.6;
}

/* --- lead form ---------------------------------------------------------- */
.iota-chat-lead-slot:not(:empty) {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem .75rem;
  flex: none;
  max-height: 46vh;
  overflow-y: auto;
}
.iota-chat-leadcta { padding-top: .25rem; }
.iota-chat-secondary,
.iota-chat-primary {
  padding: .55rem .9rem;
  border-radius: 10px;
  font-family: var(--_typography---font-family--body-alt);
  font-size: var(--_typography---body--body-s);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.iota-chat-secondary {
  border: 1px solid #0241fb99;
  background: var(--iota-chat-surface-2);
  color: #fff;
}
.iota-chat-primary {
  border: 1px solid #0241fb66;
  background: linear-gradient(var(--color--primary-1), #0230c4);
  color: #fff;
}
.iota-chat-primary:disabled { opacity: .5; cursor: not-allowed; }
.iota-chat-secondary:hover,
.iota-chat-primary:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -8px var(--iota--glow);
}

.iota-chat-lead {
  margin-top: .5rem;
  padding: .875rem;
  border: 1px solid var(--iota-chat-line);
  border-radius: 12px;
  background: var(--iota-chat-surface-2);
}
.iota-chat-lead-title {
  margin: 0 0 .25rem;
  font-size: var(--_typography---body--body-sm);
  font-weight: 500;
  color: #fff;
}
.iota-chat-lead-intro {
  margin: 0 0 .75rem;
  color: var(--color--gray-3);
  font-size: .75rem;
  line-height: 1.55;
}
.iota-chat-field { margin-bottom: .625rem; }
.iota-chat-label {
  display: block;
  margin-bottom: .25rem;
  color: #c3cddb;
  font-size: .719rem;
}
.iota-chat-lead-input {
  width: 100%;
  padding: .5rem .625rem;
  border: 1px solid var(--iota-chat-line);
  border-radius: 8px;
  background: #0c1018;
  color: #fff;
  font-family: var(--_typography---font-family--body);
  font-size: var(--_typography---body--body-s);
  resize: vertical;
}
.iota-chat-lead-input:focus { border-color: var(--iota--accent); outline: none; }
.iota-chat-lead-input.is-invalid { border-color: #e0607a; }
.iota-chat-fielderr {
  margin: .25rem 0 0;
  color: #ffb4c0;
  font-size: .688rem;
  line-height: 1.5;
}
.iota-chat-consent {
  display: flex; gap: .5rem; align-items: flex-start;
  margin: .5rem 0 .25rem;
}
.iota-chat-consent input { margin-top: .2rem; width: 16px; height: 16px; flex: none; }
.iota-chat-consent-label {
  color: var(--color--gray-3);
  font-size: .719rem;
  line-height: 1.55;
}
.iota-chat-leadactions {
  display: flex; align-items: center; gap: .75rem;
  margin-top: .75rem;
}

/* --- focus visibility (inherits the site's accent) ---------------------- */
.iota-chat-launcher:focus-visible,
.iota-chat-panel button:focus-visible,
.iota-chat-panel textarea:focus-visible,
.iota-chat-panel input:focus-visible,
.iota-chat-panel a:focus-visible {
  outline: 2px solid var(--iota--accent);
  outline-offset: 2px;
}

/* --- when the cookie banner is showing, lift the launcher clear of it --- */
body:has(.cookie-banner.is-visible) .iota-chat-launcher { bottom: calc(var(--iota-chat-offset) + 8px); }

/* --- tablet / small laptop --------------------------------------------- */
@media (max-width: 991px) {
  /* Docked panel only - the expanded modal sizes itself from its insets. */
  .iota-chat-panel:not(.is-expanded) {
    height: min(600px, calc(100vh - var(--iota-chat-offset) - 80px));
    max-height: calc(100vh - var(--iota-chat-offset) - 80px);
  }
}

/* --- tablet / small laptop --------------------------------------------- */
@media (max-width: 1100px) {
  .iota-chat-cards { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .iota-chat-tagline { display: none; }
  .iota-chat-headrule { display: none; }
}

@media (max-width: 860px) {
  .iota-chat-panel.is-expanded { inset: 0; border-radius: 0; border: 0; }
  .iota-chat-brief-list { grid-template-columns: 1fr; }
  .iota-chat-brief-progress { display: none; }
  .iota-chat-welcome { padding: 1.5rem 1rem 1rem; }
  .iota-chat-halo-ring { width: 220px; height: 120px; }
}

/* --- mobile ------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --iota-chat-offset: 104px; }

  /* Full screen is the only sensible mode on a phone. Selectors must match
     the specificity of .iota-chat-panel.is-expanded (0,2,0) or the desktop
     inset:24px keeps winning. */
  .iota-chat-panel.is-expanded,
  .iota-chat-panel:not(.is-expanded) {
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    /* inset:0 already pins all four edges - an explicit height fights it and
       100dvh does not always equal the layout viewport in embedded browsers. */
    height: auto;
    max-width: none;
    margin: 0;
    border-radius: 0;
    border: 0;
    transform: translateY(12px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .iota-chat-panel.is-expanded.is-open,
  .iota-chat-panel:not(.is-expanded).is-open { transform: none; }

  /* Restore-down is meaningless full-bleed; hide the control. */
  .iota-chat-panel .iota-chat-icon-btn[aria-label="Restore down"],
  .iota-chat-panel .iota-chat-icon-btn[aria-label="Expand to full screen"] { display: none; }

  .iota-chat-ghostbtn { padding: .45rem .6rem; font-size: .688rem; }
  .iota-chat-icon-btn { width: 40px; height: 40px; }
  .iota-chat-cards { grid-template-columns: 1fr 1fr; gap: .625rem; }
  .iota-chat-card { padding: .875rem; }
  .iota-chat-card-arrow { display: none; }
  .iota-chat-hello { font-size: 1.625rem; }
  .iota-chat-hello-sub { font-size: var(--_typography---body--body-s); margin-bottom: 1.125rem; }
  .iota-chat-cats { gap: .375rem; }
  .iota-chat-cat { padding: .4rem .75rem; font-size: .781rem; }
  .iota-chat-bubble { max-width: 92%; }
  .iota-chat-send { width: 44px; height: 44px; }
  .iota-chat-foot { padding: .75rem .75rem .875rem; }

  body.iota-chat-open { overflow: hidden; }
}

@media (max-width: 420px) {
  .iota-chat-cards { grid-template-columns: 1fr; }
  .iota-chat-beta { display: none; }
}

/* --- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .iota-chat-panel,
  .iota-chat-launcher,
  .iota-chat-chip,
  .iota-chat-send,
  .iota-chat-primary,
  .iota-chat-secondary,
  .iota-chat-card,
  .iota-chat-cat,
  .iota-chat-brief-fill,
  .iota-chat-overlay { transition: none; animation: none; }
  .iota-chat-launcher.is-nudge { animation: none; }
  .iota-chat-typing span { animation: none; opacity: .6; }
  .iota-chat-trigger-badge,
  .iota-chat-trigger-badge-ai,
  .iota-chat-trigger-badge-chat { animation: none; }
  .iota-chat-trigger-badge-ai { opacity: 0; }
  .iota-chat-trigger-badge-chat { opacity: 1; transform: none; }
  .iota-chat-log { scroll-behavior: auto; }
}

/* --- Pricing: scope tags (shown in place of a price) + section subhead ---
   The pricing cards now lead with a build-timeframe/term tag instead of a
   number. Styled as a pill matching the site's other tags so the card layout
   and rhythm are preserved. */
.pricing-scope {
  display: inline-flex;
  align-items: center;
  padding: .5rem .95rem;
  border: 1px solid var(--color--border-color);
  border-radius: 999px;
  background: var(--color--gray-2, #171b24);
  color: var(--iota--accent);
  font-family: var(--_typography---font-family--body-alt);
  font-size: var(--_typography---body--body-s);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}
.pricing-subhead {
  max-width: 40rem;
  margin: 1rem auto 0;
  color: var(--color--gray-3);
  font-size: var(--_typography---body--body-sm);
  line-height: 1.6;
  text-align: center;
}

/* --- Pricing: three build options across the top row --------------------
   The build packages (automation, AI, software) share a row so they read as
   one comparable set. Scoped to desktop; the template's own breakpoints still
   collapse the grid to a single column below 992px. Feature lists drop to one
   column at this narrower card width so labels stop wrapping mid-phrase. */
@media screen and (min-width: 1200px) {
  .grid-pricing.grid-pricing-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-pricing-3 .grid-pricing-feature {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The middle card's title wraps beside its badge, so reserve the same header
     height on all three and everything below stays on a shared baseline. */
  .grid-pricing-3 .pricing-title-info {
    min-height: 7.25rem;
  }
}

/* Between the template's desktop breakpoint and 1200px there isn't room for
   three readable columns, so the build options stack rather than squeeze. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .grid-pricing.grid-pricing-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}