/* ============================================================
   crossband.io — front page (index.html)
   ------------------------------------------------------------
   Page-specific styles only. Palette + geometry come from
   css/tokens.css; header, footer, modal and grid come from
   assets/css/template.css + bootstrap.
   Sections in source order:
     1. Page shell
     1b. Nav            .cb-nav
     2. Hero            .cb-hero
     3. Spine           .cb-spine        (Input | Construct | Output)
     4. Inventory       .cb-inventory    (what the construct holds)
     5. Feature blocks  .cb-feature
     6. API band        .cb-api
     7. Closing CTA     .cb-closer
     8. Responsive
     9. Cookie banner   .cc-window (cookieconsent v3)
   ============================================================ */

/* ---------- 1. Page shell ---------- */

.cb-page {
  background-color: var(--ink);
  color: var(--white);
  font-family: 'Quicksand', sans-serif;
}

.cb-page section { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.cb-page section.cb-no-rule { border-top: 0; }

/* Full-width section inner. No max-width column: the horizontal inset is
   owned entirely by .content-wrapper's --ext-pad-* gutter (below), so every
   section's left AND right edges line up with the navbar and each other.
   Text blocks keep their own max-widths for readability. */
.cb-inner {
  width: 100%;
}

/* Eyebrow labels and the API block are the only mono type on the page.
   System mono stack — no extra webfont request. */
.cb-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-muted);
  margin: 0 0 18px;
  /* Eyebrows are <h2> for document outline / SEO. Pin the two properties that
     template.css and Bootstrap set differently on headings (500 / 1.3) so they
     render exactly as the original <p> did (body: 400 / 1.8). */
  font-weight: inherit;
  line-height: inherit;
}

/* Screenshots and the hero texture are wrapped in <picture> to serve WebP with a
   PNG fallback. display: contents removes the wrapper from layout so the <img>
   is laid out exactly as it was as a direct child. */
.cb-shot picture,
.cb-hero picture {
  display: contents;
}

.cb-eyebrow--quiet { color: rgba(255, 255, 255, 0.45); }
.cb-eyebrow--gold  { color: var(--gold); }
.cb-eyebrow--onteal { color: rgba(255, 255, 255, 0.7); }

.cb-h2 {
  font-family: 'Aeonik', 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 16px;
}

.cb-body {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.cb-body--bright { color: rgba(255, 255, 255, 0.82); }

/* Gold CTA — matches .hero-button, kept separate so the front page
   can carry a secondary text link beside it. */
.cb-cta {
  display: inline-block;
  min-width: 170px;      /* equal width for "Request Access" / "Contact" */
  text-align: center;    /* centre the shorter label within that width */
  background-color: var(--gold);
  color: var(--ink);
  font-family: 'Aeonik', 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  padding: 15px 26px;
  border: none;
  border-radius: var(--btn-radius);
  transition: background-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cb-cta:hover { background-color: var(--gold-hover); color: var(--ink); }
.cb-cta:active { transform: translateY(1px); }

.cb-link {
  display: inline-block;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Aeonik', 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  padding: 15px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cb-link:hover { color: var(--white); opacity: 0.75; }

.cb-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* ---------- 1b. Nav ----------
   Geometry mirrors the logged-in app navbar (.navbar-top-custom in
   components/elements.php) EXACTLY: full-width, flush-left ink bar,
   56px tall, icon-only logo 34px at the same left offset. The wordmark
   is a SEPARATE image sitting to the right of that icon — so on login,
   where only the icon SVG renders, the icon stays pixel-for-pixel put
   and the wordmark simply disappears. Sticky; mobile collapses to a
   hamburger via bootstrap's collapse. */

.cb-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Full width, flush — NOT centered in a container. The left/right inset
   comes from the shared --ext-pad-* gutter (see tokens.css), so the logo
   and every front-page section below line up to the same edges. The left
   value (1.3rem = 20.8px) equals the logged-in app navbar's logo inset,
   keeping that pixel-for-pixel match. 56px == bootstrap navbar. */
.cb-nav__inner {
  min-height: 56px;
  display: flex;
  align-items: center;
  padding-left: var(--ext-pad-left);
  padding-right: var(--ext-pad-right);
}

/* Brand = icon + wordmark. Left inset is owned by .cb-nav__inner above. */
.cb-nav__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

/* Icon: identical asset and height to the logged-in navbar. */
.cb-nav__icon {
  height: 34px;
  width: auto;
  display: block;
}

/* Wordmark: cropped from the horizontal logo (ink background, seamless on
   the ink bar). Height/gap set to the original logo's proportions. */
.cb-nav__wordmark {
  height: 38px;
  width: auto;
  display: block;
  margin-left: 7px;
}

/* Bootstrap's .collapse only re-opens under a .navbar-expand-* ancestor,
   which this bar deliberately does not use — so un-hide it here. */
@media (min-width: 992px) {
  .cb-nav__collapse {
    display: flex !important;
    flex-basis: auto;
    margin-left: auto;
  }
}

.cb-nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.cb-nav__links a {
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Quicksand', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cb-nav__links a:hover { color: var(--white); }

/* Outlined CTA — the gold fill is reserved for the hero and closer. */
.cb-nav__cta {
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 9px 18px;
  border-radius: var(--btn-radius);
  font-weight: 700 !important;
  color: var(--white) !important;
  transition: border-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cb-nav__cta:hover {
  border-color: var(--gold);
  background-color: rgba(255, 188, 0, 0.1);
}

.cb-nav__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--white);
  border-radius: var(--btn-radius);
  padding: 7px 12px;
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 991px) {
  .cb-nav__toggle { display: block; }

  .cb-nav__collapse {
    flex: 1 0 100%;
    order: 3;
  }

  .cb-nav__inner { flex-wrap: wrap; }

  /* Inset is owned by .cb-nav__inner's --ext-pad-* padding, so the toggle
     sits at the right gutter and the collapsed links line up under the
     logo without any extra padding here. */
  .cb-nav__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-left: 0;
    padding: 8px 0 22px;
  }

  .cb-nav__links a { display: block; padding: 8px 0; font-size: 0.9375rem; }
  .cb-nav__cta { margin-top: 10px; }
}

/* ---------- 2. Hero ---------- */

/* Full-screen hero: fills the viewport below the 56px sticky nav and
   centres its content, so the landing view is the hero alone — the section
   below sits just past the fold instead of peeking up under a divider. */
.cb-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 56px);
  padding: 56px 0;
  background-color: var(--ink);
}

/* Contour-wave texture. Source is teal lines on black; grayscale+brightness
   turns the lines white, and the screen blend drops the black so the true
   ink shows through and only the grain lightens it. Hero only. */
.cb-hero__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(1.9);
  mix-blend-mode: screen;
  opacity: 0.35;
  pointer-events: none;
}

.cb-hero .cb-inner { position: relative; }

.cb-hero__headline {
  font-family: 'Aeonik', 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 4.75rem;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--white);
  margin: 0 0 28px;
  max-width: 900px;
  text-wrap: pretty;
}

.cb-hero__sub {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 640px;
  text-wrap: pretty;
}

/* ---------- 3. Spine: Input | Construct | Output ---------- */

.cb-spine { padding: 84px 0 90px; }

.cb-spine__grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.cb-spine__side {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 22px 0 0;
}

.cb-spine__lede {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 22px;
}

.cb-spine__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cb-spine__list span {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  border-left: 2px solid rgba(255, 255, 255, 0.25);
  padding-left: 12px;
}

.cb-spine__list--out span { border-left-color: var(--gold); }

/* The construct card — the one gold-bordered element on the page. */
.cb-spine__core {
  border: 1px solid var(--gold);
  background-color: rgba(255, 188, 0, 0.06);
  padding: 30px 30px 34px;
}

.cb-spine__core p:last-child { margin-bottom: 0; }

.cb-spine__core .cb-body { margin-bottom: 14px; }

.cb-spine__note {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
  margin: 34px 0 0;
  max-width: 760px;
}

/* ---------- 4. Inventory ---------- */

.cb-inventory { padding: 80px 0 88px; }

.cb-inventory__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  align-items: start;
  margin-top: 44px;
}

.cb-inventory__grid .cb-eyebrow { margin-bottom: 6px; }

.cb-inventory__list {
  display: flex;
  flex-direction: column;
}

.cb-inventory__list span {
  font-size: 0.90625rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.cb-inventory__note {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  margin: 40px 0 0;
  max-width: 760px;
}

/* ---------- 5. Feature blocks ---------- */

.cb-feature { padding: 44px 0 20px; }
.cb-feature--first { padding-top: 64px; }
.cb-feature--last { padding-bottom: 96px; }

.cb-feature__grid {
  display: grid;
  gap: 40px;
  align-items: start;
  grid-template-columns: 1.1fr 0.9fr;
}

/* Screenshot on the left, copy on the right. */
.cb-feature__grid--flip { grid-template-columns: 0.9fr 1.1fr; }

/* The frame hugs the image (so there's no empty gutter when a height is set),
   and centres within its grid column. */
.cb-shot {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.04);
  padding: 14px;
  width: fit-content;
  max-width: 100%;
  justify-self: end;   /* anchor to the outer edge so text stretches to fill the gap */
}

/* When the image is on the left (flipped block), anchor it to the left edge. */
.cb-feature__grid--flip .cb-shot { justify-self: start; }

/* ONE lever per image: set --cb-shot-h on a .cb-shot to control its height;
   width follows automatically, so proportions never distort. Default (auto)
   = fill the column, as before. e.g. <div class="cb-shot" style="--cb-shot-h:340px"> */
.cb-shot img {
  display: block;
  height: var(--cb-shot-h, auto);
  width: auto;
  max-width: 100%;
}

.cb-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.cb-tags span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 6px 12px;
}

/* ---------- 6. API band ---------- */

.cb-api {
  background-color: var(--teal);
  padding: 76px 0;
}

.cb-api__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.cb-api__code {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background-color: rgba(5, 45, 56, 0.45);
  padding: 26px 28px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78125rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.85);
}

.cb-api__code p { margin: 0; }
.cb-api__code p.cb-api__verb { color: var(--gold); }
.cb-api__code p.cb-api__status { color: var(--gold); margin-top: 14px; }

/* ---------- 7. Closing CTA ---------- */

.cb-closer { padding: 96px 0; }

.cb-closer__inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.cb-closer__headline {
  font-family: 'Aeonik', 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
}

/* ---------- 8. Responsive ---------- */

@media (max-width: 991px) {
  .cb-hero { padding: 96px 0 80px; }
  .cb-hero__headline { font-size: 3.25rem; }
  .cb-hero__sub { font-size: 1.0625rem; }

  .cb-spine__grid,
  .cb-inventory__grid,
  .cb-feature__grid,
  .cb-feature__grid--flip,
  .cb-api__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Copy above screenshot on narrow screens, whichever way the
     desktop grid was ordered. */
  .cb-feature__grid--flip .cb-shot { order: 2; }

  /* On phones, ignore any per-image height and just fill the width, so a
     fixed height can never overflow or distort in the single column. */
  .cb-shot { width: auto; }
  .cb-shot img { height: auto; width: 100%; }

  .cb-h2 { font-size: 1.75rem; }
  .cb-closer__headline { font-size: 2rem; }
}

@media (max-width: 575px) {
  .cb-hero__headline { font-size: 2.5rem; }
  .cb-spine__core { padding: 24px 20px 26px; }
}

/* ---------- 9. Cookie banner (cookieconsent v3) ----------
   Match the banner to the site: Quicksand type, and the "Got it!" button
   in brand gold with ink text like the other CTAs. cookieconsent sets the
   button colour as an inline style from its JS palette, so !important is
   needed to override it. The colour reads var(--gold) so it tracks the
   token; the JS palette hex in js/cookie_consent.js is now superseded. */
.cc-window {
  font-family: 'Quicksand', sans-serif !important;
}

.cc-window .cc-btn,
.cc-window .cc-btn:link,
.cc-window .cc-btn:visited {
  background-color: var(--gold) !important;
  color: var(--ink) !important;
  font-weight: 700;
}

.cc-window .cc-btn:hover,
.cc-window .cc-btn:focus {
  background-color: var(--gold-hover) !important;
  color: var(--ink) !important;
}

/* Contact modal (#myModal) sits on a white card, but the dark front page's
   white text colour is inherited by the modal body — making the intro line
   and the field labels white-on-white (invisible). Force dark body text. */
#myModal .modal-body,
#myModal .modal-body p,
#myModal .modal-body label {
  color: #222;
}