/* ==========================================================================
   FEATURES PAGE
   Four sections, four different shapes: an asymmetric hero with an exploded
   stage, a dark tabbed band for careers, a bento for the core features, and
   an overlapped panel for the close. Everything draws on tokens.css.
   ========================================================================== */


/* ==========================================================================
   1. HERO
   ========================================================================== */
.fhero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--space-section-sm);
  position: relative;
  overflow: clip;
}

.fhero__inner {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

@media (min-width: 60rem) {
  .fhero__inner {
    /* Deliberately uneven: the copy earns the wider half. */
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  }
}

.fhero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}

.fhero__title {
  font-size: var(--text-h1);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
  margin: 0;
}

.fhero__lede {
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  max-width: 34rem;
  margin: 0;
}

/* ---- The four value propositions ---- */
.fhero__props {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: 36rem;
}

@media (min-width: 30rem) {
  .fhero__props { grid-template-columns: 1fr 1fr; }
}

.fhero__props li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.fhero__props li:hover {
  border-color: var(--color-border-accent);
  transform: translateY(-2px);
}

.fhero__props .icon {
  grid-row: 1 / 3;
  width: 20px;
  height: 20px;
  color: var(--color-accent-text);
}

.fhero__props b {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.fhero__props span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

.fhero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}


/* ==========================================================================
   2. HERO STAGE — photo, the form over it, the page the form writes
   ========================================================================== */
.fstage {
  position: relative;
  perspective: var(--ft-perspective);
  padding-block: var(--space-6);
  padding-inline: var(--space-4);
}

.fstage__glow {
  position: absolute;
  inset: 8% -6% 4% -6%;
  border-radius: var(--radius-full);
  background: var(--accent-glow, var(--gradient-accent-soft));
  filter: blur(64px);
  opacity: 0.55;
  pointer-events: none;
}

.fstage__photo {
  position: relative;
  margin: 0;
  border-radius: var(--ft-stage-radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  transform: rotateY(calc(var(--ft-tilt) * -1)) rotateX(2deg);
  transform-origin: center right;
  transition: transform var(--duration-slower) var(--ease-out);
}

.fstage:hover .fstage__photo { transform: rotateY(-2deg) rotateX(1deg); }

.fstage__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 60% 50%;
}

/* ---- The form panel, floating off the left edge ---- */
.fstage__panel {
  position: absolute;
  left: 0;
  top: 14%;
  width: min(16.5rem, 74%);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--ft-float-radius);
  border: 1px solid var(--ft-glass-border);
  background: var(--ft-glass);
  -webkit-backdrop-filter: blur(var(--ft-glass-blur));
  backdrop-filter: blur(var(--ft-glass-blur));
  box-shadow: var(--shadow-lg);
  transform: translateZ(40px);
}

.fstage__panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.fstage__panel-head .icon { color: var(--color-accent-text); }

.fstage__row {
  display: grid;
  gap: 2px;
}

.fstage__label {
  font-size: var(--text-2xs);
  color: var(--color-text-subtle);
}

.fstage__input {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-field-border);
  background: var(--color-field);
  font-size: var(--text-xs);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
}

/* The field being typed into right now. */
.fstage__input--live {
  border-color: var(--color-border-accent);
  box-shadow: var(--focus-ring);
  color: var(--color-accent-text);
  font-family: var(--font-mono);
}

.fstage__caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: currentColor;
  animation: ft-caret 1.1s steps(1) infinite;
}

@keyframes ft-caret {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ---- The live profile card, floating off the bottom-right ---- */
.fstage__live {
  position: absolute;
  right: 0;
  bottom: 6%;
  width: min(13.5rem, 62%);
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4) var(--space-4);
  border-radius: var(--ft-float-radius);
  border: 1px solid var(--ft-glass-border);
  background: var(--ft-glass);
  -webkit-backdrop-filter: blur(var(--ft-glass-blur));
  backdrop-filter: blur(var(--ft-glass-blur));
  box-shadow: var(--shadow-xl);
  transform: translateZ(70px);
  animation: ft-float 7s var(--ease-in-out) infinite;
}

@keyframes ft-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

.fstage__live-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.fstage__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  animation: ft-ping 2s var(--ease-out) infinite;
}

@keyframes ft-ping {
  0%        { box-shadow: 0 0 0 0 rgb(var(--rgb-green-500) / 0.55); }
  70%, 100% { box-shadow: 0 0 0 6px rgb(var(--rgb-green-500) / 0); }
}

.fstage__avatar {
  width: 52px;
  height: 52px;
  margin-top: var(--space-2);
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-md);
}

.fstage__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.fstage__role {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.fstage__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  background: var(--gradient-button);
  color: var(--color-text-on-accent);
}

.fstage__pill .icon { width: 13px; height: 13px; }

.fstage__pill--ghost {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* The floating panels crowd a narrow screen, so below 30rem they tuck in
   under the photo as a plain stack instead of fighting it. */
@media (max-width: 29.99rem) {
  .fstage { padding-inline: 0; }
  .fstage__photo { transform: none; }
  .fstage__photo img { aspect-ratio: 3 / 2; }
  .fstage__panel,
  .fstage__live {
    position: static;
    width: 100%;
    margin-top: var(--space-4);
    transform: none;
    animation: none;
  }
}


/* ==========================================================================
   3. STATS STRIP — the three numbers the business already stands behind
   ========================================================================== */
.fstats {
  list-style: none;
  margin: clamp(2rem, 1rem + 3vw, 3.5rem) 0 0;
  padding: var(--space-6) var(--space-4);
  display: grid;
  gap: var(--space-5);
  border-block: 1px solid var(--color-border);
  text-align: center;
}

@media (min-width: 40rem) {
  .fstats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
  .fstats li + li { border-left: 1px solid var(--color-border); }
}

.fstats li {
  display: grid;
  gap: var(--space-1);
  padding-inline: var(--space-4);
}

.fstats strong {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-none);
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fstats strong span {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  margin-left: 2px;
}

.fstats li > span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* ==========================================================================
   4. CAREER SHOWCASE — dark breakout band with tabs
   ========================================================================== */
.careers {
  background: var(--color-bg);
  overflow: clip;
}

.careers__mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.careers__blob {
  position: absolute;
  width: 38rem;
  height: 38rem;
  border-radius: var(--radius-full);
  filter: blur(90px);
  opacity: 0.5;
}

.careers__blob--1 { top: -14rem; left: -10rem; background: var(--mesh-blob-1); }
.careers__blob--2 { bottom: -18rem; right: -12rem; background: var(--mesh-blob-2); }

.careers__inner { position: relative; }

.careers__head {
  display: grid;
  gap: var(--space-6);
  align-items: end;
  margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

@media (min-width: 60rem) {
  .careers__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.careers__lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

/* ---- Tabs ---- */
.careers__tablist {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 48rem) {
  .careers__tablist { grid-template-columns: repeat(3, 1fr); }
}

.careers__tab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--color-border);
  border-radius: var(--ft-tab-radius);
  background: var(--color-surface-translucent);
  -webkit-backdrop-filter: blur(var(--ft-glass-blur));
  backdrop-filter: blur(var(--ft-glass-blur));
  color: var(--color-text-muted);
  transition: border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.careers__tab:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  color: var(--color-text);
}

.careers__tab[aria-selected="true"] {
  border-color: var(--color-accent-soft-border);
  background: var(--color-accent-soft);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}

.careers__tab-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.careers__tab[aria-selected="true"] .careers__tab-icon {
  background: var(--gradient-button);
  border-color: transparent;
  color: var(--color-text-on-accent);
}

.careers__tab-text { display: grid; gap: 2px; min-width: 0; }

.careers__tab-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.careers__tab-count {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* ---- Panel: a photo column and the three tiers beside it ---- */
.careers__panel {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  animation: ft-panel-in var(--duration-slow) var(--ease-out) both;
}

.careers__panel:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--ft-shot-radius); }

@keyframes ft-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 64rem) {
  .careers__panel {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
  .careers__more { grid-column: 1 / -1; }
}

.careers__shot {
  position: relative;
  margin: 0;
  border-radius: var(--ft-shot-radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  min-height: 22rem;
  display: grid;
}

.careers__shot img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.careers__shot-cap {
  grid-area: 1 / 1;
  align-self: end;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5) var(--space-5);
  /* The photo keeps its top half; the text sits on a fade, not a flat wash. */
  background: linear-gradient(180deg, rgb(15 23 42 / 0) 0%, rgb(15 23 42 / 0.82) 55%, rgb(15 23 42 / 0.95) 100%);
  color: var(--slate-50);
}

.careers__shot-tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid rgb(var(--rgb-slate-50) / 0.28);
  background: rgb(var(--rgb-slate-50) / 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.careers__shot-cap p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgb(var(--rgb-slate-50) / 0.84);
}

.careers__for {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.careers__for li {
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid rgb(var(--rgb-slate-50) / 0.22);
  font-size: var(--text-2xs);
  color: rgb(var(--rgb-slate-50) / 0.78);
}

/* ---- The three tier cards ---- */
.careers__set {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.careers__card-link {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--ft-card-radius);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.careers__card-link:hover {
  border-color: var(--color-border-accent);
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
}

.careers__card-shot {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-muted);
}

.careers__card-shot img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.careers__card-link:hover .careers__card-shot img { transform: scale(1.06); }

.careers__card-body {
  display: grid;
  gap: var(--space-1);
  align-content: center;
  padding-right: var(--space-2);
  min-width: 0;
}

.careers__card-tier {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.careers__card-tier i {
  font-style: normal;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  color: var(--color-text-subtle);
}

.careers__card-name {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.careers__card-blurb {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}

.careers__card-go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-text);
}

.careers__card-go .icon {
  transition: transform var(--duration-base) var(--ease-out);
}

.careers__card-link:hover .careers__card-go .icon { transform: translateX(3px); }

.careers__more { margin: 0; }

@media (max-width: 29.99rem) {
  .careers__card-link { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-3); }
  .careers__card-blurb { display: none; }
}


/* ==========================================================================
   5. CORE FEATURES BENTO
   ========================================================================== */
.core__head { margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.5rem); }

.fbento {
  display: grid;
  gap: var(--ft-bento-gap);
  grid-template-columns: 1fr;
}

/* Six columns gives the uneven split the layout needs: a wide feature cell
   beside a stacked pair, then two mid-width cells underneath. */
@media (min-width: 48rem) {
  .fbento { grid-template-columns: repeat(6, 1fr); }

  .fbento__cell--editor { grid-column: span 6; }
  .fbento__cell--slug   { grid-column: span 3; }
  .fbento__cell--nfc    { grid-column: span 3; }
  .fbento__cell--theme  { grid-column: span 3; }
  .fbento__cell--leads  { grid-column: span 3; }
}

@media (min-width: 64rem) {
  .fbento__cell--editor { grid-column: span 4; grid-row: span 2; }
  .fbento__cell--slug   { grid-column: span 2; }
  .fbento__cell--nfc    { grid-column: span 2; }
  .fbento__cell--theme  { grid-column: span 3; }
  .fbento__cell--leads  { grid-column: span 3; }
}

.fbento__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: var(--ft-bento-min);
  padding: var(--ft-bento-pad);
  border: 1px solid var(--color-border);
  border-radius: var(--ft-bento-radius);
  background: var(--gradient-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.fbento__cell:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.fbento__text { display: flex; flex-direction: column; gap: var(--space-3); }

.fbento__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-accent-soft-border);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.fbento__title {
  margin: 0;
  font-size: var(--text-h4);
  letter-spacing: var(--tracking-tight);
}

.fbento__lede {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.fticks {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.fticks li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.fticks .icon { color: var(--color-success); flex: none; }

/* ---- Media inside a cell ---- */
.fbento__media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.fbento__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out);
}

.fbento__cell:hover .fbento__media img { transform: scale(1.04); }

.fbento__media--fill { flex: 1; min-height: 9rem; }
.fbento__media--fill img { aspect-ratio: 16 / 10; }

/* The editor cell's photo takes the leftover height in the tall cell. */
.fbento__media--editor { flex: 1; min-height: 12rem; }
.fbento__media--editor img { height: 100%; aspect-ratio: 3 / 2; }

/* Split-screen label pinned over the two monitors */
.fbento__split {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.fbento__split-side {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid rgb(var(--rgb-slate-50) / 0.28);
  background: rgb(15 23 42 / 0.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--slate-50);
}

.fbento__split-side--live { border-color: rgb(var(--rgb-blue-500) / 0.6); }

.fbento__split-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--green-400);
  animation: ft-blink 1.6s var(--ease-in-out) infinite;
}

@keyframes ft-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* ---- Custom URL cell ---- */
.fbento__url {
  margin: auto 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-accent);
  background: var(--color-field);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fbento__url b {
  color: var(--color-accent-text);
  font-weight: var(--weight-bold);
}

.fbento__url .fstage__caret { color: var(--color-accent-text); }

.fbento__url-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-2xs);
  color: var(--color-text-subtle);
}

.fbento__url-note .icon { color: var(--color-success); flex: none; }

/* ---- NFC cell: photo on top, words underneath ---- */
.fbento__cell--nfc { padding-top: 0; padding-inline: 0; }
.fbento__cell--nfc .fbento__media { border-radius: 0; border-inline: 0; border-top: 0; }
.fbento__cell--nfc .fbento__text { padding: 0 var(--ft-bento-pad); }

/* ---- Dual theme cell: a light half and a dark half ---- */
.fbento__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: auto 0 0;
}

.fbento__pair-half {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 4 / 3;
}

.fbento__pair-half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fbento__pair-half b {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.fbento__pair-half--day b { background: rgb(var(--rgb-white) / 0.88); color: var(--slate-900); }
.fbento__pair-half--night b { background: rgb(var(--rgb-slate-900) / 0.8); color: var(--slate-50); }

.fswatch {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-2);
}

.fswatch__chip {
  width: var(--ft-swatch);
  height: var(--ft-swatch);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border);
}

.fswatch__chip--blue   { background: var(--blue-500); }
.fswatch__chip--violet { background: var(--violet-600); }
.fswatch__chip--green  { background: var(--green-500); }
.fswatch__chip--amber  { background: var(--amber-400); }

.fswatch__chip.is-on { box-shadow: 0 0 0 2px var(--color-accent); }

/* ---- Lead generation cell: a photo with two chat bubbles over it ---- */
.fbento__chat {
  position: relative;
  margin: auto 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  min-height: 11rem;
  display: grid;
}

.fbento__chat img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.fbento__bubble {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  max-width: 72%;
  margin: var(--space-4) 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
  background: rgb(var(--rgb-white) / 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
  color: var(--slate-900);
  box-shadow: var(--shadow-md);
}

.fbento__bubble--me {
  align-self: end;
  justify-self: end;
  margin: 0 var(--space-4) var(--space-4) 0;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
  background: var(--whatsapp-500);
  color: var(--white);
}


/* ==========================================================================
   6. FINAL CTA — an overlapped panel, not another centred block
   ========================================================================== */
.ftcta { padding-bottom: var(--space-section); }

.ftcta__panel {
  position: relative;
  display: grid;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background: var(--gradient-accent);
  box-shadow: var(--shadow-accent-lg);
  isolation: isolate;
}

@media (min-width: 60rem) {
  .ftcta__panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
}

.ftcta__photo {
  grid-area: 1 / 1;
  margin: 0;
  z-index: -1;
}

@media (min-width: 60rem) {
  .ftcta__photo { grid-area: 1 / 2; }
}

.ftcta__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  mix-blend-mode: luminosity;
}

/* A soft wash so the words stay readable wherever the photo is bright. */
.ftcta__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--blue-600) 0%, rgb(var(--rgb-blue-500) / 0.35) 70%, transparent 100%);
}

@media (max-width: 59.99rem) {
  .ftcta__photo::after {
    background: linear-gradient(180deg, rgb(var(--rgb-blue-500) / 0.5), var(--blue-600) 75%);
  }
}

.ftcta__inner {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: clamp(2rem, 1.2rem + 3.5vw, 4rem);
  color: var(--color-text-on-accent);
}

.ftcta__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid rgb(var(--rgb-white) / 0.34);
  background: rgb(var(--rgb-white) / 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.ftcta__title {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: inherit;
}

.ftcta__lede {
  margin: 0;
  max-width: 34rem;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: rgb(var(--rgb-white) / 0.86);
}

.ftcta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* On the accent panel the secondary button reads as the primary one. */
.ftcta .btn--secondary {
  background: var(--white);
  border-color: transparent;
  color: var(--blue-700);
}

.ftcta .btn--secondary:hover {
  background: var(--slate-100);
  color: var(--blue-700);
}

.ftcta__note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: rgb(var(--rgb-white) / 0.78);
}


/* ==========================================================================
   7. MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fstage__live,
  .fstage__caret,
  .fstage__dot,
  .fbento__split-dot { animation: none; }

  .careers__panel { animation: none; }

  .fstage__photo,
  .fhero__props li,
  .careers__tab,
  .careers__card-link,
  .fbento__cell,
  .fbento__media img,
  .careers__card-shot img { transition: none; }
}