/* The site's own styles, shared by every page. Generated from index.html on 12 September 2026. */
    /* NAVBAR FADE-IN BACKGROUND (desktop only; JS controls opacity) */
    #mainNav {
      background-color: rgba(173, 194, 118, var(--nav-bg-opacity, 0));
      transition: background-color 0.25s ease, box-shadow 0.25s ease;
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      backdrop-filter: blur(8px);
    }

    #mainNav.scrolled {
      box-shadow: 0 .25rem .75rem rgba(0, 0, 0, 0.12);
    }
    /* the phone menu button: the theme made it sage on sage, invisible */
    #mainNav .navbar-toggler { color: #111; background: rgba(255, 255, 255, .85); border: 1px solid #111; font-weight: 700; }
    #mainNav .navbar-toggler:hover, #mainNav .navbar-toggler:focus { background: #fff; box-shadow: none; }
    @media (max-width: 991px) { #mainNav .navbar-collapse { border-top: 1px solid rgba(0, 0, 0, .12); margin-top: .5rem; padding-top: .3rem; } }

    /* Full-screen sections: each one fills the browser window; content vertically centred.
       Hero is shortened so the proof strip stays in the first viewport. */
    .masthead {
      height: auto !important;
      min-height: calc(100vh - 140px) !important;
      display: flex !important;
      flex-direction: column;
      justify-content: center;
    }

    /* Every section fills the screen under the fixed nav (88px tall), and never more unless the screen is small.
       The nav is fixed, so the anchors scroll to just below it. */
    :root { --nav-h: 88px; }
    html { scroll-padding-top: var(--nav-h) !important; }
    /* sections are as tall as their content, with room to breathe */
    .vh-section {
      height: auto !important;
      min-height: 0 !important;
      padding-top: 3.5rem !important;
      padding-bottom: 3.5rem !important;
      scroll-margin-top: var(--nav-h);
    }
    @media (max-width: 767px) { .vh-section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } }
    /* the Start free pill sits in the middle of the bar, not on its top edge */
    #mainNav .navbar-nav { align-items: center; }
    #mainNav .nav-item:has(> .nav-cta) { display: flex; align-items: center; }
    .nav-cta { display: inline-block; background: #111; color: #fff !important; border-radius: 999px;
      padding: .45rem 1.1rem !important; margin-left: .6rem; line-height: 1.2; }
    .nav-cta:hover, .nav-cta:focus { background: #333; color: #fff !important; }
    /* hovering a nav link must not turn it white on a pale bar */
    #mainNav .nav-link:hover, #mainNav .nav-link:focus,
    #mainNav.scrolled .nav-link:hover, #mainNav.scrolled .nav-link:focus {
      color: #111 !important; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px;
    }
    /* the page you are on: same colour as the rest, marked with an underline (the theme turns it white) */
    #mainNav .nav-link.active, #mainNav.scrolled .nav-link.active {
      color: #111 !important; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px;
    }
    @media (max-width: 991px) {
      #mainNav .navbar-nav { align-items: stretch; }
      .nav-cta { margin: .6rem 0 .2rem; text-align: center; }
    }
    .doors .card { height: 100%; }
    .steps-row { counter-reset: step; }
    .step-num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: #adc276; color: #111; font-weight: 800; margin-bottom: .6rem; }
    .trust-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .trust-list li { padding-left: 1.6rem; position: relative; }
    .trust-list li::before { content: "\2713"; position: absolute; left: 0; color: #6f8544; font-weight: 800; }
    .soon-badge { display: inline-block; background: #fdd14d; color: #111; font-weight: 800; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px; margin-bottom: .6rem; }
    /* the hero embed gets its own height: it is the demo, not a footnote */
    .hero-sim { margin-top: 0; height: clamp(380px, calc(100dvh - var(--nav-h) - 360px), 600px) !important; }
    @media (max-width: 767px) { .hero-sim { height: min(720px, calc(100dvh - var(--nav-h) - 24px)) !important; min-height: 520px !important; } }
    .vh-section .mb-5 { margin-bottom: 1.5rem !important; }
    .vh-section .mb-4 { margin-bottom: 1rem !important; }
    .vh-section h2 { font-size: 2.1rem; }
    .vh-section .text-muted, .vh-section .lead { font-size: 1.05rem; }
    .audience-card { padding: 1.4rem 1.5rem; }
    .audience-card h3 { font-size: 1.35rem; }
    .audience-card > p { font-size: .95rem; }
    .audience-badge { margin-bottom: .6rem; }
    .audience-list { margin-top: .6rem; }
    .audience-list li { font-size: .92rem; line-height: 1.35; padding: .25rem 0; }
    @media (max-width: 991px) { :root { --nav-h: 72px; } }
    /* keep the nav on one line on narrower laptops */
    @media (min-width: 992px) and (max-width: 1500px) { #mainNav .nav-link { font-size: .9rem; padding-left: .55rem !important; padding-right: .55rem !important; white-space: nowrap; } }

    /* Kill the theme's full-height rule on containers / the proof strip (which stays thin) */
    .container,
    .proof-strip,
    .masthead .row {
      height: auto !important;
      min-height: 0 !important;
    }

    .masthead {
      padding: 5rem 0 1rem;
    }

    @media (min-width: 992px) {
      .masthead {
        padding: 5.5rem 0 1rem;
      }
    }

    .masthead h1.hero-title {
      letter-spacing: normal;
      background: none;
      -webkit-text-fill-color: currentColor;
      color: #111111;
      font-size: clamp(1.6rem, 3.4vw, 2.6rem);
      line-height: 1.15;
      max-width: none;
      font-weight: 800;
    }

    .hero-img,
    .hero-video {
      width: 100%;
      max-width: 360px;
      height: auto;
      margin: 0 auto;
      display: block;
      border-radius: 1rem;
      box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .14);
    }

    .hero-video {
      aspect-ratio: 1 / 1;
      object-fit: cover;
      background: #e2ecce;
    }

    .hero-form-note {
      font-weight: 700;
      color: #111111;
      margin-bottom: .75rem;
    }

    /* SOCIAL PROOF STRIP */
    .proof-strip {
      background: #111111;
      padding: 1.75rem 0;
    }

    .proof-items {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 1rem 2.75rem;
    }

    .proof-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;
    }

    .proof-num {
      font-size: 1.6rem;
      font-weight: 800;
      line-height: 1;
    }

    .proof-label {
      font-size: .78rem;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: #b9c9b3;
      margin-top: .3rem;
    }

    .proof-tagline {
      text-align: center;
      color: #b9c9b3;
      font-size: .85rem;
      margin: .9rem 0 0;
    }

    .proof-tagline a {
      color: #fff;
    }

    /* VIDEO SHOWCASE */
    .video-frame {
      max-width: 900px;
      margin: 0 auto;
      aspect-ratio: 16 / 9;
    }

    .video-frame iframe,
    .video-frame video {
      width: 100%;
      height: 100%;
      border: 0;
      border-radius: 1rem;
      display: block;
    }

    .video-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      border: 2px dashed #adc276;
      border-radius: 1rem;
      background: #e2ecce;
      color: #5f6b57;
      text-align: center;
      padding: 1rem;
    }

    .video-placeholder i {
      font-size: 2.75rem;
      color: #adc276;
      margin-bottom: .75rem;
    }

    /* PRODUCT SECTIONS (robot + board) */
    .product-img {
      width: 100%;
      max-width: 420px;
      height: auto;
      display: block;
      margin: 0 auto;
      border-radius: 1rem;
      box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .14);
    }

    /* Embedded simulator */
    .sim-frame {
      border-radius: 1rem;
      overflow: hidden;
      box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .14);
      border: 1px solid #e5dfc9;
      background: #e2ecce;
    }

    .sim-wide {
      max-width: 1500px;
    }

    /* sized from the height so the whole section fits one screen, 2:1 like a laptop, centred */
    .sim-frame {
      /* as wide as the section allows, as tall as the screen leaves: the editor and the robot sit side by side */
      height: clamp(300px, calc(100dvh - var(--nav-h) - 425px), 720px);
      width: min(100%, 1400px);
      margin: 0 auto;
    }

    .sim-frame iframe {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
    }

    @media (max-width: 767px) {
      /* on a phone the demo stacks code, robot, sensors and console: give it the height to show them */
      .sim-frame {
        aspect-ratio: auto;
        height: min(720px, calc(100dvh - var(--nav-h) - 24px));
        min-height: 0;
        width: 100%;
      }
    }

    /* 3D board viewer (models served from the bugbot-hardware repo) */
    .board-tabs {
      display: flex;
      justify-content: center;
      gap: .5rem;
      margin-bottom: .75rem;
      flex-wrap: wrap;
    }

    .board-tab {
      font: inherit;
      font-weight: 700;
      font-size: .9rem;
      padding: .4rem 1rem;
      border-radius: 9999px;
      border: 1px solid #8da45a;
      background: #fff;
      color: #111111;
      cursor: pointer;
    }

    .board-tab.active,
    .board-tab:hover {
      background: #adc276;
      border-color: #adc276;
    }

    .board-viewer {
      width: 100%;
      max-width: 560px;
      height: 420px;
      margin: 0 auto;
      background: #e2ecce;
      border-radius: 1rem;
      box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .14);
      --poster-color: #e2ecce;
    }

    .board-viewer-note {
      font-size: .8rem;
      color: #5f6b57;
      margin: .6rem 0 0;
    }

    @media (max-width: 767px) {
      .board-viewer {
        height: 300px;
      }
    }

    .dev-badge {
      display: inline-block;
      background: #111111;
      color: #fff;
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: .35rem .8rem;
      border-radius: 9999px;
      margin-bottom: 1rem;
    }

    .board-feature-list {
      list-style: none;
      padding: 0;
      margin: 1.25rem 0;
    }

    .board-feature-list li {
      padding: .35rem 0;
      color: #333;
    }

    .board-feature-list li i {
      color: #8da45a;
      margin-right: .6rem;
    }

    /* CTA BAND */
    .cta-band {
      background-color: rgba(191, 215, 181, 1);
    }

    /* MailerLite waitlist form, styled to match the site */
    #mlb2-41646750 {
      max-width: 420px;
      margin: 0 auto;
      font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    /* Left-align the form on desktop (two-column hero); keep it centred when stacked */
    @media (min-width: 992px) {
      #mlb2-41646750 {
        margin-left: 0;
      }
    }

    #mlb2-41646750 .ml-form-embedWrapper {
      background: transparent;
      border: 0;
    }

    #mlb2-41646750 .ml-form-fieldRow {
      margin-bottom: 12px;
    }

    #mlb2-41646750 input[type="email"] {
      width: 100%;
      padding: 12px 14px;
      font-size: 1rem;
      color: #111111;
      border: 1px solid #cfd8cf;
      border-radius: .5rem;
      box-sizing: border-box;
    }

    #mlb2-41646750 input[type="email"]:focus {
      outline: none;
      border-color: #adc276;
      box-shadow: 0 0 0 .2rem rgba(162, 197, 148, .4);
    }

    #mlb2-41646750 .ml-form-embedPermissions p,
    #mlb2-41646750 .ml-form-checkboxRow .label-description p {
      font-size: .8rem;
      color: #5f6b57;
      margin: 0;
    }

    #mlb2-41646750 .ml-form-checkboxRow {
      margin: 10px 0 16px;
    }

    #mlb2-41646750 .ml-form-checkboxRow label {
      display: flex;
      gap: .5rem;
      align-items: flex-start;
      justify-content: center;
      margin: 0;
      cursor: pointer;
    }

    #mlb2-41646750 button.primary {
      width: 100%;
      padding: 12px 18px;
      font-size: 1.1rem;
      font-weight: 800;
      color: #111111;
      background-color: #adc276;
      border: 2px solid #000;
      border-radius: .5rem;
      cursor: pointer;
      transition: background-color .2s ease;
    }

    #mlb2-41646750 button.primary:hover {
      background-color: #8da45a;
    }

    #mlb2-41646750 button.loading {
      width: 100%;
      padding: 12px 18px;
      border: 2px solid #000;
      border-radius: .5rem;
      background-color: #adc276;
    }

    #mlb2-41646750 .ml-form-embedSubmitLoad {
      display: inline-block;
      width: 20px;
      height: 20px;
    }

    #mlb2-41646750 .ml-form-embedSubmitLoad:after {
      content: " ";
      display: block;
      width: 14px;
      height: 14px;
      margin: 2px auto;
      border-radius: 50%;
      border: 3px solid #111111;
      border-color: #111111 transparent #111111 transparent;
      animation: ml-spin 1s linear infinite;
    }

    @keyframes ml-spin {
      to { transform: rotate(360deg); }
    }

    #mlb2-41646750 .ml-form-successContent h4 {
      color: #111111;
      margin-bottom: .5rem;
    }

    #mlb2-41646750 .ml-form-successContent p {
      color: #5f6b57;
      margin: 0;
    }

    #mlb2-41646750 .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }

    /* FEATURES CAROUSEL */
    #featuresCarousel {
      max-width: 1000px;
      margin: 0 auto;
      padding-bottom: 3rem;
    }

    #featuresCarousel .carousel-item {
      padding: 0 2rem;
    }

    @media (max-width: 768px) {
      #featuresCarousel .carousel-item {
        padding: 0 .5rem;
      }
    }

    .feature-media {
      aspect-ratio: 16 / 9;
      border-radius: 1rem;
      overflow: hidden;
      background: #e2ecce;
    }

    .feature-media video,
    .feature-media iframe {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border: 0;
    }

    .feature-text h3 {
      font-weight: 800;
      color: #111111;
    }

    #featuresCarousel .carousel-control-prev,
    #featuresCarousel .carousel-control-next {
      width: 3rem;
      opacity: 0.6;
    }

    #featuresCarousel .carousel-control-prev:hover,
    #featuresCarousel .carousel-control-next:hover {
      opacity: 1;
    }

    #featuresCarousel .carousel-indicators {
      bottom: -.5rem;
      margin-bottom: 0;
    }

    #featuresCarousel .carousel-indicators [data-bs-target] {
      background-color: #111111;
      opacity: 0.25;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: none;
      margin: 0 6px;
    }

    #featuresCarousel .carousel-indicators .active {
      opacity: 1;
    }

    /* AUDIENCE PITCH */
    .audience-card {
      background: #fff;
      border: 1px solid #e5dfc9;
      border-radius: 1rem;
      padding: 2rem;
      height: 100%;
      box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .06);
    }

    .audience-badge {
      display: inline-block;
      background: #adc276;
      color: #111111;
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: .35rem .8rem;
      border-radius: 9999px;
      margin-bottom: 1rem;
    }

    .audience-card h3 {
      font-weight: 800;
      color: #111111;
    }

    #schools .container { max-width: 1500px; }     /* wider cards, so the bullets wrap less and the section fits one screen */
    .price-card { display: flex; flex-direction: column; }
    .price-card .audience-list li { font-size: .9rem; padding: .2rem 0; }
    .price-card > p { font-size: .92rem; margin-bottom: .4rem; }
    .price-card .btn { margin-top: .6rem !important; }
    .price-card .audience-list { flex: 1; }
    .price-card .btn { align-self: flex-start; }
    .price { font-size: 2rem; font-weight: 800; color: #111111; line-height: 1.1; margin: .1rem 0 .4rem; }
    .price .per { font-size: 1rem; font-weight: 700; color: #5f6b57; margin-left: .25rem; }
    .price.quote { font-size: 1.5rem; color: #5f6b57; }
    .price-card .audience-badge { align-self: flex-start; }
    /* the carousel dots and the waitlist tick box: a finger-sized target around a small mark */
    #featuresCarousel .carousel-indicators [data-bs-target] { box-sizing: content-box; border: 7px solid transparent; background-clip: padding-box; margin: 0 1px; }
    .masthead input[type="checkbox"] { width: 20px; height: 20px; }
    /* phones: no arrows over the slide text (swipe, or tap the dots) */
    @media (max-width: 767px) {
      #featuresCarousel .carousel-control-prev, #featuresCarousel .carousel-control-next { display: none; }
    }
    /* short laptop screens: tighter sections so each one fits under the nav */
    @media (min-width: 992px) and (max-height: 760px) {
      .masthead { padding: 4.9rem 0 .5rem !important; }
      .hero-video, .hero-img { max-width: 290px; }
      .masthead h1.hero-title { font-size: clamp(1.5rem, 3vw, 2.2rem); }
      .vh-section { padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; }
      .vh-section h2 { font-size: 1.7rem; margin-bottom: .5rem !important; }
      .vh-section .text-muted, .vh-section .lead { font-size: .95rem; }
      .vh-section .mb-4, .vh-section .mb-5 { margin-bottom: .6rem !important; }
      .audience-card { padding: .9rem 1.1rem; }
      .audience-list { margin-top: .3rem; }
      .audience-list li, .price-card .audience-list li { font-size: .84rem; padding: .1rem 0; }
      .price { font-size: 1.6rem; margin: 0 0 .2rem; }
      .price-card > p { font-size: .85rem; }
      .spec-row { padding: .32rem .25rem; }
      .spec-label, .spec-value { font-size: .88rem; }
    }

    .audience-list {
      list-style: none;
      padding: 0;
      margin: 1rem 0 0;
    }

    .audience-list li {
      display: flex;
      gap: .65rem;
      align-items: flex-start;
      padding: .4rem 0;
      color: #333;
      line-height: 1.45;
    }

    .audience-list li i {
      color: #8da45a;
      margin-top: .3rem;
      flex-shrink: 0;
    }

    /* BOARD POINTS (open hardware / open code / modular) */
    .board-points {
      list-style: none;
      padding: 0;
      margin: 1.5rem 0;
      display: grid;
      gap: 1rem;
    }

    .board-point {
      display: flex;
      gap: .9rem;
      align-items: flex-start;
    }

    .board-point i {
      color: #8da45a;
      font-size: 1.25rem;
      margin-top: .2rem;
      width: 1.5rem;
      flex-shrink: 0;
    }

    .board-point strong {
      display: block;
      color: #111111;
      font-size: 1rem;
      margin-bottom: .15rem;
    }

    .board-point .desc {
      color: #5f6b57;
      font-size: .9rem;
      line-height: 1.4;
    }

    /* FAQ ACCORDION */
    .faq-accordion .accordion-item {
      border: 1px solid #e5dfc9;
      border-radius: .6rem !important;
      margin-bottom: .65rem;
      background: #fff;
    }

    .faq-accordion .accordion-button {
      border-radius: .6rem !important;
    }

    .faq-accordion .accordion-button:not(.collapsed) {
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    .faq-accordion .accordion-collapse {
      transition: height .35s ease-out;
      will-change: height;
    }

    /* Stop the FAQ section re-centring its content every frame as items expand */
    #faq {
      justify-content: flex-start !important;
      padding-top: 6rem;
      padding-bottom: 4rem;
    }

    .faq-accordion .accordion-button {
      font-weight: 700;
      color: #111111;
      background: #fff;
      padding: 1.1rem 1.25rem;
    }

    .faq-accordion .accordion-button:not(.collapsed) {
      background-color: rgba(162, 197, 148, 0.14);
      color: #111111;
      box-shadow: none;
    }

    .faq-accordion .accordion-button:focus {
      border-color: #adc276;
      box-shadow: 0 0 0 .2rem rgba(162, 197, 148, .25);
    }

    .faq-accordion .accordion-button::after {
      filter: grayscale(100%) brightness(.4);
    }

    .faq-accordion .accordion-body {
      color: #5f6b57;
      padding: .25rem 1.25rem 1.25rem;
      line-height: 1.55;
    }

    /* SPEC SHEET */
    .spec-sheet {
      max-width: 1040px;
      margin: 0 auto;
      border-top: 1px solid #e2e2e2;
    }

    .spec-row {
      display: flex;
      padding: .55rem .25rem;
      border-bottom: 1px solid #e2e2e2;
      gap: 1.5rem;
    }

    .spec-label {
      flex: 0 0 36%;
      font-weight: 700;
      color: #111111;
      font-size: .95rem;
      letter-spacing: .01em;
    }

    .spec-value {
      flex: 1;
      color: #5f6b57;
      font-size: .95rem;
      line-height: 1.5;
    }

    @media (max-width: 576px) {
      .spec-row {
        flex-direction: column;
        gap: .25rem;
      }

      .spec-label {
        flex: 1;
      }
    }
    .consent { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 2000; display: flex; align-items: center; gap: .6rem; max-width: calc(100% - 2rem); padding: .55rem .9rem; border-radius: 999px; background: #111; color: #fff; font-size: .85rem; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25); }
    .consent button { font: inherit; font-weight: 700; font-size: .8rem; padding: .3rem .8rem; border-radius: 999px; border: 1px solid #fff; background: transparent; color: #fff; cursor: pointer; white-space: nowrap; }
    .consent button.primary { background: #adc276; border-color: #adc276; color: #111; }
    @media (max-width: 600px) { .consent { flex-wrap: wrap; border-radius: 12px; } }

/* Sticker buttons, from the Reel Outro artwork: a black starburst with a sage edge */
.sticker-cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: #adc276; color: #fff !important; border: 0; cursor: pointer;
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; line-height: 1.15; letter-spacing: .01em;
  clip-path: polygon(50.0% 0.0%, 60.6% 10.4%, 75.0% 6.7%, 79.0% 21.0%, 93.3% 25.0%, 89.6% 39.4%, 100.0% 50.0%, 89.6% 60.6%, 93.3% 75.0%, 79.0% 79.0%, 75.0% 93.3%, 60.6% 89.6%, 50.0% 100.0%, 39.4% 89.6%, 25.0% 93.3%, 21.0% 79.0%, 6.7% 75.0%, 10.4% 60.6%, 0.0% 50.0%, 10.4% 39.4%, 6.7% 25.0%, 21.0% 21.0%, 25.0% 6.7%, 39.4% 10.4%); transform: rotate(-6deg); transition: transform .15s ease;
  width: 210px !important; height: 210px !important; max-width: 210px; flex: 0 0 auto;
  padding: 0 !important; font-size: 1.15rem; text-decoration: none !important;
  backface-visibility: hidden;
}
.sticker-cta > span {
  display: flex; align-items: center; justify-content: center; width: calc(100% - 14px); height: calc(100% - 14px);
  background: #111; clip-path: polygon(50.0% 0.0%, 60.6% 10.4%, 75.0% 6.7%, 79.0% 21.0%, 93.3% 25.0%, 89.6% 39.4%, 100.0% 50.0%, 89.6% 60.6%, 93.3% 75.0%, 79.0% 79.0%, 75.0% 93.3%, 60.6% 89.6%, 50.0% 100.0%, 39.4% 89.6%, 25.0% 93.3%, 21.0% 79.0%, 6.7% 75.0%, 10.4% 60.6%, 0.0% 50.0%, 10.4% 39.4%, 6.7% 25.0%, 21.0% 21.0%, 25.0% 6.7%, 39.4% 10.4%); padding: 0 .9rem; line-height: 1.3;
}
.sticker-cta:hover, .sticker-cta:focus { transform: rotate(-6deg) translateY(-3px); color: #fff !important; }
.sticker-cta:focus-visible { outline: 3px solid #6f8544; outline-offset: 4px; }
.sticker-cta > span { flex-direction: column; }
.sticker-sm { width: 76px !important; height: 76px !important; font-size: .58rem; transform: rotate(-6deg); }   /* rotation makes the box about 9% taller, so it fits an 86px bar */
.sticker-sm > span { width: calc(100% - 8px); height: calc(100% - 8px); padding: 0 .45rem; }
.sticker-sm:hover, .sticker-sm:focus { transform: rotate(-6deg) translateY(-3px); }
/* the floating sticker: stays put as you scroll */
.sticker-float { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1035; width: 132px !important; height: 132px !important; font-size: .85rem; }
.sticker-float > span { width: calc(100% - 11px); height: calc(100% - 11px); padding: 0 .5rem; }
@media (max-width: 767px) { .sticker-float { width: 108px !important; height: 108px !important; font-size: .72rem; right: .7rem; bottom: .7rem; } }
.sticker-float { transition: opacity .25s ease, transform .25s ease; }
.sticker-float.is-hidden { opacity: 0; pointer-events: none; }   /* fade only: scaling blurs the text */
@media print { .sticker-float { display: none; } }

/* the bar keeps its height; the sticker is allowed to sit proud of it */
#mainNav .navbar-nav { overflow: visible; }
#mainNav .nav-item:has(> .sticker-cta) { margin-left: .5rem; }
@media (max-width: 767px) { .sticker-cta { width: 180px !important; height: 180px !important; font-size: 1rem; } }

/* the waitlist form's own button styles would stretch the sticker wide */
.ml-form-embedSubmit { display: flex; justify-content: center; }

/* the waitlist button: a plain button, but one you notice */
.btn-standout {
  background: #111 !important; color: #fff !important; border: 3px solid #adc276 !important; border-radius: 999px !important;
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: .01em;
  padding: .8rem 2.1rem; cursor: pointer; box-shadow: 0 .45rem 1.1rem rgba(17, 17, 17, .18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-standout:hover { transform: translateY(-2px); box-shadow: 0 .7rem 1.4rem rgba(17, 17, 17, .24); color: #fff !important; background: #222 !important; }
.btn-standout:focus-visible { outline: 3px solid #6f8544; outline-offset: 3px; }

/* room to breathe between the hero paragraph and the buttons */
.masthead .hero-sub { margin-bottom: 2.5rem !important; }
@media (max-width: 767px) { .masthead .hero-sub { margin-bottom: 2rem !important; } }

/* the hero is exactly one screen on a laptop or desktop; on phones it takes what it needs */
.masthead {
  /* the nav is fixed and sits over the hero, so a full screen means 100dvh with the nav's height as padding */
  min-height: 100dvh !important;   /* the theme sets its own, with higher specificity */
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--nav-h) + 1rem) !important; padding-bottom: 1.5rem !important;
}
@media (max-width: 991px) { .masthead { min-height: 0 !important; display: block; padding-top: calc(var(--nav-h) + 1.5rem) !important; padding-bottom: 2.5rem !important; } }

/* short laptop screens: trim the hero so it lands on exactly one screen */
@media (min-width: 992px) and (max-height: 850px) {
  .masthead .hero-title { font-size: clamp(1.6rem, 2.9vw, 2.25rem); margin-bottom: .6rem !important; }
  .masthead .hero-sub { font-size: .98rem; margin-bottom: 1.3rem !important; }
  .masthead { padding-top: calc(var(--nav-h) + .5rem) !important; padding-bottom: 1rem !important; }
  .hero-sim { height: clamp(300px, calc(100dvh - var(--nav-h) - 330px), 520px) !important; }
}

/* What's new (homepage) and the news page */
.news-card { background: #fff; border-radius: .5rem; padding: 1.25rem 1.25rem 1rem; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.news-card time, .news-item time { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6f8544; }
.news-card h3 { margin: .35rem 0 .5rem; }
.news-card h3 a { color: inherit; text-decoration: none; }
.news-card h3 a:hover { text-decoration: underline; }
.news-card p { color: rgba(0,0,0,.6); margin-bottom: .75rem; }
.news-more { margin-top: auto; font-weight: 700; color: #6f8544; }
.news-list .news-item { padding: 1.5rem 0; border-bottom: 1px solid rgba(0,0,0,.08); scroll-margin-top: 6rem; }
.news-list .news-item:first-child { padding-top: 0; }
.news-list .news-item:last-child { border-bottom: 0; }
.news-list .news-item h2 { margin: .35rem 0 .5rem; font-size: 1.4rem; }
.news-list .news-item p { color: rgba(0,0,0,.65); }

/* the status page */
.status-card { border-radius: .75rem; padding: 1.5rem 1.75rem; border: 2px solid #c9d6aa; background: #fff; }
.status-card[data-state="ok"] { border-color: #8da45a; background: #f1f6e6; }
.status-card[data-state="degraded"] { border-color: #e0b43a; background: #fdf4dc; }
.status-card[data-state="down"] { border-color: #c0443f; background: #fbe4e3; }
.status-state { font-size: 1.5rem; font-weight: 800; margin: 0 0 .4rem; }
.status-message { margin: 0 0 .4rem; }