/* ============================================================
   FINNECT AI · CONCIERGE
   "Cream & Ink" — an editorial concierge desk.
   Warm cream body, ink header, coral held back as a true accent.
   Anton for display, Montserrat for voice, Montserrat Italic for
   emphasis, Glacial Indifference for instrument labels.
   Everything is namespaced under #fnc-root.
   ============================================================ */

@font-face {
  font-family: 'FNC Anton';
  src: url('/concierge/fonts/anton-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FNC Montserrat';
  src: url('/concierge/fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FNC Montserrat';
  src: url('/concierge/fonts/montserrat-italic-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'FNC Glacial';
  src: url('/concierge/fonts/glacial-regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FNC Glacial';
  src: url('/concierge/fonts/glacial-bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

#fnc-root {
  /* ---- cream paper ---- */
  --p-0: #f6f1e6;          /* panel base, warm cream */
  --p-1: #efe8d9;          /* raised surface */
  --p-2: #e3dac7;          /* stone, hairlines */
  --p-3: #cec0a7;          /* stone deep */
  /* ---- ink ---- */
  --ink: #0e1a2b;          /* headline ink, ties to the site navy */
  --ink-1: #1b2b42;
  --ink-2: #4d5a6d;        /* secondary copy */
  --ink-3: #8a8577;        /* warm tertiary labels */
  /* ---- accent, used sparingly ---- */
  --coral: #ec6519;
  --coral-2: #ff8038;
  --coral-soft: rgba(236, 101, 25, .13);

  --hair: rgba(14, 26, 43, .10);
  --hair-2: rgba(14, 26, 43, .18);
  --hair-light: rgba(251, 249, 245, .16);

  /* ---- radii, nothing sharp ---- */
  --r-panel: 22px;
  --r-orb: 29px;          /* launcher: 2px shy of a perfect circle (31px) */
  --r-card: 16px;
  --r-box: 14px;
  --r-pill: 999px;

  --anton: 'FNC Anton', 'Arial Black', sans-serif;
  --mont: 'FNC Montserrat', 'Helvetica Neue', sans-serif;
  --glacial: 'FNC Glacial', 'FNC Montserrat', sans-serif;

  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);

  position: fixed;
  inset: 0;
  z-index: 240;
  pointer-events: none;
  font-family: var(--mont);
}

#fnc-root * { box-sizing: border-box; }
/* no background in this reset: an id-scoped type selector outranks every
   class below it and would strip the launcher and send-button fills */
#fnc-root button { font: inherit; color: inherit; border: 0; cursor: pointer; }
#fnc-root .fnc-ibtn,
#fnc-root .fnc-nudge-x { background: none; }

/* animated film grain, shared by both surfaces */
@keyframes fnc-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(4%, -6%); }
  60%  { transform: translate(-3%, -3%); }
  80%  { transform: translate(6%, 3%); }
  100% { transform: translate(0, 0); }
}
@keyframes fnc-spin { to { transform: rotate(360deg); } }
@keyframes fnc-word { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================================================
   LAUNCHER · cream capsule, Finnect sigma, orbiting mote, magnetic
   ============================================================ */

.fnc-launcher {
  position: absolute;
  right: clamp(16px, 2.4vw, 34px);
  bottom: clamp(16px, 2.4vw, 34px);
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  padding: 0;
  pointer-events: auto;
  border-radius: var(--r-orb);
  background: none;
  /* magnetic drift lives on this transform, so every pulse animation below
     runs on a child instead of fighting it */
  transform: translate(var(--fnc-mx, 0px), var(--fnc-my, 0px));
  will-change: transform, width;
  transition: width .7s var(--ease), transform .35s var(--ease);
}
.fnc-launcher[data-hot="true"] { width: var(--fnc-pill-w, 200px); }

/* the glow that beats */
.fnc-aura {
  position: absolute;
  inset: -12px;
  border-radius: calc(var(--r-orb) + 12px);
  background: radial-gradient(circle, rgba(236, 101, 25, .58), rgba(255, 128, 56, .18) 46%, transparent 72%);
  filter: blur(7px);
  animation: fnc-beat 3.2s var(--ease-io) infinite;
  pointer-events: none;
}
/* the translucent glass shell */
.fnc-glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-orb);
  background:
    radial-gradient(130% 140% at 30% 16%,
      rgba(255, 253, 248, .97),
      rgba(250, 242, 227, .80) 38%,
      rgba(229, 209, 174, .58) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  /* top highlight and bottom inner shade give the sphere its volume */
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .98),
    inset 0 -12px 22px rgba(158, 126, 78, .26),
    inset 0 0 0 1px rgba(255, 248, 236, .62),
    0 18px 46px rgba(6, 13, 24, .5),
    0 0 42px rgba(236, 101, 25, .3);
  animation: fnc-beat-glass 3.2s var(--ease-io) infinite;
  pointer-events: none;
}
/* once expanded, a 2% swell is 4px of visible edge movement, which reads as a
   shake. Hold the geometry still and let the glow carry the heartbeat. */
.fnc-launcher[data-hot="true"] .fnc-glass { animation: none; }
/* slow light sweep across the glass */
.fnc-sheen {
  position: absolute;
  top: -60%; bottom: -60%; left: -45%;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: rotate(9deg);
  animation: fnc-lsheen 5.6s var(--ease-io) infinite;
}
@keyframes fnc-lsheen {
  0%   { left: -45%; }
  58%  { left: 118%; }
  100% { left: 118%; }
}

/* a real two-beat heartbeat, then rest */
@keyframes fnc-beat {
  0%   { transform: scale(1);    opacity: .5; }
  6%   { transform: scale(1.10); opacity: .88; }
  13%  { transform: scale(1.01); opacity: .55; }
  20%  { transform: scale(1.07); opacity: .74; }
  30%  { transform: scale(1);    opacity: .5; }
  100% { transform: scale(1);    opacity: .5; }
}
@keyframes fnc-beat-glass {
  0%   { transform: scale(1); }
  6%   { transform: scale(1.016); }
  13%  { transform: scale(1.003); }
  20%  { transform: scale(1.010); }
  30%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.fnc-l-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 200px;
  padding: 0 16px;
  transition: opacity .3s ease;
}
.fnc-l-mark {
  position: relative;
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
}
.fnc-l-mark img {
  width: 22px;
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(146, 120, 82, .35));
}

/* the text column takes every pixel the mark does not, and both lines are
   justified flush to its edges, so no dead space is left on the right */
.fnc-l-txt { flex: 1; min-width: 0; }
.fnc-l-k {
  display: block;
  font-family: var(--glacial);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  text-indent: .15em;       /* half the trailing letter-space, so it optically centres */
  color: var(--coral);
  white-space: nowrap;
  line-height: 1.1;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .34s ease .04s, transform .6s var(--ease) .04s;
}
.fnc-l-t {
  display: block;
  margin-top: 3px;
  font-family: var(--anton);
  font-size: 17.2px;
  letter-spacing: .012em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.05;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .34s ease .09s, transform .6s var(--ease) .09s;
}
.fnc-launcher[data-hot="true"] .fnc-l-k,
.fnc-launcher[data-hot="true"] .fnc-l-t { opacity: 1; transform: none; }

.fnc-l-close {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  color: var(--ink);
  opacity: 0;
  transform: rotate(-40deg) scale(.7);
  transition: opacity .3s ease, transform .55s var(--ease);
}
.fnc-l-close svg { width: 18px; height: 18px; }
#fnc-root[data-open="true"] .fnc-launcher { width: 62px; }
#fnc-root[data-open="true"] .fnc-l-inner { opacity: 0; }
#fnc-root[data-open="true"] .fnc-l-close { opacity: 1; transform: none; }

/* the site's own hero scroll hint sits directly under the launcher.
   Delete this one rule to bring it back. */
.hud-scroll { display: none !important; }

/* ---------- nudge ---------- */

.fnc-nudge {
  position: absolute;
  right: calc(clamp(16px, 2.4vw, 34px) + 76px);
  bottom: calc(clamp(16px, 2.4vw, 34px) + 16px);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 276px;
  padding: 15px 17px;
  pointer-events: auto;
  background: var(--p-0);
  border-radius: var(--r-card);
  box-shadow: 0 20px 52px rgba(6, 13, 24, .5), 0 0 0 1px rgba(14, 26, 43, .08);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .5s ease, transform .7s var(--ease);
}
.fnc-nudge[data-show="true"] { opacity: 1; transform: none; }
.fnc-nudge::before {
  content: "";
  position: absolute;
  left: 0; top: 15px; bottom: 15px;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--coral);
}
.fnc-nudge-k {
  display: block;
  margin-bottom: 5px;
  font-family: var(--glacial);
  font-size: 8px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--coral);
}
.fnc-nudge i { font-family: var(--mont); font-style: italic; color: var(--ink); }
.fnc-nudge-x { flex: none; color: var(--ink-3); font-size: 15px; line-height: 1; padding: 0 2px; }
.fnc-nudge-x:hover { color: var(--ink); }

/* ============================================================
   PANEL
   ============================================================ */

.fnc-panel {
  position: absolute;
  right: clamp(16px, 2.4vw, 34px);
  bottom: calc(clamp(16px, 2.4vw, 34px) + 78px);
  width: min(422px, calc(100vw - 32px));
  height: min(602px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  border-radius: var(--r-panel);
  background: var(--p-0);
  box-shadow:
    0 60px 140px rgba(4, 10, 19, .62),
    0 0 0 1px rgba(14, 26, 43, .10),
    0 0 90px rgba(236, 101, 25, .07);
  opacity: 0;
  transform: translateY(22px) scale(.975);
  transform-origin: bottom right;
  visibility: hidden;
  transition: opacity .4s ease, transform .74s var(--ease), visibility 0s linear .74s;
}
#fnc-root[data-open="true"] .fnc-panel {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity .4s ease, transform .74s var(--ease), visibility 0s;
}

/* ============================================================
   HEADER · ink block, the colour anchor of the whole panel
   ============================================================ */

.fnc-head {
  position: relative;
  flex: none;
  padding: 15px 18px 0;
  overflow: hidden;
  background: linear-gradient(165deg, #16273f 0%, var(--ink) 58%, #0a1524 100%);
  color: var(--p-0);
}
.fnc-head::before {
  content: "";
  position: absolute;
  top: -150px; right: -90px;
  width: 320px; height: 300px;
  background: radial-gradient(circle, rgba(236, 101, 25, .48), transparent 66%);
  animation: fnc-drift 13s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fnc-drift {
  from { transform: translate(0, 0) scale(1); opacity: .7; }
  to   { transform: translate(-58px, 26px) scale(1.2); opacity: 1; }
}
.fnc-head::after {
  content: "";
  position: absolute;
  inset: -20%;
  background-image: var(--fnc-noise);
  opacity: .05;
  animation: fnc-grain 5s steps(5) infinite;
  pointer-events: none;
}

.fnc-hud {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--glacial);
  font-size: 8px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, .55);
}
.fnc-hud-l { display: flex; align-items: center; gap: 8px; }
.fnc-live {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--coral-2);
  box-shadow: 0 0 0 0 rgba(255, 128, 56, .7);
  animation: fnc-pulse 2.4s ease-out infinite;
}
@keyframes fnc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 128, 56, .7); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 128, 56, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 128, 56, 0); }
}
.fnc-clock { font-variant-numeric: tabular-nums; letter-spacing: .18em; }
.fnc-head-btns { display: flex; gap: 2px; margin-right: -6px; }
.fnc-ibtn {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: rgba(251, 249, 245, .5);
  border-radius: 50%;
  transition: color .25s ease, background .25s ease;
}
.fnc-ibtn:hover { color: var(--p-0); background: rgba(251, 249, 245, .12); }
.fnc-ibtn svg { width: 13px; height: 13px; }

.fnc-word { position: relative; margin-top: 10px; }
.fnc-word h2 {
  font-family: var(--anton);
  font-size: 31px;
  line-height: .98;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--p-0);
  margin: 0;
}
.fnc-word h2 span { display: inline-block; animation: fnc-rise .9s var(--ease) both; }
.fnc-word h2 i { color: var(--coral-2); font-style: normal; }
@keyframes fnc-rise { from { opacity: 0; transform: translateY(18px) rotate(1.5deg); } to { opacity: 1; transform: none; } }

/* instrument strip: waveform + rolling stat */
.fnc-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 11px;
  padding: 9px 0 11px;
  border-top: 1px solid var(--hair-light);
}
.fnc-wave { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.fnc-wave i {
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--coral-2);
  opacity: .85;
  animation: fnc-eq 1.5s ease-in-out infinite;
}
.fnc-wave i:nth-child(1) { height: 40%; animation-delay: 0s; }
.fnc-wave i:nth-child(2) { height: 75%; animation-delay: .12s; }
.fnc-wave i:nth-child(3) { height: 100%; animation-delay: .24s; }
.fnc-wave i:nth-child(4) { height: 60%; animation-delay: .36s; }
.fnc-wave i:nth-child(5) { height: 88%; animation-delay: .48s; }
.fnc-wave i:nth-child(6) { height: 45%; animation-delay: .6s; }
.fnc-wave i:nth-child(7) { height: 70%; animation-delay: .72s; }
@keyframes fnc-eq {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}
.fnc-panel[data-busy="true"] .fnc-wave i { animation-duration: .5s; }

.fnc-roll { position: relative; flex: 1; height: 13px; overflow: hidden; }
.fnc-roll span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  font-family: var(--glacial);
  font-size: 8.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, .72);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .5s ease, transform .7s var(--ease);
}
.fnc-roll span[data-on="true"] { opacity: 1; transform: none; }
.fnc-roll span[data-out="true"] { opacity: 0; transform: translateY(-100%); }

/* conversation depth rail */
.fnc-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(251, 249, 245, .10); }
.fnc-rail i {
  display: block;
  height: 100%;
  width: 6%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--coral), var(--coral-2));
  box-shadow: 0 0 10px rgba(255, 128, 56, .55);
  transition: width 1.1s var(--ease);
}

/* ============================================================
   LOG · cream, spotlight, grain
   ============================================================ */

.fnc-body { position: relative; flex: 1; min-height: 0; display: flex; }

/* three slow blobs drifting behind the paper, the same idea as the panel
   header aurora but far quieter so copy stays perfectly readable */
.fnc-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fnc-aurora i { position: absolute; border-radius: 50%; filter: blur(34px); display: block; }
.fnc-aurora i:nth-child(1) {
  width: 250px; height: 250px; left: -70px; top: -50px;
  background: radial-gradient(circle, rgba(236, 101, 25, .20), transparent 70%);
  animation: fnc-drift1 21s ease-in-out infinite alternate;
}
.fnc-aurora i:nth-child(2) {
  width: 310px; height: 310px; right: -100px; top: 28%;
  background: radial-gradient(circle, rgba(109, 133, 168, .20), transparent 70%);
  animation: fnc-drift2 27s ease-in-out infinite alternate;
}
.fnc-aurora i:nth-child(3) {
  width: 240px; height: 240px; left: 18%; bottom: -80px;
  background: radial-gradient(circle, rgba(203, 176, 132, .38), transparent 70%);
  animation: fnc-drift3 18s ease-in-out infinite alternate;
}
@keyframes fnc-drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(46px, 60px) scale(1.22); } }
@keyframes fnc-drift2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-54px, -46px) scale(.92); } }
@keyframes fnc-drift3 { from { transform: translate(0, 0) scale(1); } to { transform: translate(38px, -52px) scale(1.16); } }
.fnc-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--fnc-x, 50%) var(--fnc-y, 30%), rgba(236, 101, 25, .07), transparent 68%);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
  z-index: 2;
}
.fnc-panel:hover .fnc-body::before { opacity: 1; }
.fnc-body::after {
  content: "";
  position: absolute;
  inset: -20%;
  background-image: var(--fnc-noise);
  opacity: .035;
  animation: fnc-grain 5s steps(5) infinite;
  pointer-events: none;
  z-index: 2;
}

.fnc-log {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  scrollbar-width: thin;
  scrollbar-color: var(--p-3) transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px);
  mask-image: linear-gradient(180deg, transparent 0, #000 18px);
}
.fnc-log::-webkit-scrollbar { width: 4px; }
.fnc-log::-webkit-scrollbar-thumb { background: var(--p-3); border-radius: var(--r-pill); }
.fnc-log::-webkit-scrollbar-thumb:hover { background: var(--coral); }

.fnc-turn { position: relative; }

.fnc-kick {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 10px;
  font-family: var(--anton);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fnc-kick b { color: var(--coral); font-weight: 400; }
.fnc-kick::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

/* ---------- opening sections, set apart from the conversation ---------- */

.fnc-intro {
  position: relative;
  padding: 13px 15px;
  border-radius: var(--r-card);
  animation: fnc-word .7s var(--ease) backwards;
}
.fnc-intro-k {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  font-family: var(--glacial);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--coral);
}
.fnc-intro-k::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

/* the briefing card: ink-tinted, italic, quieter */
.fnc-brief {
  background: rgba(14, 26, 43, .045);
  box-shadow: inset 0 0 0 1px rgba(14, 26, 43, .06);
}
.fnc-brief p {
  margin: 0;
  font-style: italic;
  font-weight: 400;
  font-size: 12.4px;
  line-height: 1.55;
  color: var(--ink-2);
}
/* the welcome card: frosted, the voice of the concierge */
.fnc-welcome {
  background: rgba(255, 255, 255, .58);
  box-shadow: inset 0 0 0 1px rgba(14, 26, 43, .07), 0 2px 12px rgba(14, 26, 43, .04);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.fnc-welcome p {
  margin: 0 0 8px;
  font-size: 13.1px;
  line-height: 1.6;
  color: var(--ink-1);
}
.fnc-welcome p:last-child { margin-bottom: 0; }
.fnc-welcome em { font-style: italic; color: var(--coral); }
.fnc-welcome strong { font-weight: 600; color: var(--ink); }

/* ---------- concierge voice ---------- */

.fnc-say {
  font-size: 13.8px;
  font-weight: 400;
  line-height: 1.68;
  color: var(--ink-1);
  letter-spacing: -.002em;
}
.fnc-say p { margin: 0 0 11px; }
.fnc-say p:last-child { margin-bottom: 0; }
.fnc-say strong { font-weight: 600; color: var(--ink); }
.fnc-say em { font-style: italic; color: var(--ink-2); }
.fnc-say > p:first-of-type { font-size: 14.2px; }
.fnc-say a { color: var(--coral); text-decoration: none; box-shadow: inset 0 -1px 0 rgba(236, 101, 25, .38); transition: box-shadow .3s ease; }
.fnc-say a:hover { box-shadow: inset 0 -2px 0 var(--coral); }

/* word-level reveal */
.fnc-w { display: inline-block; opacity: 0; animation: fnc-word .58s var(--ease) both; }

/* spec sheet on a soft frosted card */
.fnc-say ul {
  margin: 13px 0;
  padding: 3px 15px;
  list-style: none;
  background: rgba(255, 255, 255, .5);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px rgba(14, 26, 43, .06);
}
.fnc-say ul:last-child { margin-bottom: 0; }
.fnc-say li {
  position: relative;
  padding: 9px 0 9px 20px;
  border-bottom: 1px solid rgba(14, 26, 43, .07);
  font-size: 12.6px;
  line-height: 1.55;
  color: var(--ink-2);
}
.fnc-say li:last-child { border-bottom: 0; }
.fnc-say li::before {
  content: "";
  position: absolute;
  left: 0; top: 17px;
  width: 9px; height: 1px;
  border-radius: var(--r-pill);
  background: var(--coral);
}
.fnc-say li strong { color: var(--ink); font-weight: 600; }

/* case-study tag */
.fnc-say .fnc-k {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px 4px;
  background: var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--glacial);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--p-0);
}

/* ---------- visitor turn ---------- */

.fnc-turn-u { display: flex; flex-direction: column; align-items: flex-end; }
.fnc-turn-u .fnc-kick { flex-direction: row-reverse; color: var(--ink-3); }
.fnc-turn-u .fnc-kick::after { display: none; }
.fnc-turn-u .fnc-kick::before { content: ""; flex: 1; width: 38px; height: 1px; background: var(--hair); }
.fnc-ask {
  position: relative;
  max-width: 88%;
  padding: 12px 17px;
  background: var(--ink);
  border-radius: var(--r-card);
  box-shadow: 0 10px 26px rgba(14, 26, 43, .16);
  font-size: 13.2px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: #f1ece2;
  text-align: right;
}
.fnc-ask::after {
  content: "";
  position: absolute;
  right: 0; top: 13px; bottom: 13px;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--coral);
}

/* ---------- consultation card ---------- */

#fnc-root .fnc-cta { text-decoration: none; color: var(--p-0); }
.fnc-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 15px 17px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--ink-1), var(--ink));
  border-radius: var(--r-card);
  box-shadow: 0 14px 34px rgba(14, 26, 43, .22);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.fnc-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(14, 26, 43, .3); }
.fnc-cta::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 128, 56, .22), transparent);
  animation: fnc-sweep 4.6s var(--ease-io) infinite;
}
@keyframes fnc-sweep {
  0%   { left: -60%; }
  55%  { left: 125%; }
  100% { left: 125%; }
}
.fnc-cta-k {
  display: block;
  margin-bottom: 4px;
  font-family: var(--glacial);
  font-size: 8px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--coral-2);
}
.fnc-cta-t {
  display: block;
  font-family: var(--anton);
  font-size: 16px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--p-0);
}
.fnc-cta-a {
  position: relative;
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 128, 56, .45);
  color: var(--coral-2);
  transition: background .45s var(--ease), color .45s var(--ease), transform .55s var(--ease);
}
.fnc-cta:hover .fnc-cta-a { background: var(--coral); border-color: var(--coral); color: var(--p-0); transform: translateX(3px); }
.fnc-cta-a svg { width: 13px; height: 13px; }

/* ---------- suggestions, rounded frosted boxes ---------- */

.fnc-sug { margin-top: 4px; }
.fnc-sug-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  font-family: var(--glacial);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fnc-sug-head::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

.fnc-sug-row {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr 16px;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin-top: 6px;
  padding: 10px 13px;
  overflow: hidden;
  text-align: left;
  border-radius: var(--r-box);
  background: rgba(255, 255, 255, .52);
  box-shadow: inset 0 0 0 1px rgba(14, 26, 43, .07), 0 1px 2px rgba(14, 26, 43, .03);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: fnc-word .6s var(--ease) backwards;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease);
}
/* coral wash sweeping in from the left */
.fnc-sug-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, var(--coral-soft), rgba(236, 101, 25, .04));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease);
  z-index: 0;
}
/* keep the row contents above the wash without relying on stacking luck */
.fnc-sug-n, .fnc-sug-t, .fnc-sug-a { position: relative; z-index: 1; }
.fnc-sug-row:hover {
  /* a small lift and swell, the pop reads without shouting */
  transform: translateY(-2px) scale(1.014);
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 0 1px rgba(236, 101, 25, .34), 0 10px 24px rgba(14, 26, 43, .10);
}
.fnc-sug-row:active { transform: translateY(-1px) scale(1.004); }
.fnc-sug-row:hover::before { transform: scaleX(1); }
.fnc-sug-n {
  font-family: var(--anton);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--p-3);
  transition: color .35s ease;
}
.fnc-sug-t {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.38;
  color: var(--ink-2);
  transition: color .35s ease;
}
.fnc-sug-a { opacity: 0; color: var(--coral); font-size: 12px; transform: translateX(-4px); transition: opacity .35s ease, transform .5s var(--ease); }
.fnc-sug-row:hover .fnc-sug-n { color: var(--coral); }
.fnc-sug-row:hover .fnc-sug-t { color: var(--ink); }
.fnc-sug-row:hover .fnc-sug-a { opacity: 1; transform: translateX(1px) scale(1.18); }

/* ---------- thinking ---------- */

.fnc-think { display: flex; align-items: center; gap: 11px; }
.fnc-think-r { position: relative; width: 108px; height: 2px; border-radius: var(--r-pill); background: var(--p-2); overflow: hidden; }
.fnc-think-r i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 36%;
  border-radius: var(--r-pill);
  background: var(--coral);
  animation: fnc-scan 1.1s var(--ease-io) infinite;
}
@keyframes fnc-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
.fnc-think-t { font-family: var(--mont); font-style: italic; font-size: 11.5px; color: var(--ink-3); }

/* ============================================================
   FOOTER · composer and a live client ticker
   ============================================================ */

.fnc-foot { flex: none; position: relative; background: var(--p-1); border-top: 1px solid var(--hair); }
.fnc-form { display: flex; align-items: center; gap: 11px; padding: 12px 18px 10px; }
.fnc-prompt { font-family: var(--anton); font-size: 13px; color: var(--coral); letter-spacing: .05em; }
.fnc-input {
  flex: 1;
  min-width: 0;
  padding: 3px 0;
  border: 0;
  outline: 0;
  background: 0 0;
  color: var(--ink);
  font-family: var(--mont);
  font-size: 13.4px;
  font-weight: 500;
}
.fnc-input::placeholder { color: var(--ink-3); font-weight: 400; font-style: italic; }
.fnc-send {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--p-2);
  color: var(--ink-3);
  transition: background .35s ease, color .35s ease, transform .5s var(--ease);
}
.fnc-send svg { width: 13px; height: 13px; }
.fnc-send:not(:disabled) { background: var(--ink); color: var(--p-0); }
.fnc-send:not(:disabled):hover { background: var(--coral); transform: translateX(2px) scale(1.06); }
.fnc-send:disabled { cursor: default; }

.fnc-underline { height: 1px; margin: 0 18px; border-radius: var(--r-pill); background: var(--hair); position: relative; }
.fnc-underline::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--r-pill);
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease);
}
.fnc-form:focus-within + .fnc-underline::after { transform: scaleX(1); }

.fnc-ticker {
  position: relative;
  display: flex;
  align-items: center;
  height: 26px;
  overflow: hidden;
  border-top: 1px solid var(--hair);
  margin-top: 9px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.fnc-ticker-track { display: flex; gap: 26px; white-space: nowrap; animation: fnc-marquee 34s linear infinite; padding-left: 26px; }
.fnc-ticker-track span {
  font-family: var(--glacial);
  font-size: 8px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fnc-ticker-track span::after { content: "·"; margin-left: 26px; color: var(--coral); }
@keyframes fnc-marquee { to { transform: translateX(-50%); } }

/* ============================================================
   MOBILE
   ============================================================ */

@media (width <= 640px) {
  .fnc-panel { inset: 0; width: 100%; height: 100%; border-radius: 0; }
  .fnc-head { padding: 16px 20px 0; }
  .fnc-word h2 { font-size: 34px; }
  .fnc-log { padding: 20px 20px 26px; }
  .fnc-form { padding: 13px 20px 10px; }
  .fnc-underline { margin: 0 20px; }
  .fnc-nudge { display: none; }
  #fnc-root[data-open="true"] .fnc-launcher { opacity: 0; pointer-events: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  #fnc-root *,
  #fnc-root *::before,
  #fnc-root *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  .fnc-ticker-track { animation: none; }
}