/* ==========================================================================
   Cue by Fountain — Base + shared components
   Every section partial in /sections is built on these primitives.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-m);
  line-height: var(--lh-body);
  color: var(--neutral-900);
  background: var(--neutral-white);
}

img, svg, video { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---- Layout scaffolding -------------------------------------------------- */

/* The Figma frame is 1440 wide with 80px side margins around a 1280 container. */
.fx-section {
  width: 100%;
  padding: var(--margin-tb) var(--margin-lr);
  background: var(--neutral-white);
}
.fx-section--tight { padding-block: var(--section-pad-small); }
.fx-section--loose { padding-block: var(--section-pad); }
.fx-section--muted { background: var(--neutral-50); }
.fx-section--wash  { background: linear-gradient(180deg, #ffffff 0%, #f4f4ff 100%); }
.fx-section--dark  { background: var(--neutral-900); color: var(--neutral-white); }

.fx-container {
  width: 100%;
  max-width: var(--container-large);
  margin-inline: auto;
}

.fx-stack   { display: flex; flex-direction: column; }
.fx-row     { display: flex; flex-direction: row; }
.fx-center  { align-items: center; }
.fx-between { justify-content: space-between; }

.fx-gap-2  { gap: var(--space-2); }
.fx-gap-4  { gap: var(--space-4); }
.fx-gap-6  { gap: var(--space-6); }
.fx-gap-8  { gap: var(--space-8); }
.fx-gap-10 { gap: var(--space-10); }
.fx-gap-12 { gap: var(--space-12); }
.fx-gap-16 { gap: var(--space-16); }
.fx-gap-20 { gap: var(--space-20); }

/* ---- Typography ---------------------------------------------------------- */

.fx-h1 { font-size: var(--h1); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: 700; }
.fx-h2 { font-size: var(--h2); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: 700; }
.fx-h3 { font-size: var(--h3); line-height: var(--lh-tight);   letter-spacing: var(--track-tight);   font-weight: 700; }
.fx-h4 { font-size: var(--h4); line-height: var(--lh-tight);   letter-spacing: var(--track-tight);   font-weight: 700; }
.fx-h5 { font-size: var(--h5); line-height: var(--lh-snug);    font-weight: 700; }
.fx-h6 { font-size: var(--h6); line-height: var(--lh-body);    font-weight: 700; }

.fx-p-xl { font-size: var(--text-xl); line-height: var(--lh-body); font-weight: 400; }
.fx-p-l  { font-size: var(--text-l);  line-height: var(--lh-body); font-weight: 400; }
.fx-p-m  { font-size: var(--text-m);  line-height: var(--lh-body); font-weight: 400; }
.fx-p-s  { font-size: var(--text-s);  line-height: var(--lh-snug); font-weight: 400; }
.fx-p-m--medium { font-weight: 500; }
.fx-p-s--medium { font-weight: 500; }

.fx-muted   { color: var(--neutral-600); }
.fx-subtle  { color: var(--neutral-400); }
.fx-onbrand { color: var(--neutral-white); }

/* Eyebrow — the small brand-coloured kicker above nearly every headline */
.fx-eyebrow {
  font-size: var(--text-l);
  line-height: var(--lh-body);
  color: var(--brand-600);
  font-weight: 400;
}
.fx-eyebrow--bold { font-weight: 700; }

/* Section header block: eyebrow + headline + support copy */
.fx-header { display: flex; flex-direction: column; gap: var(--space-6); }
.fx-header--center { align-items: center; text-align: center; }
.fx-header--center .fx-header__body { max-width: var(--max-width-large); }

/* ---- Buttons ------------------------------------------------------------- */

.fx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  /* 15/23 + the 1px border = Figma's 56px tall, 24px side-padding button.
     Figma centres its stroke on the box edge; CSS puts it outside the padding. */
  padding: 15px 23px;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: var(--text-l);
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
}
.fx-btn__icon { width: 16px; height: 16px; flex: none; }
.fx-btn__icon svg { width: 100%; height: 100%; display: block; }

.fx-btn--primary   { background: var(--gradient-brand); color: var(--neutral-white); }
.fx-btn--secondary { background: var(--neutral-white); color: var(--neutral-900); border-color: var(--neutral-300); }
.fx-btn--ghost     { background: transparent; color: var(--neutral-900); padding-inline: 0; }
.fx-btn--inverse   { background: var(--neutral-white); color: var(--neutral-900); }
.fx-btn--sm { padding: var(--space-3) var(--space-5); font-size: var(--text-m); }

/* Text link with trailing arrow — "Read the story →" */
.fx-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-m);
  font-weight: 500;
}
.fx-link--brand { color: var(--brand-600); }

/* ---- Cards --------------------------------------------------------------- */

.fx-card {
  background: var(--neutral-white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
}
.fx-card--flush { padding: 0; overflow: hidden; }
.fx-card--brand { border-color: var(--brand-600); }
.fx-card--muted { background: var(--neutral-50); border-color: transparent; }

.fx-grid { display: grid; gap: var(--space-8); }
.fx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- Image slots --------------------------------------------------------- */
/* Composite decorative artwork is one image slot at its exact Figma geometry.
   Until the real export is dropped into /assets, the slot self-labels. */

.fx-img {
  display: block;
  border-radius: var(--radius-2xl);
  object-fit: cover;
  background: var(--neutral-100);
}

.fx-slot {
  position: relative;
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(180deg, #177dd5 13.5%, #483dc4 62%, #111f63 93.8%);
  overflow: hidden;
  flex: none;
}
.fx-slot--neutral { background: var(--neutral-100); }
.fx-slot--photo   { background: linear-gradient(160deg, #3a4757 0%, #1c2430 100%); }
.fx-slot::after {
  content: attr(data-slot);
  position: absolute;
  inset: auto 12px 12px 12px;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fx-slot--neutral::after { color: rgba(15, 23, 42, 0.45); }
.fx-slot img { width: 100%; height: 100%; object-fit: cover; }
.fx-slot:has(img)::after { content: none; }

/* ---- The Cue mark -------------------------------------------------------- */
/* The orb is a glass sphere on transparent alpha, not a flat circle. It is
   never given a background, never boxed, never given a border-radius of its
   own, and never sits flush on a surface — it carries --shadow-bloom, the
   halo the brand system defines for it. Use .fx-orb and let it breathe.

   <span class="fx-orb fx-orb--md"><img src="assets/brand/cue-orb.png" alt="Cue"></span>  */

.fx-orb {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.fx-orb img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* The bloom. Sized off the mark, sitting behind it, never clipped by a parent
   with overflow:hidden — give the parent room rather than shrinking this. */
.fx-orb::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(170, 205, 255, 0.75) 0%, rgba(170, 205, 255, 0) 70%);
  pointer-events: none;
}

.fx-orb--xs { width: 20px;  height: 20px; }
.fx-orb--sm { width: 32px;  height: 32px; }
.fx-orb--md { width: 64px;  height: 64px; }
.fx-orb--lg { width: 120px; height: 120px; }
.fx-orb--xl { width: 240px; height: 240px; }

/* On a dark or already-glowing surface the halo doubles up — turn it off. */
.fx-orb--flat::before { content: none; }

/* In the prompt/CTA button the mark replaces the icon slot. */
.fx-btn .fx-orb { margin-left: -4px; }

/* ---- Misc ---------------------------------------------------------------- */

.fx-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--brand-100);
  color: var(--brand-600);
  font-size: var(--text-s);
  font-weight: 500;
}
.fx-divider { height: 1px; background: var(--neutral-200); border: 0; margin: 0; }

/* Knockout — several client marks exist only in their positive form (Alto is
   tan, gopuff navy, sweetgreen near-black) but Figma renders them white where
   they sit on a dark card or the blue stat band. This is that whitening, done
   in CSS rather than shipping a second copy of every logo. */
.fx-knockout { filter: brightness(0) invert(1); }

/* Once a slot holds real artwork the placeholder plate must go — otherwise a
   white knockout logo sits on a white box, and a cut-out render gets a grey
   card behind it. The label is already suppressed by :has(img) above; this
   drops the fill and the radius that only ever belonged to the placeholder. */
.fx-slot:has(img), .fx-slot:has(video) { background: none; }

/* A photograph fills its slot; a logo, badge or wordmark is letterboxed inside
   it. Cropping a mark is always wrong, so these directories opt out of cover. */
.fx-slot img[src*="/logos/"],
.fx-slot img[src*="/clients/"],
.fx-slot img[src*="/press/"],
.fx-slot img[src*="/awards/"],
.fx-slot img[src*="/badges/"],
.fx-slot img[src*="/footer/"],
.fx-slot img[src*="/analyst/"],
.fx-slot img[src*="/suite/"],
.fx-slot img[src*="/compare/"] { object-fit: contain; }