/* /features and /features/<slug> (modules/features). Every rule is scoped
   under .ft so nothing reaches the rest of the site. The look is the
   Business page's, token for token (public/business-v2.css .bz2: white
   ground, ink #0a0a0a, mute #5f5f5c, panels #f7f7f5, hairlines at 7 and
   12 percent black, Inter 500 headings, the 1280 rail with dashed side
   lines, labels with a blue dot); the structure is tryprofound.com's
   feature page (audits/profound-teardown-2026-10-07/TEARDOWN.md).
   v3 (2026-10-08): the template foundation, see the block at the end and
   /Users/kedembaraness/Developer/linkme/v3/PLAN.md section 0.1. Colour is
   rationed: ink buttons, one blue (#2f6fe8) for focus, links and status,
   pink only for alerts and counts. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-wght-normal-v1.woff2")
    format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
/* Arial sized to Inter's metrics (the same pair as landing-globals.css,
   which /features does not load), so headings wrap the same before and
   after Inter arrives and nothing below them jumps */
@font-face {
  font-family: "Inter Fallback";
  font-weight: 100 500;
  src: local("Arial"), local("ArialMT");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Fallback";
  font-weight: 600 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 103.8%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.ft {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --ink2: #2b2b2a;
  --mute: #5f5f5c;
  --mute2: #6b6b68;
  --mute3: #8a8a87;
  --panel: #f7f7f5;
  --panel2: #f2f2f0;
  --panel3: #e8e8e6;
  --line: rgba(0, 0, 0, 0.07);
  --line2: rgba(0, 0, 0, 0.12);
  --line3: rgba(0, 0, 0, 0.3);
  --blue: #2f6fe8;
  --pink: #ec008c;
  /* the rail: 1280 wide, 48px inside it, so content is 1184 at 1440 */
  --wrap: 1184px;
  --gut: 48px;
  --cam: cubic-bezier(0.65, 0, 0.35, 1);
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family:
    "Inter",
    "Inter Fallback",
    -apple-system,
    "Segoe UI",
    sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* the app's global sheets: a profile accordion rule and user-select:none */
.ft :where(p, h1, h2, h3, li, blockquote, span, summary, figcaption) {
  user-select: text;
}
.ft :where(img, svg) {
  display: revert;
  max-width: revert;
}
.ft a {
  color: inherit;
  text-decoration: none;
}
.ft main {
  display: block;
  outline: none;
}

.ft-wrap {
  position: relative;
  width: 100%;
  max-width: calc(var(--wrap) + var(--gut) * 2);
  margin: 0 auto;
  padding: 0 var(--gut);
  box-sizing: border-box;
}

/* ── type ─────────────────────────────────────────────────────────── */
.ft-h1 {
  margin: 0;
  font-size: 56px;
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.ft-h2 {
  margin: 0;
  font-size: 48px;
  line-height: 56px;
  font-weight: 500;
  letter-spacing: -0.0225em;
  text-wrap: balance;
}
/* a status chip sits inline after the headline */
.ft-h2 .h2-tag {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 12px;
  position: relative;
  top: -0.12em;
}
.ft-h2 .h2-tag > * {
  margin-left: 0;
}
.ft-h3 {
  display: block;
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.ft-lead {
  margin: 0;
  max-width: 600px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--mute);
  text-wrap: pretty;
}
.ft-body {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--mute);
  text-wrap: pretty;
}
.ft-small {
  display: block;
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mute);
}
.ft-eyeicon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--panel2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ── buttons ──────────────────────────────────────────────────────── */
.ft-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.ft-btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  transition:
    background 0.2s,
    transform 0.2s;
}
.ft-btn:active {
  transform: scale(0.98);
}
.ft-btn--dark {
  background: var(--ink);
  color: #fff !important;
}
.ft-btn--dark:hover {
  background: var(--ink2);
}
.ft-btn--soft {
  background: var(--panel2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ft-btn--soft:hover {
  background: #eaeae7;
}
.ft-textlink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.ft-textlink span {
  transition: transform 0.2s;
}
.ft-textlink:hover span {
  transform: translateX(3px);
}
.ft-textlink:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
  border-radius: 6px;
}
.ft-ctas {
  align-items: center;
}
.ft-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 500;
}

/* ── feature sub nav (the strip under the header) ──────────────────── */
/* Site review 2026-10-09: the strip no longer sticks (it stacked under
   the site header and shrank to a hairline on scroll) and is gone on
   phones, where the header menu carries the products. */
.ft-subnav {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ft-subnav-in {
  display: flex;
  gap: 4px;
  max-width: calc(var(--wrap) + var(--gut) * 2);
  margin: 0 auto;
  padding: 0 var(--gut);
  overflow-x: auto;
  scrollbar-width: none;
  box-sizing: border-box;
}
.ft-subnav-in::-webkit-scrollbar {
  display: none;
}
.ft-subnav a {
  flex: none;
  padding: 14px 10px;
  font-size: 13.5px;
  color: var(--mute);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s;
}
.ft-subnav a:hover {
  color: var(--ink);
}
.ft-subnav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
  border-bottom-color: var(--ink);
}
/* on the colours (2026-10-29): a glass strip with white links */
.ft:has(.sk-vivid) .ft-subnav {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}
.ft:has(.sk-vivid) .ft-subnav a,
.ft:has(.sk-vivid) .ft-subnav .ft-subnav-all {
  color: rgba(255, 255, 255, 0.86);
}
.ft:has(.sk-vivid) .ft-subnav a:hover,
.ft:has(.sk-vivid) .ft-subnav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: #fff;
}
.ft:has(.sk-vivid) .ft-subnav .ft-subnav-all::after {
  background: rgba(255, 255, 255, 0.3);
}
.ft-subnav .ft-subnav-all {
  margin-right: 8px;
  padding-right: 16px;
  color: var(--ink);
  font-weight: 500;
  position: relative;
}
.ft-subnav .ft-subnav-all::after {
  content: "";
  position: absolute;
  right: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--line2);
}

/* ── the top: the Business hero ───────────────────────────────────── */
/* the aurora (SiteKit Aurora) sits behind; the copy is centred and short
   so the product window and the phone are in the first screen */
.ft-top {
  position: relative;
  padding: 52px 0 8px;
  /* clip sideways only: the aurora reaches up behind the sub nav and the
     header (SiteKit useReachTop) */
  overflow-x: clip;
  overflow-y: visible;
}
.ft-top > .ft-wrap {
  z-index: 1;
}
.ft-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ft-hero .ft-h1 {
  max-width: 1120px;
  margin-bottom: 16px;
  font-size: 52px;
}
.ft-hero .ft-lead {
  max-width: 660px;
  margin: 0 auto;
  font-size: 18px;
  color: #4a4a48;
}
.ft-hero .ft-ctas {
  justify-content: center;
  margin-top: 26px;
}
.ft-hero .ft-btn--soft {
  background: rgba(255, 255, 255, 0.7);
}

/* ── pillars ──────────────────────────────────────────────────────── */
.ft-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 36px;
  border-top: 1px solid var(--line);
}
.ft-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 24px 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ft-pillar + .ft-pillar {
  padding-left: 22px;
}
.ft-pt {
  font-size: 16px;
  font-weight: 500;
  color: var(--mute);
  transition: color 0.3s;
}
.ft-pb {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--mute);
  transition: color 0.3s;
}
.ft-pillar[aria-selected="true"] .ft-pt {
  color: var(--ink);
}
.ft-pillar[aria-selected="true"] .ft-pb {
  color: var(--mute);
}
.ft-pillar:hover .ft-pt {
  color: var(--ink);
}
/* the active pillar's timer: a line that fills along the top edge */
.ft-pbar {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.ft-pillar + .ft-pillar .ft-pbar {
  left: 22px;
}
.ft-pillar[aria-selected="true"] .ft-pbar {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: no-preference) {
  .ft-still[data-mode="play"] .ft-pillar[aria-selected="true"] .ft-pbar {
    animation: ft-fill var(--step-ms, 6400ms) linear both;
  }
}
/* a step the scene has done keeps its number lit */
.ft-pillar[data-done] .ft-pt {
  color: var(--ink2);
}
@keyframes ft-fill {
  from {
    transform: scaleX(0);
  }
}
.ft-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

/* ── product pictures: a rendered screen, cropped in percent ─────── */
.ft-pic {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar);
  overflow: hidden;
}
.ft-pic--tall {
  width: auto;
  height: 100%;
}
.ft-pic img {
  position: absolute;
  display: block;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: auto;
  max-width: none;
  user-select: none;
  transition:
    left 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    top 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the scene's states: every render stacked, one showing */
.ft-pic--layers img {
  opacity: 0;
  /* a cut, never a dissolve: no frame holds two half screens */
  transition:
    opacity 0.14s ease,
    left 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    top 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.ft-pic--layers img[data-on] {
  opacity: 1;
}

/* ── the showcase (hero product picture) ──────────────────────────── */
.ft-show {
  position: relative;
  margin: 44px 0 0;
  padding-right: 10%;
}
.ft-show--solo {
  padding-right: 0;
}
/* the glass frame /business puts round its product window */
.ft-window {
  position: relative;
  padding: 9px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 40px 90px -40px rgba(40, 40, 90, 0.45),
    0 12px 30px -16px rgba(0, 0, 0, 0.14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.ft-window > .ft-pic {
  border-radius: 18px;
  background: #fafafa;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.ft-ring {
  position: absolute;
  z-index: 2;
  left: var(--rl);
  top: var(--rt);
  width: var(--rw);
  height: var(--rh);
  border-radius: 14px;
  box-shadow:
    0 0 0 2px var(--blue),
    0 0 0 8px rgba(47, 111, 232, 0.14),
    0 0 0 4000px rgba(250, 250, 250, 0.32);
  transition:
    opacity 0.14s ease,
    left 1.2s var(--cam),
    top 1.2s var(--cam),
    width 1.2s var(--cam),
    height 1.2s var(--cam);
}
.ft-show:not([data-started]) .ft-ring,
.ft-show[data-mode="rest"] .ft-ring {
  opacity: 0;
}
/* the scene's cursor and its click */
.ft-cursor {
  position: absolute;
  z-index: 3;
  left: var(--cx);
  top: var(--cy);
  margin: -3px 0 0 -3px;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.28));
  transition:
    opacity 0.8s ease,
    left 1.7s cubic-bezier(0.65, 0, 0.35, 1),
    top 1.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.ft-show[data-mode="rest"] .ft-cursor,
.ft-show[data-mode="held"] .ft-cursor {
  opacity: 0;
}
.ft-tap {
  position: absolute;
  z-index: 3;
  left: var(--cx);
  top: var(--cy);
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 99px;
  border: 2px solid var(--blue);
  pointer-events: none;
  animation: ft-tap 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ft-tap {
  from {
    transform: scale(0.3);
    opacity: 1;
  }
  to {
    transform: scale(1.4);
    opacity: 0;
  }
}
/* the phone hangs off the window's right edge, over as little of the
   screen as the width allows */
.ft-phone {
  position: absolute;
  z-index: 4;
  right: -19%;
  top: 56px;
  width: 22%;
  filter: drop-shadow(0 30px 40px rgba(20, 20, 60, 0.22));
}
@media (max-width: 1279px) {
  .ft-phone {
    right: -8%;
  }
}
.ft-caption {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--mute);
}

/* ── sections ─────────────────────────────────────────────────────── */
.ft-sec {
  padding: 112px 0 0;
}
.ft-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}
.ft-head .ft-h2 {
  max-width: 720px;
}

.ft-logos {
  padding: 96px 0 0;
}
.ft-logos-t {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--mute);
  text-align: center;
}
.ft-logos-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.ft-logos-row li {
  display: grid;
  place-items: center;
  height: 96px;
  border-left: 1px solid var(--line);
}
.ft-logos-row li:first-child {
  border-left: 0;
}
/* real customer logos, always in their own colour */
.ft-logos-row img {
  max-width: 72%;
  object-fit: contain;
}
/* one-ink black marks turn white on the dark page; they have no colour
   to lose (the /business .tb-mono rule) */
.ft[data-theme="dark"] .ft-logos-row .ft-logo-mono {
  filter: invert(1);
}
/* the lead over the colour hero keeps the hero's white (SiteKit.tsx
   Aurora), over the dark twin of its grey */
.ft[data-theme="dark"] :has(> .sk-vivid) .ft-hero .ft-lead {
  color: rgba(255, 255, 255, 0.86);
}
/* a mark people do not know on sight prints its name beside it */
.ft-logos-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 86%;
}
.ft-logos-row .ft-logos-lockup img {
  flex: none;
  width: auto;
  height: 34px;
  max-width: none;
}
.ft-logos-lockup > span {
  font-size: 13px;
  line-height: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink2);
  text-align: left;
  text-wrap: balance;
}
@media (max-width: 1023px) {
  .ft-logos-lockup {
    gap: 6px;
    max-width: 90%;
  }
  .ft-logos-row .ft-logos-lockup img {
    height: 24px;
  }
  .ft-logos-lockup > span {
    font-size: 11px;
    line-height: 13px;
  }
}

.ft-spot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: 28px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.ft-spot-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px;
}
.ft-spot-copy .ft-h2 {
  margin-bottom: 18px;
}
.ft-spot-media {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 560px;
  padding-top: 48px;
  box-sizing: border-box;
  background: radial-gradient(
    60% 60% at 50% 40%,
    rgba(236, 0, 140, 0.08),
    transparent 70%
  );
}
/* a screen (not a phone) in the spotlight: it rides in from the card's
   inner corner and runs off its right and bottom edges */
.ft-spot-media--wide {
  display: block;
  height: auto;
  padding: 48px 0 0 48px;
}
.ft-spot-media--wide .ft-pic {
  border-radius: 14px 0 0 0;
  background: #fafafa;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 24px 60px -24px rgba(0, 0, 0, 0.22);
}

.ft-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}
.ft-cell {
  padding: 22px 22px 28px;
  background: var(--bg);
}
.ft-cell-media {
  position: relative;
  aspect-ratio: 1.45;
  margin-bottom: 22px;
  border-radius: 16px;
  background: var(--panel);
  overflow: hidden;
}
.ft-cell-shot {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  bottom: 0;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 12px 30px -16px rgba(0, 0, 0, 0.25);
}
.ft-cell-media--tall .ft-cell-shot {
  left: 50%;
  right: auto;
  width: auto;
  height: calc(100% - 18px);
  transform: translateX(-50%);
  box-shadow: none;
  border-radius: 0;
}

.ft-how {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: start;
}
.ft-how-copy {
  position: sticky;
  top: 96px;
}
.ft-how-copy .ft-h2 {
  margin-bottom: 16px;
}
.ft-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.ft-steps li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.ft-steps .ft-num {
  padding-top: 2px;
}

.ft-quote {
  margin: 0;
  padding: 64px;
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.ft-quote-logo {
  height: 40px;
  width: auto;
  margin-bottom: 28px;
}
.ft-quote blockquote {
  margin: 0;
  max-width: 920px;
  font-size: 30px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.ft-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 30px;
  font-size: 14px;
  color: var(--mute);
}
.ft-quote figcaption b {
  color: var(--ink);
  font-weight: 500;
}

.ft-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
}
.ft-faq-list {
  border-top: 1px solid var(--line);
}
.ft-faq details {
  border-bottom: 1px solid var(--line);
}
.ft-faq summary {
  position: relative;
  display: block;
  padding: 22px 40px 22px 0;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.ft-faq summary::-webkit-details-marker {
  display: none;
}
.ft-plus {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
}
.ft-plus::before,
.ft-plus::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s;
}
.ft-plus::after {
  transform: rotate(90deg);
}
.ft-faq details[open] .ft-plus::after {
  transform: rotate(0deg);
}
.ft-faq details p {
  margin: -6px 0 24px;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mute);
}

.ft-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ft-rel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition:
    background 0.2s,
    box-shadow 0.2s;
}
.ft-rel .ft-eyeicon {
  margin-bottom: 18px;
}
.ft-rel:hover {
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line2);
}
.ft-rel-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 500;
}

.ft-cta {
  position: relative;
  margin: 112px 0 96px;
  padding: 96px 32px;
  border-radius: 32px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(
      45% 70% at 15% 20%,
      rgba(120, 160, 255, 0.22),
      transparent 70%
    ),
    radial-gradient(
      40% 70% at 85% 25%,
      rgba(236, 0, 140, 0.16),
      transparent 70%
    ),
    radial-gradient(
      50% 60% at 50% 100%,
      rgba(255, 214, 130, 0.2),
      transparent 70%
    ),
    var(--panel);
}
.ft-cta .ft-h2 {
  max-width: 760px;
  margin: 0 auto 16px;
}
.ft-cta .ft-ctas {
  justify-content: center;
}

/* ── tablets and phones ───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .ft-h1 {
    font-size: 48px;
  }
  .ft-h2 {
    font-size: 36px;
    line-height: 40px;
  }
  .ft-logos-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ft-logos-row li:nth-child(5) {
    border-left: 0;
  }
  .ft-logos-row li:nth-child(n + 5) {
    border-top: 1px solid var(--line);
  }
  .ft-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ft-spot-copy,
  .ft-quote {
    padding: 44px;
  }
}

@media (max-width: 767px) {
  .ft {
    --gut: 16px;
  }
  /* the closing headline scales with the phone so its last two words
     ("tomorrow's customers") share a line instead of leaving one alone */
  .ft .ft-cta h2 {
    font-size: min(38px, 8.6vw);
  }
  /* Link AI's hero keeps "Approve every change." on one line, so its
     size follows the screen and the line stays inside the gutters */
  .ft[data-feature="link-ai"] .ft-hero .ft-h1 {
    font-size: min(36px, calc((100vw - 32px) / 10.6));
  }
  /* the hero camera: the narrow crop of the screen */
  .ft-pic {
    aspect-ratio: var(--arn);
  }
  .ft-pic img {
    left: var(--ln);
    top: var(--tn);
    width: var(--wn);
  }
  .ft-ring {
    left: var(--rln);
    top: var(--rtn);
    width: var(--rwn);
    height: var(--rhn);
  }
  .ft-cursor,
  .ft-tap {
    left: var(--cxn);
    top: var(--cyn);
  }
  /* the phone stays in the first screen: smaller, hanging below the
     window's corner, the caption wraps beside it */
  .ft-phone {
    top: auto;
    right: 6px;
    bottom: 0;
    width: 27%;
    transform: translateY(56%);
  }
  .ft-show:not(.ft-show--solo) .ft-caption {
    min-height: 92px;
    padding-right: 32%;
  }
  .ft-subnav {
    display: none;
  }
  .ft-top {
    padding: 28px 0 8px;
  }
  .ft-h1 {
    font-size: 38px;
    line-height: 1.06;
  }
  .ft-hero .ft-h1 {
    font-size: 34px;
    margin-bottom: 14px;
  }
  .ft-hero .ft-lead {
    font-size: 16px;
  }
  .ft-hero .ft-ctas {
    margin-top: 20px;
  }
  .ft-lead {
    font-size: 17px;
  }
  .ft-body {
    font-size: 16px;
  }
  .ft-ctas {
    margin-top: 24px;
  }
  /* the pillars become a swipeable row of tabs over the picture */
  .ft-pillars {
    display: flex;
    gap: 8px;
    margin: 20px calc(var(--gut) * -1) 0;
    padding: 0 var(--gut);
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 0;
  }
  .ft-pillars::-webkit-scrollbar {
    display: none;
  }
  .ft-pillar,
  .ft-pillar + .ft-pillar {
    flex: none;
    width: 74%;
    padding: 16px;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px var(--line);
    overflow: hidden;
  }
  .ft-pillar[aria-selected="true"] {
    background: var(--panel);
  }
  .ft-pbar,
  .ft-pillar + .ft-pillar .ft-pbar {
    left: 0;
    top: auto;
    bottom: 0;
  }
  .ft-show {
    padding-right: 0;
    margin-top: 24px;
  }
  .ft-window {
    padding: 6px;
    border-radius: 18px;
  }
  .ft-window > .ft-pic {
    border-radius: 13px;
  }
  .ft-sec {
    padding-top: 80px;
  }
  .ft-logos {
    padding-top: 64px;
  }
  .ft-logos-row li {
    height: 72px;
  }
  .ft-head,
  .ft-spot,
  .ft-how,
  .ft-faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .ft-head {
    margin-bottom: 28px;
  }
  .ft-spot-copy {
    padding: 32px 24px 8px;
  }
  .ft-spot-media {
    height: 440px;
    padding-top: 28px;
  }
  .ft-spot-media--wide {
    height: auto;
    padding: 28px 0 0 24px;
  }
  .ft-grid,
  .ft-related {
    grid-template-columns: minmax(0, 1fr);
  }
  .ft-how {
    gap: 32px;
  }
  .ft-how-copy {
    position: static;
  }
  .ft-quote {
    padding: 28px;
  }
  .ft-quote blockquote {
    font-size: 22px;
  }
  .ft-faq {
    gap: 24px;
  }
  .ft-cta {
    margin: 80px 0 64px;
    padding: 64px 20px;
    border-radius: 24px;
  }
}

/* ── the /features hub ─────────────────────────────────────────────── */
.ft-hub-top {
  padding-bottom: 8px;
}
.ft-hub-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}
.ft-hub-jump a {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.66);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 6px 18px -10px rgba(40, 40, 90, 0.25);
}
.ft-hub-group {
  scroll-margin-top: 60px;
}
.ft-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.ft-hub-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 24px;
  border-radius: 24px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.ft-hub-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px var(--line2),
    0 24px 48px -28px rgba(0, 0, 0, 0.3);
}
.ft-hub-shot {
  margin-bottom: 10px;
  border-radius: 14px;
  overflow: hidden;
  background: #fafafa;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.ft-hub-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}
.ft-hub-card > .ft-small,
.ft-hub-card > .ft-rel-go {
  padding: 0 8px;
}
.ft-hub-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(64, 98, 255, 0.1);
  color: #4062ff;
  font-size: 12px;
  font-weight: 600;
}
@media (max-width: 767px) {
  .ft-hub-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── depth: sub capabilities at length ─────────────────────────────── */
.ft-deep {
  display: flex;
  flex-direction: column;
  gap: 104px;
}
.ft-deep-row {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 64px;
}
.ft-deep-row--flip .ft-deep-copy {
  order: 2;
}
.ft-deep-copy .ft-h2 {
  margin-bottom: 16px;
  font-size: 34px;
  line-height: 1.15;
}
.ft-points {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.ft-points li {
  display: flex;
  gap: 10px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink2);
}
.ft-points svg {
  flex: none;
  margin-top: 3px;
  color: var(--ink);
}
.ft-deep-media {
  position: relative;
  padding: 9px;
  border-radius: 26px;
  background:
    radial-gradient(
      60% 70% at 70% 30%,
      rgba(190, 150, 255, 0.22),
      transparent 70%
    ),
    radial-gradient(
      60% 70% at 20% 80%,
      rgba(120, 176, 255, 0.2),
      transparent 70%
    ),
    var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ft-deep-media > .ft-pic {
  border-radius: 18px;
  background: #fafafa;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 24px 50px -30px rgba(0, 0, 0, 0.35);
}
.ft-deep-media--tall {
  display: flex;
  justify-content: center;
  height: 520px;
  padding: 28px;
  box-sizing: border-box;
}
.ft-deep-media--tall > .ft-pic {
  box-shadow: none;
  background: transparent;
}

/* ── how it works: the scene's states ──────────────────────────────── */
.ft-walk {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-walk li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ft-walk-shot {
  margin-bottom: 12px;
  border-radius: 16px;
  overflow: hidden;
  background: #fafafa;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 16px 36px -24px rgba(0, 0, 0, 0.3);
}
.ft-walk .ft-small {
  margin-top: 0;
}

/* ── use cases: real Linkme pages ──────────────────────────────────── */
.ft-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.ft-case {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 20px;
  padding: 18px;
  border-radius: 24px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ft-case-page {
  display: block;
  height: 236px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 0 0 5px #fff,
    0 0 0 6px rgba(0, 0, 0, 0.08),
    0 18px 30px -18px rgba(0, 0, 0, 0.35);
}
.ft-case-page img {
  display: block;
  width: 100%;
  height: auto;
}
.ft-case-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}
.ft-case-brand {
  font-size: 13px;
  font-weight: 500;
  color: var(--mute);
}
.ft-case-copy .ft-rel-go {
  margin-top: auto;
}

@media (max-width: 1023px) {
  .ft-walk {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ft-deep-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .ft-deep-row--flip .ft-deep-copy {
    order: 0;
  }
}
@media (max-width: 767px) {
  .ft-deep {
    gap: 72px;
  }
  .ft-deep-copy .ft-h2 {
    font-size: 28px;
  }
  .ft-walk {
    grid-template-columns: minmax(0, 1fr);
  }
  .ft-deep-media--tall {
    height: 440px;
  }
  .ft-case {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
  }
  .ft-case-page {
    height: 190px;
  }
}

/* ══ the enterprise pass: outcomes, tour, industries, playbooks, teams,
   works across, compare, plans, story, resources ════════════════════ */

/* ── outcomes ─────────────────────────────────────────────────────── */
.ft-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.ft-outcome {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 26px;
  border-radius: 24px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ft-outcome .ft-h3,
.ft-outcome .ft-small {
  padding: 0 10px;
}
.ft-outcome .ft-h3 {
  font-size: 19px;
}
.ft-outcome-media {
  position: relative;
  aspect-ratio: 1.3;
  margin-bottom: 22px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(
      70% 80% at 80% 10%,
      rgba(236, 0, 140, 0.14),
      transparent 70%
    ),
    radial-gradient(
      70% 80% at 10% 90%,
      rgba(120, 160, 255, 0.22),
      transparent 70%
    ),
    #f3f2f7;
}
.ft-outcome[data-tone="1"] .ft-outcome-media {
  background:
    radial-gradient(
      70% 80% at 20% 10%,
      rgba(255, 190, 120, 0.3),
      transparent 70%
    ),
    radial-gradient(
      70% 80% at 90% 90%,
      rgba(190, 150, 255, 0.24),
      transparent 70%
    ),
    #f6f3ef;
}
.ft-outcome[data-tone="2"] .ft-outcome-media {
  background:
    radial-gradient(
      70% 80% at 80% 20%,
      rgba(120, 210, 190, 0.26),
      transparent 70%
    ),
    radial-gradient(
      70% 80% at 10% 90%,
      rgba(120, 160, 255, 0.2),
      transparent 70%
    ),
    #f1f5f4;
}
.ft-outcome-shot {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 22px;
  border-radius: 12px;
  overflow: hidden;
  background: #fafafa;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 18px 40px -18px rgba(0, 0, 0, 0.3);
}
.ft-outcome-media--tall .ft-outcome-shot {
  left: 50%;
  right: auto;
  top: 18px;
  bottom: 0;
  transform: translateX(-50%);
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

/* ── the product tour ─────────────────────────────────────────────── */
.ft-tour-in {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.ft-tour-tabs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.ft-tour-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font: inherit;
  text-align: left;
  color: var(--mute);
  cursor: pointer;
  transition: color 0.25s;
}
.ft-tour-tab:hover,
.ft-tour-tab[aria-selected="true"] {
  color: var(--ink);
}
.ft-tour-tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: 8px;
}
.ft-tour-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 16.5px;
  font-weight: 500;
}
.ft-tour-tab .ft-num {
  width: 22px;
}
.ft-tour-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.ft-tour-tab[aria-selected="true"] .ft-tour-bar {
  transform: scaleX(1);
}
.ft-tour-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.ft-tour-copy {
  max-width: 640px;
}
.ft-tour-copy .ft-h3 {
  font-size: 20px;
}
.ft-tour-window {
  padding: 9px;
  border-radius: 26px;
  background:
    radial-gradient(
      60% 70% at 85% 10%,
      rgba(236, 0, 140, 0.12),
      transparent 70%
    ),
    radial-gradient(
      60% 70% at 10% 90%,
      rgba(120, 160, 255, 0.2),
      transparent 70%
    ),
    var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ft-tour-stage > .ft-pic {
  border-radius: 18px;
  background: #fafafa;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 24px 50px -30px rgba(0, 0, 0, 0.35);
}
/* a phone tab keeps the screens' box, so the window never jumps */
.ft-tour-stage--tall {
  display: flex;
  justify-content: center;
  aspect-ratio: 964 / 788;
  padding: 22px 0;
  box-sizing: border-box;
}
.ft-tour-stage--tall > .ft-pic {
  box-shadow: none;
  background: transparent;
}
.ft-tour-stage:not([data-started]) .ft-ring {
  opacity: 0;
}
.ft-tour-stage[data-mode="rest"] .ft-cursor {
  opacity: 0;
}

/* ── use cases by industry ───────────────────────────────────────── */
.ft-inds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.ft-ind {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.ft-ind-media {
  position: relative;
  height: 230px;
  overflow: hidden;
  background:
    radial-gradient(
      60% 80% at 80% 0%,
      rgba(236, 0, 140, 0.12),
      transparent 70%
    ),
    radial-gradient(
      70% 80% at 0% 100%,
      rgba(120, 160, 255, 0.22),
      transparent 70%
    ),
    #efeef3;
}
.ft-ind-page {
  position: absolute;
  left: 50%;
  top: 26px;
  width: 168px;
  height: auto;
  margin-left: -84px;
  border-radius: 22px;
  box-shadow:
    0 0 0 5px #fff,
    0 0 0 6px rgba(0, 0, 0, 0.08),
    0 24px 40px -18px rgba(0, 0, 0, 0.4);
}
.ft-ind-logo {
  position: absolute;
  left: 18px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35);
}
.ft-ind-logo img {
  max-width: 46px;
  max-height: 34px;
  object-fit: contain;
}
.ft-ind-shot {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 24px;
  border-radius: 12px;
  overflow: hidden;
  background: #fafafa;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 18px 40px -18px rgba(0, 0, 0, 0.3);
}
.ft-ind-shot--tall {
  left: 50%;
  right: auto;
  top: 18px;
  height: 300px;
  transform: translateX(-50%);
  box-shadow: none;
  background: transparent;
}
.ft-ind-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 22px 24px 24px;
}
.ft-ind-copy .ft-small {
  margin: 0;
}
.ft-ind-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  margin-top: auto;
}
.ft-ind-links .ft-rel-go {
  margin-top: 14px;
}

/* ── playbooks ───────────────────────────────────────────────────── */
.ft-plays {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.ft-play {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: 24px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 24px 48px -36px rgba(0, 0, 0, 0.3);
}
.ft-play-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ft-play-tag {
  font-size: 13px;
  font-weight: 500;
  color: var(--pink);
}
.ft-play-kind {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--panel2);
  font-size: 12px;
  font-weight: 500;
  color: var(--mute);
}
.ft-play-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  background:
    radial-gradient(
      80% 90% at 100% 0%,
      rgba(236, 0, 140, 0.07),
      transparent 70%
    ),
    var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ft-play-l {
  font-size: 12px;
  font-weight: 500;
  color: var(--mute);
}
.ft-play-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.ft-chip {
  padding: 5px 11px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  font-size: 12.5px;
  font-weight: 500;
  color: #2f4fd8;
}
.ft-play-bubble {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-start;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 18px 18px 18px 6px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.ft-play-link {
  display: block;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--panel2);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink2);
}
.ft-play-steps {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pl;
}
.ft-play-steps li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink2);
  counter-increment: pl;
}
.ft-play-steps li::before {
  content: counter(pl);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

/* ── for teams and enterprise ─────────────────────────────────────── */
.ft-teams {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
  padding: 56px;
  border-radius: 32px;
  background:
    radial-gradient(
      50% 70% at 100% 0%,
      rgba(120, 160, 255, 0.2),
      transparent 70%
    ),
    radial-gradient(
      50% 60% at 0% 100%,
      rgba(236, 0, 140, 0.1),
      transparent 70%
    ),
    var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ft-teams-copy .ft-h2 {
  margin-bottom: 16px;
}
.ft-teams-list {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.ft-teams-list li {
  padding-left: 18px;
  border-left: 2px solid var(--line2);
}
.ft-teams-t {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
}
.ft-teams-list .ft-small {
  margin-top: 4px;
}
.ft-teams-media {
  border-radius: 18px;
  overflow: hidden;
  background: #fafafa;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 30px 60px -30px rgba(0, 0, 0, 0.35);
}
.ft-teams-media--tall {
  display: flex;
  justify-content: center;
  height: 520px;
  background: transparent;
  box-shadow: none;
}

/* ── works across ────────────────────────────────────────────────── */
.ft-works {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}
.ft-work {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 24px;
  box-shadow:
    1px 0 0 var(--line),
    0 1px 0 var(--line);
}
.ft-work .ft-small {
  margin-top: 2px;
  font-size: 14px;
}
.ft-work-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--panel);
  color: var(--pink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ft-work-mark img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
/* rows of four on a twelve column track; a short last row shares the
   full width, so seven networks read 4 plus 3 with no empty cell */
@media (min-width: 1024px) {
  .ft-works {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .ft-work {
    grid-column: span 3;
  }
  .ft-work:nth-child(4n + 1):nth-last-child(3),
  .ft-work:nth-child(4n + 1):nth-last-child(3) ~ .ft-work {
    grid-column: span 4;
  }
  .ft-work:nth-child(4n + 1):nth-last-child(2),
  .ft-work:nth-child(4n + 1):nth-last-child(2) ~ .ft-work {
    grid-column: span 6;
  }
  .ft-work:nth-child(4n + 1):last-child {
    grid-column: span 12;
  }
}
/* two columns: a lone last network takes the whole row */
@media (max-width: 1023px) {
  .ft-work:nth-child(2n + 1):last-child {
    grid-column: 1 / -1;
  }
}

/* ── before and with Linkme ───────────────────────────────────────── */
.ft-cmp {
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.ft-cmp-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  border-top: 1px solid var(--line);
}
.ft-cmp-row:first-child {
  border-top: 0;
}
.ft-cmp-row > span {
  display: flex;
  gap: 10px;
  padding: 20px 24px;
  font-size: 15px;
  line-height: 1.5;
}
.ft-cmp-head > span {
  padding: 16px 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mute);
  background: var(--panel);
}
.ft-cmp-head .ft-cmp-us {
  align-items: center;
  color: var(--ink);
  background:
    radial-gradient(
      80% 140% at 100% 0%,
      rgba(236, 0, 140, 0.1),
      transparent 70%
    ),
    var(--panel2);
}
.ft-cmp-us img {
  width: 18px;
  height: 18px;
}
.ft-cmp-job {
  font-weight: 500;
  color: var(--ink);
}
.ft-cmp-before {
  color: var(--mute);
}
.ft-cmp-after {
  color: var(--ink2);
  background: rgba(236, 0, 140, 0.025);
}
.ft-cmp-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 99px;
  background: rgba(236, 0, 140, 0.1);
  color: var(--pink);
}
.ft-cmp-ic svg {
  width: 13px;
  height: 13px;
}
.ft-cmp-ic--no {
  background: var(--panel2);
  color: var(--mute3);
}
.ft-cmp-m {
  display: none;
}

/* ── plans ───────────────────────────────────────────────────────── */
.ft-plans-band {
  padding: 56px;
  border-radius: 32px;
  background:
    radial-gradient(
      45% 70% at 12% 0%,
      rgba(120, 160, 255, 0.22),
      transparent 70%
    ),
    radial-gradient(
      40% 70% at 90% 10%,
      rgba(236, 0, 140, 0.14),
      transparent 70%
    ),
    radial-gradient(
      50% 60% at 50% 100%,
      rgba(255, 214, 130, 0.18),
      transparent 70%
    ),
    var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ft-plans-band .ft-head {
  margin-bottom: 36px;
}
.ft-plans-band .ft-link {
  margin-top: 14px;
}
.ft-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ft-plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px;
  border-radius: 22px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 20px 40px -32px rgba(0, 0, 0, 0.35);
}
.ft-plan--mid {
  background: var(--panel2);
  box-shadow: inset 0 0 0 1px var(--line3);
}
.ft-plan-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--mute);
}
.ft-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.ft-plan-price b {
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.ft-plan-price span {
  font-size: 14px;
  color: var(--mute);
}
.ft-plan-note {
  min-height: 20px;
  font-size: 13px;
  color: var(--mute);
}
.ft-plan-rows {
  display: grid;
  gap: 12px;
  margin: 14px 0 22px;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.ft-plan-rows li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ft-plan-row {
  font-size: 13.5px;
  color: var(--mute);
}
.ft-plan-yes,
.ft-plan-no {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 500;
}
.ft-plan-yes svg {
  color: var(--ink);
}
.ft-plan-no {
  color: var(--mute);
  font-weight: 400;
}
.ft-plan .ft-btn {
  justify-content: center;
  margin-top: auto;
}
.ft-plan-people {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mute);
}
.ft-plan-people a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: var(--ink);
}

/* ── customer story ──────────────────────────────────────────────── */
.ft-story {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: center;
  padding: 48px;
  border-radius: 32px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.ft-story-media {
  display: flex;
  justify-content: center;
  height: 560px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(
      60% 70% at 80% 10%,
      rgba(236, 0, 140, 0.14),
      transparent 70%
    ),
    radial-gradient(
      60% 70% at 10% 90%,
      rgba(120, 160, 255, 0.24),
      transparent 70%
    ),
    var(--panel);
}
.ft-story-page {
  display: block;
  width: 270px;
  height: max-content;
  margin-top: 44px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow:
    0 0 0 7px #fff,
    0 0 0 8px rgba(0, 0, 0, 0.08),
    0 40px 60px -30px rgba(0, 0, 0, 0.45);
}
.ft-story-page img {
  display: block;
  width: 100%;
  height: auto;
}
.ft-story-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 180px;
  margin-bottom: 20px;
  object-fit: contain;
  object-position: left center;
}
.ft-story-copy .ft-h2 {
  margin-bottom: 14px;
  font-size: 34px;
}
.ft-story-quote {
  margin: 28px 0 24px;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--panel);
}
.ft-story-quote blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.ft-story-quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--mute);
}
.ft-story-quote figcaption img {
  height: 26px;
  width: auto;
}
.ft-story-quote figcaption span {
  display: flex;
  flex-direction: column;
}
.ft-story-org {
  color: var(--mute);
}
.ft-story-quote figcaption b {
  color: var(--ink);
  font-weight: 500;
}
/* Triple Five Group has no logo of its own: its three malls head the
   quote, each a logo with its name (modules/customers/PropertyLogos) */
.ft-story-quote .ft-props {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 18px;
  row-gap: 12px;
  margin-bottom: 16px;
}
.ft-story-quote .ft-props-logo {
  display: block;
  flex: none;
  mix-blend-mode: multiply;
}
.ft-story-quote .ft-props-lockup {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
}
.ft-story-quote .ft-props-lockup .ft-props-logo {
  width: 30px;
  height: auto;
}
.ft-story-quote .ft-props-name {
  font-size: 12px;
  line-height: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--mute);
  white-space: nowrap;
}
.ft-story-quote .ft-props-ad {
  width: 137px;
  height: 30px;
  object-fit: cover;
  object-position: left center;
}
.ft-story-quote .ft-props-wem {
  width: 180px;
  height: 32px;
}
.ft-story .ft-ind-links .ft-rel-go {
  margin-top: 0;
}

/* ── resources ───────────────────────────────────────────────────── */
.ft-res {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.ft-res-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 24px;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition:
    background 0.2s,
    transform 0.25s;
}
.ft-res-card:hover {
  background: var(--panel);
  transform: translateY(-2px);
}
.ft-res-card > span {
  padding: 0 10px;
}
.ft-res-card .ft-rel-go {
  margin-top: auto;
  padding-top: 14px;
}
.ft-res-media {
  position: relative;
  height: 190px;
  margin-bottom: 14px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(
      70% 80% at 85% 10%,
      rgba(236, 0, 140, 0.12),
      transparent 70%
    ),
    radial-gradient(
      70% 80% at 10% 90%,
      rgba(120, 160, 255, 0.2),
      transparent 70%
    ),
    var(--panel);
}
.ft-res-shot {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 16px 30px -16px rgba(0, 0, 0, 0.3);
}
.ft-res-media--pages {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding-top: 22px;
  box-sizing: border-box;
}
.ft-res-media--pages img {
  width: 112px;
  height: max-content;
  border-radius: 16px;
  box-shadow:
    0 0 0 4px #fff,
    0 18px 30px -16px rgba(0, 0, 0, 0.35);
}
.ft-res-media--blog {
  display: grid;
  place-items: center;
}
.ft-res-media--blog img {
  width: 76px;
  height: 76px;
  padding: 18px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.35);
}

/* ── tablets and phones, enterprise pass ──────────────────────────── */
@media (max-width: 1023px) {
  .ft-outcomes,
  .ft-inds,
  .ft-plays,
  .ft-res,
  .ft-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ft-tour-in,
  .ft-teams,
  .ft-story {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .ft-works {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* the tabs become a swipeable row: it snaps to a tab's start, and
     both edges fade (the gutter on the left, 32px on the right, with
     32px of trailing room so the last tab never sits in the fade) */
  .ft-tour-tabs {
    flex-direction: row;
    gap: 8px;
    margin: 0 calc(var(--gut) * -1);
    padding: 0 32px 2px var(--gut);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    scrollbar-width: none;
    border-top: 0;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--gut),
      #000 calc(100% - 32px),
      transparent
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--gut),
      #000 calc(100% - 32px),
      transparent
    );
  }
  .ft-tour-tabs::-webkit-scrollbar {
    display: none;
  }
  .ft-tour-tab {
    flex: none;
    gap: 8px;
    scroll-snap-align: start;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--line2);
  }
  .ft-tour-tab[aria-selected="true"] {
    background: var(--ink);
    color: #fff;
    box-shadow: none;
  }
  .ft-tour-tab[aria-selected="true"] .ft-num {
    color: #ff7cc5;
  }
  .ft-tour-tab .ft-num {
    width: auto;
  }
  .ft-tour-label {
    font-size: 14.5px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .ft-tour-bar {
    display: none;
  }
}
@media (max-width: 767px) {
  .ft-outcomes,
  .ft-inds,
  .ft-plays,
  .ft-res,
  .ft-plans {
    grid-template-columns: minmax(0, 1fr);
  }
  .ft-tour-panel {
    gap: 14px;
  }
  .ft-tour-window {
    padding: 6px;
    border-radius: 18px;
  }
  .ft-tour-stage > .ft-pic {
    border-radius: 13px;
  }
  .ft-tour-stage--tall {
    aspect-ratio: 4 / 3.4;
    padding: 12px 0;
  }
  .ft-teams,
  .ft-plans-band,
  .ft-story {
    padding: 24px;
    border-radius: 24px;
  }
  .ft-teams-media--tall {
    height: 440px;
  }
  .ft-story-media {
    height: 440px;
  }
  .ft-story-page {
    width: 220px;
    margin-top: 32px;
  }
  .ft-story-copy .ft-h2 {
    font-size: 28px;
  }
  .ft-works {
    grid-template-columns: minmax(0, 1fr);
  }
  .ft-work {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 14px;
    padding: 18px;
  }
  .ft-work-mark {
    grid-row: span 2;
    margin: 0;
  }
  /* the compare table becomes one card per job */
  .ft-cmp-head {
    display: none;
  }
  .ft-cmp-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .ft-cmp-row > span {
    padding: 12px 18px;
  }
  .ft-cmp-job {
    padding-top: 20px !important;
    font-size: 16px !important;
  }
  .ft-cmp-m {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--mute);
  }
  .ft-cmp-after {
    padding-bottom: 20px !important;
  }
  .ft-ind-media {
    height: 210px;
  }
}

/* ══ v3: the template foundation (2026-10-08) ═══════════════════════════
   /Users/kedembaraness/Developer/linkme/v3/PLAN.md sections 0 and 2. The
   rail, section rhythm, the hero stage (a live kit scene in a business
   island, or the still fallback), static pillars, tour v2 and "Use cases
   by industry". Later rules here win over the older
   ones above on purpose. ════════════════════════════════════════════════ */

/* ── the rail: 1280 wide, no side lines (Kedem 2026-10-15) ─── */
.ft-rail {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}
/* sections sit right in the rail: a hairline between them spans it, and
   48px inside it the content is 1184 wide at 1440 */
.ft-rail > .ft-sec {
  padding: 128px var(--gut);
  border-top: 1px solid var(--line);
}
.ft-rail > .ft-logos {
  padding: 88px var(--gut) 112px;
}
.ft-rail > .ft-cta {
  margin: 0 var(--gut) 128px;
}
.ft-rail > .ft-sec + .ft-cta {
  margin-top: 0;
}
.ft-head {
  margin-bottom: 40px;
}
.ft-head .ft-body {
  max-width: 560px;
}

/* ── the hero ───────────────────────────────────────────────────────── */
.ft-top {
  padding: 0;
}
.ft-rail--top {
  z-index: 1;
  padding: 64px 0 0;
}
.ft-hero .ft-h1 {
  max-width: 1040px;
  margin-bottom: 18px;
  font-size: 56px;
}
.ft-hero .ft-lead {
  max-width: 640px;
  font-size: 18px;
  color: var(--mute);
}
.ft-stage-wrap {
  margin-top: 56px;
}

/* the live scene: a business island (.bz2 carries the kit's own CSS) */
.ft .bz2.bz2-island {
  min-height: 0;
  background: transparent;
}
.ft-island {
  position: relative;
}

/* the still fallback: the window is the business app window (radius 22,
   hairline rim, one soft lift); the camera, the ring and the cursor move
   together on one curve */
.ft-window {
  padding: 0;
  border-radius: 22px;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ft-window > .ft-pic {
  border-radius: 22px;
  background: #fafafa;
  box-shadow:
    0 0 0 1px rgba(16, 16, 20, 0.06),
    0 1px 2px rgba(16, 16, 20, 0.04),
    0 14px 34px -10px rgba(16, 16, 20, 0.12),
    0 44px 90px -30px rgba(16, 16, 20, 0.18);
}
.ft-show {
  margin: 0;
}
.ft-show .ft-pic img {
  transition:
    opacity 0.14s ease,
    left 1.2s var(--cam),
    top 1.2s var(--cam),
    width 1.2s var(--cam);
}
.ft-show .ft-cursor,
.ft-tour-stage .ft-cursor {
  transition:
    opacity 0.14s ease,
    left 1.4s var(--cam),
    top 1.4s var(--cam);
}
.ft-caption {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mute2);
  text-align: center;
  text-wrap: balance;
}
/* the live hero's caption (the kit's SceneSlot, p.cap) reads at 13px on
   every feature page, like the still one above; balanced, so a phone never
   leaves one word alone on the last line */
.ft .ft-island .bzs-cap {
  font-size: 13px;
  text-wrap: balance;
}
/* the hero stage's case line sits on the aurora, where the
   muted grey fades out, so it reads in the darker ink */
.ft .ft-hero-stage .bzs-case span {
  color: var(--ink2);
}
/* the Pages & QR pane labels: on the aurora in light, inside the white
   card in dark, where the scene's own grey already reads */
.ft:not([data-theme="dark"]) .ft-hero-stage {
  --ft-legend: var(--ink2);
}

/* the phone over the window's right edge: drawn at 1:1 (a 300 px phone
   world at 302 px), so its 13px text reads at 13px */
.ft-show .ft-phone {
  right: -48px;
  top: 64px;
  width: 302px;
}

/* ── the four pillars ───────────────────────────────────────────────── */
.ft-pillars {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.ft-pillar {
  padding: 24px 24px 8px 0;
}
.ft-pillar + .ft-pillar {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.ft-pillar + .ft-pillar .ft-pbar {
  left: 0;
}
.ft-pt {
  font-size: 16px;
}
.ft-pb {
  font-size: 14.5px;
}
.ft-pillar[aria-selected="true"] .ft-num {
  color: var(--ink);
}
/* static cells (the live hero): read as text, nothing to press */
.ft-pillars--static .ft-pillar {
  cursor: default;
}
.ft-pillars--static .ft-pt {
  color: var(--ink);
}
.ft-pillars--static .ft-pb {
  color: var(--mute);
}

/* ── tour v2: the tabs and the copy left, the stage right ─────────── */
.ft-tour-in {
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 32px;
}
.ft-tour-side {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.ft-tour-tab {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: 15px 2px;
}
.ft-tour-tab .ft-num {
  width: auto;
}
.ft-tour-tab[aria-selected="true"] .ft-num {
  color: var(--ink);
}
.ft-tour-label {
  font-size: 15.5px;
  gap: 8px;
}
.ft-tour-bar {
  transform: scaleX(1);
  animation: ft-fill var(--dwell, 20s) linear both;
}
.ft-tour-in[data-paused] .ft-tour-bar,
.ft-uc-in[data-paused] .ft-uc-bar {
  animation-play-state: paused;
}
.ft-tour-copy {
  max-width: none;
  padding-top: 4px;
  animation: ft-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ft-tour-copy .ft-h3 {
  font-size: 18px;
  line-height: 1.35;
}
.ft-tour-copy .ft-small {
  margin-top: 8px;
  font-size: 15px;
}
.ft-tour-window {
  padding: 0;
  border-radius: 22px;
  background: none;
  box-shadow: none;
}
.ft-tour-stage > .ft-pic {
  border-radius: 22px;
  background: #fafafa;
  box-shadow:
    0 0 0 1px rgba(16, 16, 20, 0.06),
    0 1px 2px rgba(16, 16, 20, 0.04),
    0 14px 34px -10px rgba(16, 16, 20, 0.12),
    0 44px 90px -30px rgba(16, 16, 20, 0.18);
}
.ft-tour-stage .ft-pic img {
  transition:
    opacity 0.14s ease,
    left 1.2s var(--cam),
    top 1.2s var(--cam),
    width 1.2s var(--cam);
}
/* a phone tab: the phone on a panel in the screens' box */
.ft-tour-stage--tall {
  border-radius: 22px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ── deep rows ──────────────────────────────────────────────────────── */
.ft-deep {
  gap: 112px;
}
/* the media column takes 717 px at 1440: a 1440 world's view up to about
   770 world px wide keeps its 14px text at 13px or more */
@media (min-width: 1024px) {
  .ft-deep-row {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  }
}
.ft-deep-copy .ft-h2 {
  font-size: 36px;
}
.ft-deep-media {
  padding: 0;
  background: none;
  box-shadow: none;
}
.ft-deep-media > .ft-pic {
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(16, 16, 20, 0.06),
    0 14px 34px -10px rgba(16, 16, 20, 0.12),
    0 44px 90px -30px rgba(16, 16, 20, 0.16);
}
.ft-deep-media--tall {
  border-radius: 22px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ── for teams and enterprise: the theatre grammar ─────────────────── */
.ft-teams-pic {
  max-width: 1000px;
  margin: 0 auto;
}
.ft-teams-pic > .ft-pic {
  border-radius: 22px;
  background: #fafafa;
  box-shadow:
    0 0 0 1px rgba(16, 16, 20, 0.06),
    0 1px 2px rgba(16, 16, 20, 0.04),
    0 14px 34px -10px rgba(16, 16, 20, 0.12),
    0 44px 90px -30px rgba(16, 16, 20, 0.18);
}
.ft-teams-pic--tall {
  display: flex;
  justify-content: center;
  max-width: none;
  height: 600px;
  padding: 28px;
  border-radius: 22px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  box-sizing: border-box;
}
.ft-teams-pic--tall > .ft-pic {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ft-teams-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.ft-teams-points li {
  padding: 24px 24px 0 0;
}
.ft-teams-points li + li {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.ft-teams-points .ft-small {
  margin-top: 6px;
}

/* ── use cases by industry (sections/UseCases.tsx) ─────────────────── */
.ft-uc-in {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.ft-uc-tabs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.ft-uc-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.ft-uc-tab img {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line2);
}
.ft-uc-tabt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ft-uc-tabt b {
  font-size: 15.5px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--mute);
  transition: color 0.25s ease;
}
.ft-uc-tabt span {
  font-size: 13px;
  line-height: 1.35;
  color: var(--mute);
}
.ft-uc-tab:hover .ft-uc-tabt b,
.ft-uc-tab[aria-selected="true"] .ft-uc-tabt b {
  color: var(--ink);
}
.ft-uc-tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: 8px;
}
.ft-uc-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform-origin: 0 50%;
  animation: ft-fill var(--dwell, 8s) linear both;
}
/* the phone is drawn big enough to read the real page (PLAN 0.1): its
   screen is 362 px for a page laid out at 390, so the page's 14px tile
   labels read at 13px at 1440; the window shows 700 px of the page from
   pageY. On phones the screen is 306 px (11px). */
.ft-uc-stage {
  display: grid;
  grid-template-columns: minmax(0, 378px) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  min-height: 660px;
  padding: 36px;
  border-radius: 24px;
  background:
    radial-gradient(
      60% 70% at 12% 10%,
      rgba(120, 160, 255, 0.14),
      transparent 70%
    ),
    radial-gradient(
      50% 60% at 95% 95%,
      rgba(255, 214, 130, 0.14),
      transparent 70%
    ),
    var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  box-sizing: border-box;
}
.ft-uc-phones {
  display: grid;
  justify-items: center;
}
.ft-uc-phone,
.ft-uc-shot {
  grid-area: 1 / 1;
  visibility: hidden;
}
.ft-uc-phone[data-on],
.ft-uc-shot[data-on] {
  visibility: visible;
  animation: ft-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ft-uc-phone {
  width: 100%;
  max-width: 378px;
  padding: 8px;
  border-radius: 46px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 40px 70px -34px rgba(16, 16, 20, 0.4),
    0 12px 24px -16px rgba(16, 16, 20, 0.2);
  box-sizing: border-box;
}
.ft-uc-screen {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 390 / 700;
  border-radius: 38px;
  overflow: hidden;
  background: #fff;
}
.ft-uc-screen img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.ft-uc-tile {
  position: absolute;
  border-radius: 14px;
  box-shadow:
    0 0 0 2px var(--blue),
    0 0 0 7px rgba(47, 111, 232, 0.16);
  pointer-events: none;
}
.ft-uc-shot {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #fafafa;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.ft-uc-cardwrap {
  min-width: 0;
  animation: ft-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ft-uc-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 30px 30px;
  color: var(--ink);
}
.ft-uc-who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ft-uc-who > img {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line2);
}
/* a group with no mark of its own (Triple Five Group): its three
   properties in the same round footprint, one on top, a pair below */
.ft-uc-trio {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
}
.ft-uc-tab .ft-uc-trio {
  width: 36px;
  height: 36px;
}
.ft-uc-trio img,
.ft-uc-tab .ft-uc-trio img {
  position: absolute;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow:
    0 0 0 1.5px #fff,
    0 0 0 2.5px var(--line2);
}
.ft-uc-trio img:nth-child(1) {
  top: 0;
  left: 21%;
}
.ft-uc-trio img:nth-child(2) {
  top: 42%;
  left: 0;
}
.ft-uc-trio img:nth-child(3) {
  top: 42%;
  left: 42%;
}
@media (max-width: 1023px) {
  .ft-uc-tab .ft-uc-trio {
    width: 30px;
    height: 30px;
  }
}
.ft-uc-whot {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-right: auto;
}
.ft-uc-whot b {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
}
.ft-uc-whot span {
  font-size: 13px;
  line-height: 1.35;
  color: var(--mute);
}
.ft-uc-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.ft-uc-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ft-uc-l {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--mute);
}
.ft-uc-chips2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* the kit chip's remove mark, quieter: the recipe is the point */
.ft-uc-chips2 svg {
  width: 16px;
  height: 16px;
  opacity: 0.55;
}
/* the top of the page still slides under a soft edge, like a scroll */
.ft-uc-screen::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 28px;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0));
  pointer-events: none;
}
.ft-uc-out {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.ft-uc-msg {
  max-width: 460px;
  padding: 12px 16px;
  border-radius: 18px 18px 18px 6px;
  background: #efefef;
  font-size: 15px;
  line-height: 1.45;
  color: #0a0a0a;
}
.ft-uc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line2);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--blue);
}
.ft-uc-link svg {
  flex: none;
}
.ft-uc-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 500;
}
.ft-uc-result svg {
  flex: none;
  margin-top: 3px;
}
.ft-uc-go {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  border-bottom: 1px solid var(--line3);
  transition:
    border-color 0.2s ease,
    gap 0.2s ease;
}
.ft-uc-go:hover {
  border-color: var(--ink);
  gap: 9px;
}

/* ── plans (kit/customers.ts PLANS, the pricing page's own plans) ──── */
.ft-plans-band {
  background: var(--panel);
}
.ft-plans[data-n="1"] {
  grid-template-columns: minmax(0, 420px);
}
.ft-plans[data-n="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ft-plan-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
}
.ft-plan-pick {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
}
.ft-plan-stats {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink2);
}

/* ── the sub nav: the page's item underlined, edges fade on phones ── */
.ft-subnav a[aria-current="page"] {
  border-bottom-color: var(--ink);
}

/* ── shared entrances ───────────────────────────────────────────────── */
@keyframes ft-rise {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ── tablets ────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .ft {
    --gut: 24px;
  }
  .ft-rail > .ft-sec {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .ft-hero .ft-h1 {
    font-size: 46px;
  }
  .ft-head {
    gap: 24px;
  }
}
/* tablets: the hero headline keeps 24px of slack, so Inter and its
   fallback break it in the same place and the stage under it holds
   still while the font loads (A2-19) */
@media (min-width: 768px) and (max-width: 1023px) {
  .ft-hero .ft-h1 {
    max-width: calc(100% - 24px);
  }
}
@media (max-width: 1023px) {
  .ft-tour-in,
  .ft-uc-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .ft-tour-side {
    gap: 18px;
  }
  .ft-tour-tab {
    display: inline-flex;
    gap: 8px;
    padding: 10px 16px;
  }
  .ft-tour-label {
    font-size: 14.5px;
  }
  .ft-tour-tab[aria-selected="true"] .ft-num {
    color: rgba(255, 255, 255, 0.7);
  }
  /* the use case chips become a sideways row: it snaps to a chip's
     start, and both edges fade (the gutter on the left, 32px on the
     right, with 32px of trailing room so the last chip never sits in
     the fade) */
  .ft-uc-tabs {
    flex-direction: row;
    gap: 8px;
    margin: 0 calc(var(--gut) * -1);
    padding: 0 32px 2px var(--gut);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    scrollbar-width: none;
    border-top: 0;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--gut),
      #000 calc(100% - 32px),
      transparent
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--gut),
      #000 calc(100% - 32px),
      transparent
    );
  }
  .ft-uc-tabs::-webkit-scrollbar {
    display: none;
  }
  .ft-uc-tab {
    flex: none;
    gap: 10px;
    scroll-snap-align: start;
    padding: 6px 16px 6px 6px;
    border: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--line2);
  }
  .ft-uc-tab[aria-selected="true"] {
    background: var(--ink);
    box-shadow: none;
  }
  .ft-uc-tab[aria-selected="true"] .ft-uc-tabt b {
    color: #fff;
  }
  .ft-uc-tab[aria-selected="true"] .ft-uc-tabt span {
    color: rgba(255, 255, 255, 0.7);
  }
  .ft-uc-tab img {
    width: 30px;
    height: 30px;
  }
  .ft-uc-tabt b {
    font-size: 14px;
    white-space: nowrap;
  }
  .ft-uc-tabt span {
    font-size: 12px;
    white-space: nowrap;
  }
  .ft-uc-bar {
    display: none;
  }
}

/* ── phones ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .ft {
    --gut: 16px;
  }
  .ft-rail > .ft-sec {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .ft-rail > .ft-logos {
    padding: 56px var(--gut) 72px;
  }
  .ft-rail > .ft-cta {
    margin-bottom: 72px;
  }
  /* no pill above the H1 (2026-10-16): the H1 sits 56px under the
     header, as on /solutions, /customers and /pricing phones */
  .ft-rail--top {
    padding-top: 56px;
  }
  .ft-hero .ft-h1 {
    font-size: 36px;
    line-height: 1.08;
  }
  .ft-hero .ft-lead {
    font-size: 16.5px;
  }
  .ft-body {
    font-size: 16px;
  }
  .ft-stage-wrap {
    margin-top: 32px;
  }
  .ft-head {
    gap: 14px;
  }
  /* the sub nav scrolls; its edges fade so a cut item reads as more */
  .ft-subnav-in {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 18px,
      #000 calc(100% - 28px),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 18px,
      #000 calc(100% - 28px),
      transparent 100%
    );
  }
  /* the still hero's pillars: a sideways row of tabs */
  .ft-pillars:not(.ft-pillars--static) {
    margin: 20px calc(var(--gut) * -1) 0;
    padding: 0 var(--gut);
    border-top: 0;
  }
  .ft-pillars:not(.ft-pillars--static) .ft-pillar,
  .ft-pillars:not(.ft-pillars--static) .ft-pillar + .ft-pillar {
    padding: 16px;
    border-left: 0;
  }
  /* static pillars: a two by two grid of cells */
  .ft-pillars--static {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 32px 0 0;
    padding: 0;
    overflow: visible;
    border-top: 1px solid var(--line);
  }
  .ft-pillars--static .ft-pillar,
  .ft-pillars--static .ft-pillar + .ft-pillar {
    width: auto;
    padding: 18px 14px 18px 0;
    border-radius: 0;
    box-shadow: none;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .ft-pillars--static .ft-pillar:nth-child(2n) {
    padding-left: 14px;
    border-left: 1px solid var(--line);
  }
  .ft-pb {
    font-size: 13.5px;
  }
  .ft-pillar + .ft-pillar {
    border-left: 0;
  }
  .ft-tour-copy .ft-h3 {
    font-size: 17px;
  }
  .ft-tour-stage > .ft-pic,
  .ft-window > .ft-pic,
  .ft-deep-media > .ft-pic {
    border-radius: 16px;
  }
  .ft-deep {
    gap: 72px;
  }
  .ft-deep-copy .ft-h2 {
    font-size: 28px;
  }
  .ft-uc-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-height: 0;
    padding: 20px 10px 10px;
    border-radius: 20px;
  }
  .ft-uc-phone {
    max-width: 320px;
    border-radius: 40px;
    padding: 7px;
  }
  /* a shorter window on the page: the tile still shows, the card
     follows sooner */
  .ft-uc-screen {
    aspect-ratio: 390 / 600;
    border-radius: 33px;
  }
  .ft-uc-ind {
    display: none;
  }
  .ft-uc-card {
    gap: 18px;
    padding: 20px 18px 22px;
  }
  .ft-uc-title {
    font-size: 20px;
  }
  .ft-uc-msg {
    font-size: 14.5px;
  }
  .ft-plans[data-n] {
    grid-template-columns: minmax(0, 1fr);
  }
  /* the still hero: the phone over the window is too small to read on a
     phone, so the window's crop carries the scene alone */
  .ft-show .ft-phone {
    display: none;
  }
  .ft-show:not(.ft-show--solo) .ft-caption {
    min-height: 0;
    padding-right: 0;
  }
  /* a phone tab in the tour: the beat's crop of the phone world fills the
     stage box like a screen does */
  .ft-tour-stage--tall {
    display: block;
    aspect-ratio: auto;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .ft-tour-stage--tall > .ft-pic {
    width: 100%;
    height: auto;
    border-radius: 16px;
    background: #fff;
    box-shadow:
      0 0 0 1px rgba(16, 16, 20, 0.06),
      0 14px 34px -10px rgba(16, 16, 20, 0.12);
  }
  /* a phone world in a deep row or the teams band: drawn about 1:1 (300
     px wide) so its 13px text reads, centred on its panel */
  .ft-deep-media--tall,
  .ft-teams-pic--tall {
    display: block;
    height: auto;
    padding: 20px 0;
  }
  .ft-deep-media--tall > .ft-pic,
  .ft-teams-pic--tall > .ft-pic {
    width: min(100%, 300px);
    height: auto;
    margin: 0 auto;
  }
  .ft-teams-points {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 32px;
  }
  .ft-teams-points li,
  .ft-teams-points li + li {
    padding: 18px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ft-tour-copy,
  .ft-uc-cardwrap,
  .ft-uc-phone[data-on],
  .ft-uc-shot[data-on] {
    animation: none;
  }
  .ft-pic img,
  .ft-ring,
  .ft-cursor {
    transition: none;
  }
}

/* ── r1 template fixes (dm-automations job, 2026-10-08; listed in
   handoffs/features-requests.md) ────────────────────────────────── */

/* every picture swap is a hard cut, carried by an 8px rise: the new
   picture is opaque on its first frame (it only shows once decoded), so
   no frame holds a blank stage or a ghost (PLAN 0.3) */
@keyframes ft-cut {
  0% {
    transform: translateY(8px);
  }
  100% {
    transform: none;
  }
}
.ft-tour-stage {
  animation: ft-cut 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ft-uc-phone[data-on],
.ft-uc-shot[data-on],
.ft-uc-cardwrap {
  animation: ft-cut 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* the active chip changes on the same frame as the card */
.ft-uc-tab img,
.ft-uc-tabt b,
.ft-uc-tabt span {
  transition: none;
}

/* the use case phone wears the hero phone's chrome: the status bar and
   the in-app address bar over the top of the page (cqw of the screen,
   which is 390 page px wide: 13px at 1440, 11px or more on a phone) */
.ft-uc-chrome {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8cqw;
  padding: 4.2cqw 0 2.6cqw;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  color: #0a0a0a;
  pointer-events: none;
}
.ft-uc-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  padding: 0 9cqw 0 10cqw;
  font:
    600 4cqw/1 -apple-system,
    "SF Pro Text",
    Inter,
    sans-serif;
  letter-spacing: -0.01em;
}
.ft-uc-sb svg {
  width: 14cqw;
  height: auto;
}
.ft-uc-url {
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
  height: 8cqw;
  padding: 0 4.2cqw;
  border-radius: 99px;
  background: #f2f2f2;
  font:
    500 3.6cqw/1 -apple-system,
    "SF Pro Text",
    Inter,
    sans-serif;
  white-space: nowrap;
}
.ft-uc-url svg {
  width: 2.6cqw;
  height: auto;
  opacity: 0.6;
}
.ft-uc-screen::after {
  display: none;
}

/* a flipped deep row whose picture is a wide view gets the wide column
   (Deep.tsx sets --wide for views over 560 world px; narrow views keep
   the narrow column and their own crops) */
@media (min-width: 1024px) {
  .ft-deep-row--flip.ft-deep-row--wide {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  }
}

/* colour is rationed (PLAN 0.1): the "With Linkme" column sits on the
   panel with ink checks; pink stays for alerts, counts and the Link mark */
.ft-cmp-head .ft-cmp-us {
  background: var(--panel2);
}
.ft-cmp-after {
  background: var(--panel);
}
.ft-cmp-ic {
  background: var(--ink);
  color: #fff;
}
.ft-cmp-ic--no {
  background: var(--panel2);
  color: var(--mute3);
}

@media (prefers-reduced-motion: reduce) {
  .ft-tour-stage,
  .ft-uc-phone[data-on],
  .ft-uc-shot[data-on],
  .ft-uc-cardwrap {
    animation: none;
  }
}

/* ── r1 template fixes (pages-and-qr's judges, every features page) ──
   One H2 size on every section at desktop: 40px (the deep rows were 36,
   the story 34, the rest 44). Deep rows: the copy starts level with the
   top of its picture (plus 40px) instead of floating in the middle of a
   tall picture. */
@media (min-width: 1024px) {
  .ft .ft-deep-copy .ft-h2,
  .ft .ft-story-copy .ft-h2,
  .ft .ft-teams-copy .ft-h2 {
    font-size: 40px;
    line-height: 1.12;
  }
  .ft-deep-row {
    align-items: start;
  }
  .ft-deep-copy {
    padding-top: 40px;
  }
}

/* tour: a tab whose beats carry their own camera (Tour.tsx data-cam)
   already frames the step, so its ring draws no veil over the screen */
.ft-tour-stage[data-cam] .ft-ring {
  box-shadow:
    0 0 0 2px var(--blue),
    0 0 0 8px rgba(47, 111, 232, 0.14);
}
/* phones: no desktop cursor in the tour (PLAN 0.4); the tap is the
   kit's TapRing */
@media (max-width: 767px) {
  .ft-tour-stage .ft-cursor {
    display: none;
  }
  .ft-tour-stage .ft-tap {
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border: 0;
    background: rgba(16, 16, 20, 0.14);
    box-shadow: 0 0 0 1.5px rgba(16, 16, 20, 0.22);
  }
}

/* use cases: the recipe as tags with no close cross; the tile ring
   draws 0.6 s after the case lands (opacity within 0.14 s, the settle
   carried by transform) and holds while the case shows */
.ft-uc-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px 0 11px;
  border-radius: 43px;
  background: rgba(228, 228, 231, 0.5);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.ft-uc-chips2 .ft-uc-tag svg {
  flex: none;
  width: 14px;
  height: 14px;
  opacity: 1;
  color: var(--mute);
}
.ft-uc-phone[data-on] .ft-uc-tile {
  animation: ft-uc-ring 0.36s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}
@keyframes ft-uc-ring {
  0% {
    opacity: 0;
    transform: scale(1.04);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* plans on phones: one sideways row (a card and a 24px peek of the
   next, snapping), not three stacked cards. The row runs to the band's
   edges (the band pads 24px on phones) and both edges fade into the band
   (24px on the left, 36px on the right, with 36px of trailing room so
   the last card never sits in the fade); the card is the row's content
   width less the gap and the 12px the right padding adds, which keeps
   the 24px peek (r1 fix: sized from 100vw, the card was wider than the
   row and the peek never showed) */
@media (max-width: 767px) {
  .ft-plans[data-n="3"] {
    display: flex;
    gap: 12px;
    margin: 0 -24px;
    padding: 4px 36px 14px 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 24px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 24px,
      #000 calc(100% - 36px),
      transparent
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 24px,
      #000 calc(100% - 36px),
      transparent
    );
  }
  .ft-plans[data-n="3"]::-webkit-scrollbar {
    display: none;
  }
  .ft-plans[data-n="3"] > .ft-plan {
    flex: 0 0 calc(100% - 24px);
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ft-uc-phone[data-on] .ft-uc-tile {
    animation: none;
  }
}

/* Integrator 2026-10-09 (features-hub "Needs shared change"): at 1440 the
   strip of eleven links clipped "Multi-location"; tighter items fit it.
   7px keeps the longest labels on one line. */
.ft-subnav-in {
  gap: 0;
}
.ft-subnav a {
  padding: 14px 7px;
}

/* ── phones: mobile pass 2026-10-15 (nothing here reaches 768px and up) ──
   Bigger tap areas, same look: each quiet text link grows to 40px tall
   and negative margins give the space back, so nothing moves. Border
   underlines become a 1px background line at the same spot. The 32px
   scene chips keep their pill and get a clear 40px hit box. */
@media (max-width: 767px) {
  /* the scene chips (the DM Automations case chips are already taller) */
  .ft .bz2 .bzs-chip:not(.bzs-chip--case) {
    position: relative;
  }
  .ft .bz2 .bzs-chip:not(.bzs-chip--case)::after {
    content: "";
    position: absolute;
    inset: -5px 0;
  }

  /* "See it on your brand" under every scene */
  .ft .bz2 .bzs-cta-row > .bzs-cta {
    padding-top: 9px;
    padding-bottom: 11px;
    margin-top: -9px;
    margin-bottom: -9px;
    border-bottom-width: 0;
    background: no-repeat left 0 bottom 9px / 100% 1px;
    background-image: linear-gradient(var(--line3), var(--line3));
  }
  .ft .bz2 .bzs-cta-row > .bzs-cta:hover {
    background-image: linear-gradient(var(--ink), var(--ink));
  }

  /* use case card links, underlined */
  .ft .ft-uc-go,
  .ft .mo-uc-go {
    padding-top: 9px;
    padding-bottom: 11px;
    margin-top: -9px;
    margin-bottom: -10px;
    border-bottom-width: 0;
    background: no-repeat left 0 bottom 10px / 100% 1px;
    background-image: linear-gradient(var(--line3), var(--line3));
  }
  .ft .ft-uc-go:hover,
  .ft .mo-uc-go:hover {
    background-image: linear-gradient(var(--ink), var(--ink));
  }
  .ft .ft-em-uc-links a {
    padding-top: 9px;
    padding-bottom: 11px;
    margin-top: -9px;
    margin-bottom: -10px;
    border-bottom-width: 0;
    background: no-repeat left 0 bottom 10px / 100% 1px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18));
  }
  .ft .ft-em-uc-links a:hover {
    background-image: linear-gradient(currentColor, currentColor);
  }

  /* the hub's "Explore" links (13.5px on an 18px line) */
  .ft.fh .fh-step-link {
    padding-top: 10px;
    padding-bottom: 12px;
    margin-top: 0;
    margin-bottom: -11px;
    border-bottom-width: 0;
    background: no-repeat left 0 bottom 11px / 100% 1px;
    background-image: linear-gradient(var(--line3), var(--line3));
  }
  .ft.fh .fh-step-link:hover {
    background-image: linear-gradient(var(--ink), var(--ink));
  }

  /* plain arrow links: 9px more above and below, given back */
  .ft .ft-link {
    padding-top: 9px;
    padding-bottom: 9px;
    margin-top: 13px;
    margin-bottom: -9px;
  }
  .ft .ft-plans-band .ft-link {
    margin-top: 5px;
  }
  .ft .mo-tm-ctas .ft-link {
    margin-top: 9px;
  }
  .ft .ft-plan-people a,
  .ft .lc-uc-foot a {
    padding-top: 9px;
    padding-bottom: 9px;
    margin-top: -9px;
    margin-bottom: -9px;
  }
  .ft .an-tour-cta,
  .ft .an-uc-cta {
    padding-top: 9px;
    padding-bottom: 10px;
    margin-top: -9px;
    margin-bottom: -10px;
  }
  .ft .an-uc-link {
    padding-top: 9px;
    padding-bottom: 10px;
    margin-top: 1px;
    margin-bottom: -10px;
  }
  .ft .lc-strip li a {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: -4px;
    margin-bottom: -10px;
  }
  /* the story's link.me address: grows down into the card's padding */
  .ft .ft-story .ft-ind-links .ft-rel-go {
    padding-bottom: 19px;
    margin-bottom: -19px;
  }

  /* Email Campaigns tour tabs (32px): the row and each tab grow 8px up */
  .ft .ft-emt-tabs {
    padding-top: 8px;
    margin-top: -8px;
  }
  .ft .ft-emt-tab {
    padding-top: 8px;
    margin-top: -8px;
  }
  /* Analytics "for teams": the two links wrapped onto two right-aligned
     rows 44px apart; on phones they sit left like the copy, 22px apart */
  .ft .an-teams-go {
    justify-content: flex-start;
    row-gap: 0;
  }

  /* a story with no quote: its buttons sat 4px under the last check
     line; they take the list's own 24px */
  .ft:not([data-feature="pages-and-qr"]) .ft-story .ft-points + .ft-ind-links {
    margin-top: 24px;
  }
}

/* Analytics use case crops on phones and tablets: the lazy page image has
   no height until it loads and sits far above the crop window, so WebKit
   never saw it in view and the crop stayed black. A placeholder ratio
   gives it its height before it loads; the real ratio takes over once
   it does. */
@media (max-width: 1023px) {
  .ft .an-uc-crop img {
    aspect-ratio: auto 390 / 2300;
  }
}

/* features-dark:start */
/* GENERATED by scripts/generate-page-dark.mjs: do not edit by hand,
   run the script again. The dark theme of /features and /features/<slug> (Kedem 2026-10-30: dark is the
   default on every page). */
.ft[data-theme="dark"] {
  --bg: #19191b;
  --ink: #f2f2f0;
  --ink2: #d6d6d2;
  --mute: #a3a39e;
  --mute2: #8f8f8a;
  --mute3: #7c7c77;
  --panel: #212123;
  --panel2: #28282b;
  --panel3: #303034;
  --line: rgba(255, 255, 255, 0.081);
  --line2: rgba(255, 255, 255, 0.138);
  --line3: rgba(255, 255, 255, 0.345);
}
.ft[data-theme="dark"] .ft-btn--dark {
  background: #f2f2f0;
  color: #0a0a0a;
}
.ft[data-theme="dark"] .ft-btn--soft:hover {
  background: #303034;
}
.ft[data-theme="dark"] .ft-hero .ft-lead {
  color: #a3a39e;
}
.ft[data-theme="dark"] .ft-pbar {
  background: #f2f2f0;
  color: #0a0a0a;
}
.ft[data-theme="dark"] .ft-plus::before,
.ft[data-theme="dark"] .ft-plus::after {
  background: #f2f2f0;
  color: #0a0a0a;
}
.ft[data-theme="dark"] .ft-outcome-media {
  background:
    radial-gradient(
      70% 80% at 80% 10%,
      rgba(236, 0, 140, 0.14),
      transparent 70%
    ),
    radial-gradient(
      70% 80% at 10% 90%,
      rgba(120, 160, 255, 0.22),
      transparent 70%
    ),
    #212123;
}
.ft[data-theme="dark"] .ft-outcome[data-tone="1"] .ft-outcome-media {
  background:
    radial-gradient(
      70% 80% at 20% 10%,
      rgba(255, 190, 120, 0.3),
      transparent 70%
    ),
    radial-gradient(
      70% 80% at 90% 90%,
      rgba(190, 150, 255, 0.24),
      transparent 70%
    ),
    #28282b;
}
.ft[data-theme="dark"] .ft-outcome[data-tone="2"] .ft-outcome-media {
  background:
    radial-gradient(
      70% 80% at 80% 20%,
      rgba(120, 210, 190, 0.26),
      transparent 70%
    ),
    radial-gradient(
      70% 80% at 10% 90%,
      rgba(120, 160, 255, 0.2),
      transparent 70%
    ),
    #212123;
}
.ft[data-theme="dark"] .ft-tour-bar {
  background: #f2f2f0;
  color: #0a0a0a;
}
.ft[data-theme="dark"] .ft-ind-media {
  background:
    radial-gradient(
      60% 80% at 80% 0%,
      rgba(236, 0, 140, 0.12),
      transparent 70%
    ),
    radial-gradient(
      70% 80% at 0% 100%,
      rgba(120, 160, 255, 0.22),
      transparent 70%
    ),
    #28282b;
}
.ft[data-theme="dark"] .ft-play {
  background: #222224;
}
.ft[data-theme="dark"] .ft-chip {
  background: #222224;
}
.ft[data-theme="dark"] .ft-play-bubble {
  background: #222224;
}
.ft[data-theme="dark"] .ft-play-steps li::before {
  background: #f2f2f0;
  color: #0a0a0a;
}
.ft[data-theme="dark"] .ft-plan {
  background: #222224;
}
@media (max-width: 1023px) {
  .ft[data-theme="dark"] .ft-tour-tab[aria-selected="true"] {
    background: #f2f2f0;
    color: #0a0a0a;
  }
}
.ft[data-theme="dark"] .ft-uc-bar {
  background: #f2f2f0;
  color: #0a0a0a;
}
@media (max-width: 1023px) {
  .ft[data-theme="dark"] .ft-uc-tab[aria-selected="true"] {
    background: #f2f2f0;
    color: #0a0a0a;
  }
}
.ft[data-theme="dark"] .ft-cmp-ic {
  background: #f2f2f0;
  color: #0a0a0a;
}
@media (max-width: 767px) {
  .ft[data-theme="dark"] .ft-tour-stage .ft-tap {
    background: rgba(255, 255, 255, 0.161);
  }
}
.fh[data-theme="dark"] .fh-tile {
  background: #222224;
}
.fh[data-theme="dark"] .fh-card {
  background: #222224;
}
.fh[data-theme="dark"] .fh-step-bar {
  background: #f2f2f0;
  color: #0a0a0a;
}
.fh[data-theme="dark"] .fh-ind {
  background: #222224;
}
.fh[data-theme="dark"] .fh-index-a {
  background: #222224;
}
.fh[data-theme="dark"] .fh-chip {
  background: #222224;
}
.ft[data-theme="dark"]
  :is(
    .ft-uc-phone,
    .ft-uc-chrome,
    .fh-leads,
    .ft-uc-card,
    .an-uc-card,
    .mo-uc-card,
    .mo-tm-page,
    .mo-tm-board
  ) {
  color-scheme: light;
  color: #0a0a0a;
  --bg: #ffffff;
  --ink: #0a0a0a;
  --ink2: #2b2b2a;
  --mute: #5f5f5c;
  --mute2: #6b6b68;
  --mute3: #8a8a87;
  --panel: #f7f7f5;
  --panel2: #f2f2f0;
  --panel3: #e8e8e6;
  --line: rgba(0, 0, 0, 0.07);
  --line2: rgba(0, 0, 0, 0.12);
  --line3: rgba(0, 0, 0, 0.3);
}
/* features-dark:end */