/* =========================================================================
   JEBBEE.COM — homepage grid (Acquired-style full-bleed tile wall)
   6 vertical 2:3 tiles per row · video sim · feature tiles · characters
   ========================================================================= */

.tile-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  padding: 22px;
  background: var(--cool-grey);
}
@media (max-width: 900px) { .tile-wall { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .tile-wall { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 14px; } }

/* ============================================ SUBPAGE FEATURE-SQUARE ROW
   A contained single row of clickable feature squares, reusing the tile +
   .feat-* vocabulary from the landing wall. */
.feature-squares-wrap { background: var(--cool-grey); padding: 4px 0 10px; }
.squares-hint {
  text-align: center; margin: 0 auto 16px; color: var(--fg-3);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.feature-squares {
  max-width: 1040px; margin: 0 auto; padding: 0 32px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px;
}
/* app-style icon tiles: a small colored square (white Vessel + glyph) + caption */
.app-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 82px; text-decoration: none; }
.app-icon {
  position: relative; width: 66px; height: 66px; border-radius: 24%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(20, 8, 40, 0.16);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.app-tile:hover .app-icon { transform: translateY(-4px) scale(1.07); }
.app-icon .vessel {
  width: 42px; height: 42px; border-radius: 26%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(4, 4, 5, 0.16);
}
.app-icon .vessel img { width: 56%; height: 56%; object-fit: contain; }
.app-icon .soon {
  position: absolute; top: -7px; right: -7px; z-index: 5;
  font-size: 7.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: var(--brand-black); padding: 3px 6px; border-radius: 9px;
}
.app-name { font-size: 11.5px; font-weight: 600; line-height: 1.18; color: var(--fg-2); text-align: center; }

/* feature icon shown beside each detail section's heading */
.detail-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 24%; background: var(--lavender-mist);
  margin-bottom: 18px;
}
.detail-icon img { width: 54%; height: 54%; object-fit: contain; }

/* feature-detail scroll anchor clearance under the fixed header */
.feature-detail { scroll-margin-top: 88px; }

/* ============================================ ACQUIRED-STYLE ZOOM OVERLAY
   A clone of the clicked square expands to fill the viewport, the page jumps
   to the matching detail, then the clone shrinks into that detail's video. */
.fz-overlay {
  position: fixed; z-index: 1000; overflow: hidden;
  background-size: cover; background-position: center;
  box-shadow: 0 30px 80px rgba(20, 8, 40, 0.34);
  will-change: left, top, width, height;
}

.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
  display: block;
  text-decoration: none;
  background: #fff;
  transform: translateZ(0);
  will-change: transform;
  transition: transform 0.34s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.34s ease;
}
.tile:hover { text-decoration: none; z-index: 3; transform: translateY(-8px) scale(1.035); box-shadow: 0 24px 52px rgba(20, 8, 40, 0.32); }

/* light sheen sweep on hover — adds life to any tile */
.tile::before {
  content: "";
  position: absolute; top: -10%; bottom: -10%; left: -65%;
  width: 45%; z-index: 6; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-16deg);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .tile:hover::before { opacity: 1; animation: tileSheen 0.7s ease; }
}
@keyframes tileSheen {
  from { left: -65%; }
  to   { left: 125%; }
}

/* ============================================================ VIDEO TILE */
.tile-video { background: #0a0a0e; }
.tile-video .media {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
@media (prefers-reduced-motion: no-preference) {
  .tile-video .media {
    animation: kenburns 22s ease-in-out infinite alternate;
    will-change: transform;
  }
}
@keyframes kenburns {
  0%   { transform: scale(1.02) translate(0%, 0%); }
  45%  { transform: scale(1.12) translate(-2.4%, -1.8%); }
  100% { transform: scale(1.2) translate(2%, 2.4%); }
}
/* a second pass: slow drift of a light leak for "footage" feel */
.tile-video .leak {
  position: absolute; inset: -30%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.14), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .tile-video.playing .leak { opacity: 1; animation: leakdrift 9s ease-in-out infinite alternate; }
}
@keyframes leakdrift {
  from { transform: translate(-4%, -6%) rotate(0deg); }
  to   { transform: translate(8%, 6%) rotate(8deg); }
}

/* real footage variant */
.tile-video .vmedia {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #0a0a0e;
}

/* top chrome */
.tile-video .v-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(8px, 0.9vw, 12px) clamp(9px, 1vw, 14px);
  z-index: 2;
}
.v-state {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: clamp(8px, 0.75vw, 11px); font-weight: 600; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.92);
  background: rgba(4, 4, 5, 0.45);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  padding: 3px 8px;
  border-radius: 25px;
}
.v-state .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.45); }
.tile-video.playing .v-state .dot { background: var(--chartreuse); box-shadow: 0 0 8px var(--chartreuse); }
.tile-video.playing .v-state .label-paused { display: none; }
.tile-video:not(.playing) .v-state .label-playing { display: none; }

/* equalizer bars (audio playing) */
.v-eq { display: flex; align-items: flex-end; gap: 2.5px; height: 14px; opacity: 0; transition: opacity 0.3s; }
.tile-video.playing .v-eq { opacity: 1; }
.v-eq i { width: 3px; border-radius: 2px; background: #fff; height: 30%; }
@media (prefers-reduced-motion: no-preference) {
  .tile-video.playing .v-eq i { animation: eq 0.9s ease-in-out infinite alternate; }
  .v-eq i:nth-child(2) { animation-delay: 0.15s; }
  .v-eq i:nth-child(3) { animation-delay: 0.32s; }
  .v-eq i:nth-child(4) { animation-delay: 0.5s; }
}
@keyframes eq { from { height: 22%; } to { height: 100%; } }

/* bottom caption + scrubber */
.tile-video .v-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(9px, 1vw, 14px) clamp(9px, 1vw, 14px) clamp(8px, 0.9vw, 12px);
  z-index: 2;
  background: linear-gradient(to top, rgba(4,4,5,0.66), rgba(4,4,5,0));
}
.v-kicker {
  font-size: clamp(7.5px, 0.7vw, 10px); font-weight: 700; letter-spacing: 0.16em;
  color: var(--chartreuse);
  margin-bottom: 4px;
}
.tile-video.kind-program .v-kicker { color: #5be3e0; }
.v-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(12.5px, 1.05vw, 19px);
  line-height: 1.18;
  color: #fff;
  margin: 0 0 3px;
}
.v-byline { font-size: clamp(9px, 0.8vw, 11.5px); color: rgba(255,255,255,0.66); font-weight: 500; }
.v-scrub { margin-top: clamp(6px, 0.7vw, 10px); display: flex; align-items: center; gap: 7px; }
.v-track { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.22); overflow: hidden; }
.v-track > i { display: block; height: 100%; width: 0%; background: var(--brand-purple); border-radius: 3px; }
.tile-video.playing .v-track > i { background: #c98bff; box-shadow: 0 0 6px rgba(164, 74, 249, 0.9); }
.v-time { font-size: clamp(8px, 0.7vw, 10px); font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.7); letter-spacing: 0.04em; }



/* ========================================================== FEATURE TILE
   Acquired-style: a feature "logo" (icon in a contrasting Vessel) + name +
   sub-caption, centered on a solid brand color. One color per feature. */
.tile-feature {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: clamp(9px, 1.1vw, 16px);
  padding: clamp(14px, 1.7vw, 28px);
}
.tile-feature .vessel {
  width: clamp(46px, 4.8vw, 78px);
  height: clamp(46px, 4.8vw, 78px);
  border-radius: 24%;
  background: #fff;
  box-shadow: 0 8px 22px rgba(4, 4, 5, 0.14);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tile-feature .vessel img { width: 56%; height: 56%; object-fit: contain; }
.tile-feature .f-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 27px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}
.tile-feature .f-name .tm { font-size: 0.3em; vertical-align: super; font-family: var(--font-sans); font-weight: 500; }
.tile-feature .f-sub {
  font-size: clamp(10px, 0.92vw, 14px);
  line-height: 1.4;
  max-width: 92%;
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}
.tile-feature:hover .vessel { transform: scale(1.08) rotate(-4deg); }

/* one solid color per feature */
.feat-purple { background: var(--brand-purple); }
.feat-purple .f-name { color: #fff; }
.feat-purple .f-sub  { color: rgba(255, 255, 255, 0.84); }

.feat-black { background: var(--brand-black); }
.feat-black .f-name { color: #fff; }
.feat-black .f-sub  { color: rgba(255, 255, 255, 0.7); }

.feat-aqua { background: var(--electric-aqua); }
.feat-aqua .f-name { color: #fff; }
.feat-aqua .f-sub  { color: rgba(255, 255, 255, 0.92); }

.feat-lime { background: var(--chartreuse); }
.feat-lime .f-name { color: var(--brand-black); }
.feat-lime .f-sub  { color: rgba(4, 4, 5, 0.68); }

.feat-blue { background: var(--electric-blue); }
.feat-blue .f-name { color: #fff; }
.feat-blue .f-sub  { color: rgba(255, 255, 255, 0.86); }

.feat-lav { background: rgba(164, 74, 249, 0.18); }
.feat-lav .f-name { color: var(--brand-black); }
.feat-lav .f-sub  { color: var(--dust); }

.feat-dust { background: var(--dust); }
.feat-dust .f-name { color: #fff; }
.feat-dust .f-sub  { color: rgba(255, 255, 255, 0.74); }

.feat-green { background: #19cb6e; }
.feat-green .f-name { color: var(--brand-black); }
.feat-green .f-sub  { color: rgba(4, 4, 5, 0.66); }

.feat-orange { background: #ff6a00; }
.feat-orange .f-name { color: #fff; }
.feat-orange .f-sub  { color: rgba(255, 255, 255, 0.85); }

.feat-teal { background: #0d9488; }
.feat-teal .f-name { color: #fff; }
.feat-teal .f-sub  { color: rgba(255, 255, 255, 0.86); }

/* "coming soon" badge on a feature tile */
.tile-feature .soon {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.94); color: var(--fg-1);
  padding: 4px 9px; border-radius: 25px;
}

/* ============================================================ BRAND TILES */
.tile-tagline {
  background: var(--brand-black);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(12px, 1.4vw, 22px);
}
.tile-tagline .ast { width: clamp(22px, 2.4vw, 40px); margin-bottom: auto; }
.tile-tagline p {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 28px);
  line-height: 1.16;
  color: #fff;
  margin: 0;
}
.tile-tagline p em { font-style: italic; color: var(--brand-purple); }
.tile-tagline .sub { font-family: var(--font-sans); font-weight: 400; font-size: clamp(9px, 0.8vw, 13px); color: rgba(255,255,255,0.55); margin-top: 8px; line-height: 1.5; }

.tile-asterisk {
  background: var(--brand-purple);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 18px;
}
.tile-asterisk img { width: 38%; }
@media (prefers-reduced-motion: no-preference) {
  .tile-asterisk:hover img { animation: spinPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
}
@keyframes spinPop { from { transform: rotate(0) scale(0.86); } to { transform: rotate(90deg) scale(1); } }
.tile-asterisk .word { font-size: clamp(12px, 1vw, 15px); font-weight: 600; color: #fff; letter-spacing: 0.18em; text-transform: lowercase; }

/* Ask Jebbee chat tile */
.tile-ask {
  background: var(--lavender-mist);
  display: flex; flex-direction: column;
  padding: clamp(10px, 1.2vw, 18px);
  border: 1px solid rgba(164, 74, 249, 0.18);
  container-type: size;
}
/* square tiles get short — shed chat content before it clips */
@container (max-height: 200px) {
  .bubble.user { display: none; }
}
@container (max-height: 150px) {
  .bubble.typing { display: none; }
}
.tile-ask .ask-head { display: flex; align-items: center; gap: 7px; margin-bottom: clamp(6px, 0.8vw, 12px); }
.tile-ask .ask-head img { width: clamp(18px, 1.8vw, 26px); height: clamp(18px, 1.8vw, 26px); }
.tile-ask .ask-head .t { font-family: var(--font-serif); font-weight: 700; font-size: clamp(13px, 1.15vw, 19px); color: var(--fg-1); }
.tile-ask .ask-head .t .tm { font-size: 0.4em; vertical-align: super; font-family: var(--font-sans); }
.bubble {
  max-width: 92%;
  border-radius: 12px;
  padding: clamp(6px, 0.7vw, 9px) clamp(8px, 0.85vw, 12px);
  font-size: clamp(9px, 0.85vw, 13px);
  line-height: 1.4;
  margin-bottom: 7px;
}
.bubble.user { align-self: flex-end; background: var(--brand-purple); color: #fff; border-bottom-right-radius: 4px; }
.bubble.ai { align-self: flex-start; background: #fff; color: var(--fg-1); border-bottom-left-radius: 4px; box-shadow: var(--shadow-1); }
.bubble.typing { display: inline-flex; gap: 4px; align-items: center; padding: 11px 14px; }
.bubble.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-purple); opacity: 0.4; }
@media (prefers-reduced-motion: no-preference) {
  .bubble.typing i { animation: blip 1.1s ease-in-out infinite; }
  .bubble.typing i:nth-child(2) { animation-delay: 0.18s; }
  .bubble.typing i:nth-child(3) { animation-delay: 0.36s; }
}
@keyframes blip { 0%, 100% { opacity: 0.35; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.tile-ask .ask-prompt {
  margin-top: auto;
  background: #fff;
  border-radius: 25px;
  padding: clamp(6px, 0.7vw, 9px) clamp(8px, 1vw, 14px);
  font-size: clamp(8.5px, 0.8vw, 12px);
  color: var(--fg-3);
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  box-shadow: var(--shadow-1);
}
.tile-ask .ask-prompt .send {
  width: clamp(16px, 1.5vw, 22px); height: clamp(16px, 1.5vw, 22px); border-radius: 50%;
  background: var(--brand-purple);
  color: #fff; font-size: clamp(9px, 0.85vw, 12px);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.tile-ask:hover { background: #e6d6fc; }

/* Get the app tile */
.tile-app {
  background: #fff;
  border: 1px solid rgba(110, 107, 123, 0.1);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: 20px;
}
.tile-app .phone {
  align-self: center;
  margin: auto 0;
  width: 52%;
  aspect-ratio: 9 / 16;
  border-radius: 14% / 8%;
  background: var(--brand-black);
  padding: 5%;
  display: flex; align-items: center; justify-content: center;
}
.tile-app .phone .screen {
  width: 100%; height: 100%;
  border-radius: 10% / 6%;
  background: linear-gradient(160deg, var(--brand-purple), #6c1fd0);
  display: flex; align-items: center; justify-content: center;
}
.tile-app .phone .screen img { width: 44%; }
.tile-app .a-name { font-family: var(--font-serif); font-weight: 700; font-size: clamp(16px, 1.4vw, 23px); color: var(--fg-1); margin: 14px 0 4px; }
.tile-app .a-sub { font-size: clamp(10.5px, 0.9vw, 13px); color: var(--fg-3); margin: 0; }
.tile-app:hover { border-color: var(--brand-purple); }

/* ========================================================= CHARACTER TILE */
.tile-character { display: flex; flex-direction: column; }
.tile-character.bg-lav { background: var(--lavender-mist); }
.tile-character.bg-lime { background: var(--chartreuse); }
.tile-character svg { width: 100%; height: 100%; display: block; }
.tile-character .c-tag {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(4, 4, 5, 0.82);
  color: #fff;
  font-size: clamp(10px, 0.85vw, 12.5px);
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 25px;
  z-index: 2;
  backdrop-filter: blur(4px);
}
/* character motion */
.wave-arm, .thumb-arm, .head-bob, .body-sway, .blink, .spark { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .wave-arm { transform-origin: var(--ox) var(--oy); animation: wave 1.6s ease-in-out infinite; }
  @keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-16deg); }
    50% { transform: rotate(8deg); }
    75% { transform: rotate(-12deg); }
  }
  .thumb-arm { transform-origin: var(--ox) var(--oy); animation: thumb 2.4s ease-in-out infinite; }
  @keyframes thumb {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    18% { transform: rotate(-7deg) translateY(-7px); }
    36% { transform: rotate(-4deg) translateY(-3px); }
    52% { transform: rotate(-7deg) translateY(-7px); }
    70% { transform: rotate(0deg) translateY(0); }
  }
  .head-bob { transform-origin: var(--ox) var(--oy); animation: bob 3.4s ease-in-out infinite; }
  @keyframes bob {
    0%, 100% { transform: rotate(0deg); }
    40% { transform: rotate(2.6deg); }
    70% { transform: rotate(-1.8deg); }
  }
  .body-sway { transform-origin: var(--ox) var(--oy); animation: sway 4.2s ease-in-out infinite; }
  @keyframes sway {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }
  .blink { animation: blink 4.6s infinite; transform-origin: var(--ox) var(--oy); }
  @keyframes blink {
    0%, 93%, 100% { transform: scaleY(1); }
    95%, 97% { transform: scaleY(0.08); }
  }
  .spark { animation: sparkpop 2.4s ease-in-out infinite; transform-origin: var(--ox) var(--oy); }
  @keyframes sparkpop {
    0%, 60%, 100% { opacity: 0; transform: scale(0.4); }
    18%, 40% { opacity: 1; transform: scale(1); }
  }
}

/* ============================================================= grid intro */
.wall-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 36px 32px 22px;
}
.wall-intro h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(34px, 4.1vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}
.wall-intro h1 em { font-style: italic; color: var(--brand-purple); }
.wall-intro .right {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 24px);
  color: var(--dust); max-width: 720px; line-height: 1.4;
}