/* ===== Feature pages: features.html, features/all-features.html, features/<module>.html =====
   Loaded after blog.css. This file holds ONLY ports of components that already exist on the
   site, with their values unchanged, re-prefixed ft- and qualified by their root so shared
   rules can't be outranked on source order (the specificity trap in CLAUDE.md). The source of
   each block is named above it. The one exception is .ft-ph, a temporary media placeholder
   that goes away as the materials brief's screens and videos arrive. */

/* ---------- Tokens blog.css lacks (index.html :root) ---------- */
:root{
  --radius:22px; --hero:#dad6f8; --focus:#4632dc;
  --mo-fast:.2s; --mo-base:.3s; --mo-layer:.45s; --mo-slow:.5s;
  --mo-ease:ease; --mo-pop:cubic-bezier(.22,1,.36,1);
}

/* ---------- Section scaffolding (company.html .co-sec / .co-head / .co-eyebrow) ---------- */
.ft-sec{padding-block:clamp(36px,4.6vw,60px)}
.ft-head{max-width:900px;margin-bottom:clamp(28px,4vw,44px)}
.ft-head.center{margin-inline:auto;text-align:center}
.ft-head .ft-eyebrow{font-size:19px;font-weight:600;color:var(--muted);margin-bottom:14px}
.ft-head .ft-title{font-size:clamp(30px,4.6vw,56px);line-height:1.08;font-weight:600;letter-spacing:-.02em}
.ft-head .ft-lead{margin-top:20px;font-size:clamp(16px,1.7vw,19px);line-height:1.55;color:var(--muted);max-width:820px}
.ft-head.center .ft-lead{margin-inline:auto}

/* ---------- Hub top (index.html .modules / .mod-card) ---------- */
.ft-mods{position:relative;overflow:hidden;background:#000;color:#fff;padding-block:clamp(28px,4vw,44px) clamp(52px,7vw,90px);--focus:#868cff}
.ft-mods::before{content:"";position:absolute;top:0;left:0;right:0;height:min(960px,100%);z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.08) 32%,rgba(0,0,0,.6) 74%,#000 100%),
    url("assets/d966cba841024f41afe2f18dd56b48d6028fe7b6.webp") center top/cover no-repeat}
.ft-mods > .container{position:relative;z-index:1}
/* breadcrumb on a dark ground (customers.html .cust-hero .breadcrumb) */
.ft-mods .breadcrumb{margin-bottom:clamp(36px,7vw,84px)}
.ft-mods .breadcrumb a{color:#fff}
.ft-mods .breadcrumb .sep,.ft-mods .breadcrumb .cur{color:rgba(255,255,255,.7)}
.ft-mods .ft-mods-head{text-align:center;max-width:1060px;margin-inline:auto}
.ft-mods .ft-mods-eyebrow{font-weight:600;font-size:19px;color:rgba(235,235,245,.64);margin-bottom:16px}
.ft-mods .ft-mods-title{font-size:clamp(34px,6vw,70px);line-height:1.07;font-weight:600;letter-spacing:-.025em}
.ft-mods .ft-mods-body{max-width:834px;margin:clamp(22px,3vw,34px) auto 0}
.ft-mods .ft-mods-body p{font-size:clamp(16px,1.7vw,19px);line-height:1.5;color:rgba(255,255,255,.9)}
.ft-mods .ft-mods-cta{text-align:center;margin-top:clamp(32px,4vw,44px)}
.ft-mods .ft-mods-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(36px,5vw,56px)}
.ft-mods .ft-mod{background:#1c1c1e;border-radius:16px;padding:20px;aspect-ratio:1;display:flex;flex-direction:column;color:#fff;
  transition:transform .12s ease}
.ft-mods a.ft-mod:hover{transform:translateY(-3px)}
/* a module whose list is not published yet: the dark-bento card's outline (company.html .scard) */
.ft-mods .ft-mod.is-pending{background:transparent;border:1px solid rgba(255,255,255,.09)}
.ft-mods .ft-mod-ic{width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ft-mods .ft-mod-ic img{display:block;max-width:none}
.ft-mods .ft-mod h3{margin-top:auto;font-size:clamp(16px,1.7vw,19px);font-weight:600;line-height:1.28;letter-spacing:-.01em}
.ft-mods .ft-mod-meta{margin-top:6px;font-size:15px;line-height:20px;color:var(--on-dark)}
.ft-mods .ft-mod-chips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ft-mods .ft-mod-chips li{padding:2px 9px;border-radius:999px;background:rgba(235,235,245,.10);color:var(--on-dark);font-size:13px;font-weight:600;line-height:20px}
@media (min-width:680px){ .ft-mods .ft-mods-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* twenty modules sit as a 4x5 grid; the homepage's ten use 5x2 */
@media (min-width:1024px){ .ft-mods .ft-mods-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:679px){
  .ft-mods .ft-mods-head{text-align:left}
  .ft-mods .ft-mods-cta{text-align:left}
  .ft-mods .ft-mod{aspect-ratio:auto;min-height:200px}
}

/* ---------- Surfaces banner (index.html .platform-banner / .pb-app / .app-icon) ---------- */
.ft-surf{border-radius:32px;overflow:hidden;
  background:#bfe0e0 url("assets/5be8c0605c1142c2028b5430f4a067cb59c040f1.webp") center/cover no-repeat}
.ft-surf .ft-surf-apps{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(20px,5vw,72px);
  padding:clamp(28px,3.6vw,50px) 24px}
.ft-surf .ft-surf-app{display:flex;flex-direction:column;align-items:center;gap:16px;width:clamp(108px,13vw,150px);text-align:center}
.ft-surf .app-icon{width:clamp(82px,8.5vw,108px);aspect-ratio:1;border-radius:26%;position:relative;overflow:hidden;
  border:2px solid rgba(255,255,255,.75);box-shadow:0 12px 32px rgba(0,0,0,.16)}
.ft-surf .app-icon svg{position:absolute;inset:0;width:100%;height:100%}
.ft-surf .app-icon::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 42%);pointer-events:none}
.ft-surf .app-user{background:linear-gradient(180deg,#8474ff,#4632dc)}
.ft-surf .app-biz{background:linear-gradient(180deg,#6cbfff,#007af5)}
.ft-surf .app-office{background:linear-gradient(180deg,#b4b3be,#706f7a)}
.ft-surf .ft-surf-name{font-weight:600;font-size:clamp(15px,1.6vw,17px);color:#000;line-height:1.3}
.ft-surf .ft-surf-n{margin-top:-10px;font-size:15px;line-height:20px;font-weight:500;color:#000}

/* ---------- Module hero (index.html .hero ground, .hero-subtitle, .hero-phone, .hero-fade;
              company.html .co-hero h1 scale) ---------- */
.ft-mhero{position:relative;overflow:clip;
  background:radial-gradient(1200px 600px at 80% -10%,rgba(70,50,220,.18),transparent 60%),
    linear-gradient(180deg,var(--hero) 0%,#e7e4f7 62%,#e7e4f7 88%,var(--bg) 100%);
  padding-top:clamp(28px,4vw,44px)}
.ft-mhero .ft-mhero-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,44px);align-items:end}
/* the copy sits above the bottom fade, which is only there to melt the phone into the page */
.ft-mhero .ft-mhero-copy{position:relative;z-index:3;padding-bottom:clamp(40px,4.6vw,60px)}
.ft-mhero .breadcrumb{margin-bottom:clamp(36px,7vw,84px)}
.ft-mhero h1{font-size:clamp(34px,5.4vw,70px);line-height:1.08;font-weight:600;letter-spacing:-.025em}
.ft-mhero .ft-mhero-lead{margin-top:20px;max-width:560px;font-size:clamp(18px,2.2vw,25px);font-weight:500;line-height:1.36;color:#000}
.ft-mhero .ft-chips{margin-top:20px}
.ft-mhero .ft-mhero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(24px,3vw,34px)}
.ft-mhero .ft-mhero-media{position:relative;display:flex;justify-content:center;margin-bottom:-160px}
.ft-mhero .ft-mhero-media .ft-phone{width:clamp(240px,26vw,320px)}
.ft-mhero .ft-mhero-fade{position:absolute;left:0;right:0;bottom:0;height:clamp(140px,18vw,240px);z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,247,248,0) 0%,var(--bg) 100%)}
@media (min-width:880px){
  .ft-mhero .ft-mhero-grid{grid-template-columns:minmax(0,1fr) 460px;gap:clamp(48px,7vw,110px)}
}

/* availability chips (blog.css .ig-b.via pill) */
.ft-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ft-chips li{padding:2px 9px;border-radius:999px;background:rgba(var(--indigo-rgb),.09);color:var(--indigo);font-weight:600;font-size:15px;line-height:1.55}

/* phone screen (index.html .hero .hero-phone: radius + shadow) */
.ft-phone{display:block;width:100%;height:auto;border-radius:var(--radius);box-shadow:0 26px 46px -16px rgba(20,15,50,.5);background:var(--surface)}

/* back-office screen (index.html .hero .hero-dash: radius + shadow) */
.ft-bo{display:block;width:100%;height:auto;border-radius:clamp(12px,1.6vw,20px);box-shadow:0 40px 80px -30px rgba(40,30,90,.45);background:var(--surface)}

/* wide hero: copy above, the back-office screen below it (index.html .hero composition) */
.ft-mhero.is-wide .ft-mhero-copy{padding-bottom:0}
.ft-mhero.is-wide .ft-mhero-media{display:block;margin-bottom:-16%}
.ft-mhero.is-wide .ft-mhero-media .ft-bo{width:min(100%,960px);margin-inline:auto}
@media (min-width:880px){
  .ft-mhero.is-wide .ft-mhero-grid{grid-template-columns:1fr}
  .ft-mhero.is-wide .ft-mhero-copy{max-width:760px}
}
/* two phones side by side (white-label: the individual and business apps' own themes) */
.ft-mhero .ft-mhero-media.is-pair{gap:clamp(12px,2vw,24px);align-items:flex-start}
.ft-mhero .ft-mhero-media.is-pair .ft-phone{width:clamp(150px,17vw,220px)}
.ft-mhero .ft-mhero-media.is-pair .ft-phone + .ft-phone{margin-top:60px}

/* provider chips (index.html .ig-chip / .ig-tile), as a static wrap instead of the marquee */
.ft-providers{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ft-providers .ig-chip{display:inline-flex;align-items:center;gap:10px;padding:5px 20px 5px 5px;border-radius:999px;font-weight:600;font-size:clamp(14px,1.4vw,17px);white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.ft-providers .ig-tile{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
.ft-providers .ig-tile img{width:26px;height:26px;object-fit:contain}
.ft-providers .ig-tile.ig-full img{width:100%;height:100%}
.ft-providers .ig-tile.ig-aml{background:#fff}
.ft-providers .ig-tile.ig-aml img{width:46px;height:46px;max-width:none;object-fit:contain}

/* temporary media placeholder: holds a slot until its screen or video from the materials brief
   exists, so no <img> ever points at a missing file. Remove the class as media lands. */
.ft-ph{display:grid;place-items:center;aspect-ratio:402/874;padding:24px;text-align:center;
  border:1px dashed var(--line);font-size:15px;line-height:1.4;color:var(--muted)}
.ft-ph b{display:block;margin-bottom:6px;color:var(--ink);font-weight:600}
.ft-ph.is-wide{aspect-ratio:1280/956}
/* wide screens in the step panels bleed off the right edge, so keep the label in the visible part */
.ft-panel-shot.is-wide .ft-ph{justify-items:start;text-align:left;padding-left:8%}

/* ---------- Flow tabs (index.html .uc-stage / .uc-tabbar / .uc-pill / .uc-tab / .uc-panel) ---------- */
.ft-tabbar{position:relative;display:flex;flex-wrap:nowrap;gap:4px;padding:4px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ft-tabbar::-webkit-scrollbar{display:none}
.ft-tabbar .ft-pill{position:absolute;top:4px;left:0;height:44px;width:0;border-radius:999px;background:#4632dc;
  z-index:0;pointer-events:none;
  transition:transform .45s cubic-bezier(.34,.02,.2,1),width .45s cubic-bezier(.34,.02,.2,1),background-color .55s ease}
.ft-tabbar .ft-tab{position:relative;z-index:1;flex:0 0 auto;border:0;background:transparent;border-radius:999px;
  height:44px;padding:0 20px;font:600 15px/44px 'Inter',sans-serif;color:var(--muted);white-space:nowrap;
  cursor:pointer;transition:color .4s ease}
.ft-tabbar .ft-tab:hover{color:var(--ink)}
.ft-tabbar .ft-tab[aria-selected="true"],.ft-tabbar .ft-tab[aria-pressed="true"]{color:#fff}

.ft-flow .ft-stage{position:relative;max-width:400px;margin-inline:auto}
.ft-flow .ft-tabbar{margin-bottom:16px}
.ft-flow .ft-cards{position:relative;transition:height .5s cubic-bezier(.4,0,.2,1)}
.ft-flow .ft-panel{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column;
  border-radius:var(--radius-lg);overflow:hidden;background:var(--tint);
  opacity:0;transform:translateY(16px) scale(.995);pointer-events:none;
  transition:opacity .5s ease,transform .55s cubic-bezier(.4,0,.2,1)}
.ft-flow .ft-panel.is-active{opacity:1;transform:none;pointer-events:auto;z-index:1}
.ft-flow .ft-panel-inner{position:relative;z-index:1;padding:44px 20px clamp(400px,112vw,500px)}
.ft-flow .ft-panel h3{font-size:clamp(30px,9vw,36px);line-height:1.22;font-weight:600;letter-spacing:-.02em;color:#000}
.ft-flow .ft-panel-desc{margin-top:40px;font-size:19px;line-height:1.47;color:#000}
.ft-flow .ft-panel-list{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:16px}
.ft-flow .ft-panel-list li{position:relative;padding-left:38px;font-size:19px;line-height:1.47;color:#000}
.ft-flow .ft-panel-list li::before{content:"";position:absolute;left:0;top:1px;width:26px;height:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%23000'/%3E%3Cpath d='M7.3 13.4l3.4 3.4 7-7.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
/* the step's screen rises from the bottom of the panel and is clipped by it */
.ft-flow .ft-panel-shot{position:absolute;z-index:1;left:50%;top:auto;bottom:-120px;transform:translateX(-50%);width:clamp(220px,62vw,260px)}
.ft-flow .ft-panel-shot.is-wide{width:clamp(300px,88vw,420px);bottom:-60px}
@media (min-width:768px){
  .ft-flow .ft-stage{max-width:none;margin-inline:0}
  .ft-flow .ft-tabbar{position:absolute;top:40px;left:50%;transform:translateX(-50%);z-index:6;margin:0;
    max-width:calc(100% - 48px);justify-content:center;justify-content:safe center}
  .ft-flow .ft-panel-inner{min-height:600px;padding:120px 60px 52px;max-width:54%}
  .ft-flow .ft-panel h3{font-size:46px;line-height:1.12}
  .ft-flow .ft-panel-desc{margin-top:20px}
  .ft-flow .ft-panel-list{margin:26px 0 0;gap:15px}
  .ft-flow .ft-panel-list li{padding-left:30px}
  .ft-flow .ft-panel-list li::before{width:20px;height:20px;top:2px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/contain}
  .ft-flow .ft-panel-shot{left:auto;right:clamp(40px,8vw,120px);transform:none;top:120px;bottom:auto;width:300px}
  .ft-flow .ft-panel-shot.is-wide{right:-6%;width:52%}
}
@media (min-width:1080px){ .ft-flow .ft-panel-inner{max-width:50%} }
@media (min-width:768px) and (max-width:959px){
  .ft-flow .ft-tabbar{gap:2px}
  .ft-flow .ft-tab{padding:0 12px}
}

/* ---------- Highlight rows (index.html .feature) ---------- */
.ft-feature{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;padding-block:clamp(28px,4vw,44px)}
.ft-feature + .ft-feature{border-top:1px solid rgba(0,0,0,.07)}
/* no panel: the screen stands on the page with its own shadow, as the phones and the dashboard
   do in the homepage hero (index.html .hero .hero-phone / .hero-dash) */
.ft-feature .ft-media{display:grid;place-items:center}
.ft-feature .ft-media .ft-shot{width:min(56%,300px)}
.ft-feature .ft-media .ft-shot.is-wide{width:100%}
/* glow (on trial, login-security only): the homepage hero's lavender (index.html .hero, --hero) as a soft
   halo behind the screen, fading to nothing at its own edge so no panel outline shows */
.ft-feature .ft-media.is-glow{position:relative;isolation:isolate}
.ft-feature .ft-media.is-glow::before{content:"";position:absolute;inset:-6% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--hero),rgba(218,214,248,.55) 55%,rgba(218,214,248,0))}
.ft-feature .ft-media.is-glow:has(.is-wide)::before{inset:-24% -12%}
/* one column: the halo stays inside the column so it never pushes past the 20px page gutter */
@media (max-width:767px){ .ft-feature .ft-media.is-glow::before,.ft-feature .ft-media.is-glow:has(.is-wide)::before{left:0;right:0} }
/* a finished illustration keeps the homepage feature image's frame (index.html .feature .media img) */
.ft-feature .ft-media.is-cover{position:relative;overflow:hidden;aspect-ratio:460/560;border-radius:var(--radius-lg);
  box-shadow:0 24px 50px -28px rgba(40,30,90,.4)}
.ft-feature .ft-media .ft-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ft-feature .ft-copy h3{font-size:clamp(23px,3vw,30px);font-weight:600;margin-bottom:14px}
.ft-feature .ft-copy p{color:var(--muted);font-size:17px;margin-top:12px}
@media (min-width:768px){
  .ft-feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
  .ft-feature.reverse .ft-media{order:2}
}

/* ---------- Feature tables (blog.css article tables .post-table + matrix badges .ig-b) ---------- */
.ft-table-wrap{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.ft-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.ft-table th,.ft-table td{text-align:left;vertical-align:top;padding:14px 18px;border-bottom:1px solid var(--line)}
.ft-table thead th{background:#f6f6f8;font-weight:600;color:#111;font-size:14px;vertical-align:bottom}
.ft-table tbody tr:last-child th,.ft-table tbody tr:last-child td{border-bottom:0}
.ft-table tbody tr:nth-child(even) th,.ft-table tbody tr:nth-child(even) td{background:rgba(20,20,30,.022)}
.ft-table thead th:not(:first-child),.ft-table td{width:136px;text-align:center;vertical-align:middle}
.ft-table tbody th{font-weight:600;color:#111}
.ft-table .ft-fname{color:#111}
.ft-table a.ft-fname{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.ft-table a.ft-fname:hover{color:var(--indigo);text-decoration-color:currentColor}
.ft-table .ft-fdesc{display:block;margin-top:3px;font-weight:400;font-size:15px;color:var(--muted)}
.ft-b{display:inline-flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap}
.ft-b svg{flex:0 0 auto}
.ft-b.yes{color:var(--indigo)}
.ft-b.no{color:var(--muted)}
.ft-b .ft-b-label{display:none}
/* phone width: each row becomes a card listing only where the feature is available. The
   generator sets explicit table roles, because WebKit drops table semantics once display changes. */
@media (max-width:767px){
  .ft-table,.ft-table tbody,.ft-table tr,.ft-table tbody th,.ft-table td{display:block}
  .ft-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .ft-table tr{padding:14px 18px;border-bottom:1px solid var(--line)}
  .ft-table tbody tr:last-child{border-bottom:0}
  .ft-table tbody th,.ft-table td{padding:0;border:0;width:auto;text-align:left;background:none}
  .ft-table tbody tr:nth-child(even){background:rgba(20,20,30,.022)}
  .ft-table tbody tr:nth-child(even) th,.ft-table tbody tr:nth-child(even) td{background:none}
  .ft-table td{display:inline-block;margin:10px 6px 0 0}
  .ft-table td.is-no{display:none}
  .ft-table .ft-b.yes{padding:2px 9px;border-radius:999px;background:rgba(var(--indigo-rgb),.09);font-size:15px}
  .ft-table .ft-b.yes svg{width:15px;height:15px}
  .ft-table .ft-b .ft-b-label{display:inline}
}

/* ---------- Full list page ---------- */
/* light page top (blog.css .blog-top) */
.ft-top{background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);padding-top:28px}
.ft-top .breadcrumb{margin-bottom:clamp(28px,4vw,44px)}
.ft-top .ft-head{margin-bottom:0}
.ft-top h1.ft-title{font-size:clamp(34px,5.4vw,70px);line-height:1.08;font-weight:600;letter-spacing:-.025em}
.ft-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:20px;font-size:15px;color:var(--muted)}
.ft-meta a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ft-meta a:hover{color:var(--indigo)}
.ft-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted)}
/* an action that reads as a link (Print, Clear search): a real <button>, styled as .ft-meta a */
.ft-linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ft-linkbtn:hover{color:var(--indigo)}
/* toolbar: sticks under the site header (blog.css .site-header ground and hairline) */
.ft-tools{position:sticky;top:72px;z-index:40;background:rgba(247,247,248,.82);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(0,0,0,.06);margin-top:clamp(28px,4vw,44px)}
.ft-tools .container{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding-block:14px}
.ft-tools .ft-tabbar .ft-pill{background:var(--ink)}
/* search field (blog.css .sub-form input, bordered for a light ground) */
.ft-search{position:relative;flex:1 1 320px;max-width:420px}
.ft-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.ft-search input{width:100%;border:1px solid var(--line);border-radius:26px;padding:13px 24px 13px 48px;
  font:400 17px/1.4 'Inter',sans-serif;background:#fff;color:#111}
.ft-search input::placeholder{color:var(--muted)}
.ft-search input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ft-status{font-size:15px;color:var(--muted);margin-left:auto}
.ft-groups{padding-block:clamp(8px,2vw,16px) clamp(40px,6vw,72px)}
.ft-group{margin-top:clamp(36px,5vw,56px);scroll-margin-top:160px}
.ft-group[hidden],.ft-row[hidden]{display:none}
.ft-group-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ft-gicon{width:44px;height:44px;border-radius:14px;background:#1c1c1e;display:grid;place-items:center;flex:0 0 auto}
.ft-gicon img{height:24px;width:auto;max-width:28px}
.ft-group-head h2{font-size:clamp(21px,2.6vw,26px);line-height:1.22;font-weight:600;letter-spacing:-.01em}
.ft-group-head h2 a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.ft-group-head h2 a:hover{color:var(--indigo);text-decoration-color:currentColor}
.ft-gcount{margin-left:auto;font-size:15px;color:var(--muted);white-space:nowrap}
.ft-empty{padding-block:clamp(36px,5vw,56px);text-align:center;font-size:19px;color:var(--muted)}
/* on a phone the stacked toolbar is ~180px tall, a quarter of the screen: let it scroll away */
@media (max-width:767px){
  .ft-tools{position:static}
  .ft-group{scroll-margin-top:90px}
  .ft-search{max-width:none}
  .ft-status{margin-left:0}
}

/* ---------- Case-study cards (customers.html .cs-grid / .cs-card) ---------- */
.ft-cs-grid{display:grid;grid-template-columns:1fr;gap:20px}
.ft-cs-grid .ft-cs-card{border-radius:var(--radius-lg);padding:clamp(22px,2.4vw,28px);min-height:300px;display:flex;flex-direction:column;color:#0f0f0f;transition:transform .12s ease,box-shadow .2s ease}
.ft-cs-grid .ft-cs-card:hover{transform:translateY(-3px);box-shadow:0 24px 44px -26px rgba(0,0,0,.4)}
.ft-cs-grid .ft-cs-card.dark{color:#fff}
.ft-cs-grid .ft-cs-card.bordered{border:1px solid rgba(0,0,0,.1)}
.ft-cs-grid .ft-cs-logo{position:relative;width:76px;height:76px;border-radius:18px;overflow:hidden;flex:0 0 auto;
  border:1.5px solid rgba(255,255,255,.8);box-shadow:0 8px 22px rgba(8,40,70,.18);display:grid;place-items:center}
.ft-cs-grid .ft-cs-logo::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 72% at 10% 8%,rgba(255,255,255,.32),rgba(255,255,255,0) 70%)}
.ft-cs-grid .ft-cs-logo img{position:relative;width:52px;height:52px;object-fit:contain;display:block}
.ft-cs-grid .ft-cs-body{margin-top:auto;padding-top:28px}
.ft-cs-grid .ft-cs-body h3{font-size:clamp(20px,2vw,25px);font-weight:600;line-height:1.2}
.ft-cs-grid .ft-cs-desc{margin-top:10px;font-size:16px;line-height:1.42;opacity:.9}
.ft-cs-grid .ft-cs-meta{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:15px;font-weight:600}
.ft-cs-grid .ft-cs-tags{display:flex;gap:14px;flex-wrap:wrap}
.ft-cs-grid .ft-cs-year{margin-left:auto;opacity:.72}
@media(min-width:640px){ .ft-cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:980px){ .ft-cs-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- Article cards (company.html .insights / .icard) ---------- */
.ft-ins{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,32px)}
.ft-ins .ft-icard{display:flex;flex-direction:column}
.ft-ins .ft-icard .thumb{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:412/300;margin-bottom:20px;background:#e9e9ef}
.ft-ins .ft-icard .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.ft-ins .ft-icard:hover .thumb img{transform:scale(1.04)}
.ft-ins .ft-icard .by{font-size:15px;color:var(--muted);font-weight:600}
.ft-ins .ft-icard h3{margin:8px 0 0;font-size:clamp(20px,1.9vw,23px);font-weight:600;line-height:1.28;letter-spacing:-.01em}
.ft-ins .ft-icard:hover h3{color:var(--indigo)}
@media(min-width:760px){ .ft-ins{grid-template-columns:repeat(3,1fr)} }

/* related modules: the hub's module tile, on a light ground (index.html .pf-card surface) */
.ft-rel{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:clamp(36px,5vw,56px)}
.ft-rel .ft-rel-card{background:var(--surface);border:1px solid rgba(0,0,0,.06);border-radius:24px;padding:24px;
  display:flex;flex-direction:column;gap:16px;transition:transform .12s ease,box-shadow .2s ease}
.ft-rel a.ft-rel-card:hover{transform:translateY(-3px);box-shadow:0 24px 44px -26px rgba(0,0,0,.4)}
.ft-rel .ft-rel-card .ft-gicon{width:48px;height:48px}
.ft-rel .ft-rel-card h3{font-size:clamp(21px,2.2vw,25px);font-weight:500;line-height:1.3;letter-spacing:-.01em}
.ft-rel .ft-rel-card p{font-size:16px;line-height:1.5;color:#1a1a1a}
@media (min-width:640px){ .ft-rel{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- FAQ (index.html .faq accordion) ---------- */
.ft-faq{max-width:860px;margin-inline:auto}
.ft-faq .ft-faq-item{border-bottom:1px solid var(--line)}
.ft-faq .ft-faq-q{width:100%;background:none;border:0;padding:24px 40px 24px 0;text-align:left;font:600 clamp(17px,2vw,20px)/1.4 'Inter',sans-serif;
  cursor:pointer;position:relative;color:var(--ink)}
.ft-faq .ft-faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;color:var(--muted);font-size:17px}
.ft-faq .ft-faq-a p{padding-bottom:24px}
.ft-faq .ft-faq-a a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ft-faq .ft-faq-q::before,.ft-faq .ft-faq-q::after{content:"";position:absolute;top:50%;right:4px;
  background:var(--muted);border-radius:2px;transform:translateY(-50%);
  transition:transform var(--mo-fast) var(--mo-ease),opacity var(--mo-fast) var(--mo-ease)}
.ft-faq .ft-faq-q::before{width:18px;height:2px}
.ft-faq .ft-faq-q::after{width:2px;height:18px;right:12px}
.ft-faq .ft-faq-item.open .ft-faq-q::after{transform:translateY(-50%) scaleY(0);opacity:0}

/* ---------- Call-to-action band (customers.html .cust-cta) ---------- */
.ft-cta{position:relative;overflow:hidden;background:linear-gradient(180deg,#131317 0%,#1b1b22 100%);color:#fff;text-align:center;
  padding-block:clamp(56px,8vw,92px);--fx-x:50%;--fx-y:68%;--focus:#868cff}
.ft-cta .cta-lines{position:absolute;left:var(--fx-x);top:var(--fx-y);width:min(1720px,220%);aspect-ratio:2569.1/1460.9;
  transform:translate(-46.1%,-35.1%);z-index:0;pointer-events:none;
  background:url("assets/ad0b79522e238999a96eebd999cfb7566f6182a9.svg") 0 0/100% 100% no-repeat}
.ft-cta .cta-glow{position:absolute;left:var(--fx-x);top:var(--fx-y);width:clamp(360px,58vw,640px);height:clamp(200px,30vw,320px);
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;filter:blur(12px);
  background:radial-gradient(ellipse at center,rgba(16,16,20,.92) 0%,rgba(16,16,20,.5) 44%,rgba(16,16,20,0) 74%)}
.ft-cta .cta-veil{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,19,24,.72) 0%,rgba(19,19,24,0) 26%,rgba(19,19,24,0) 64%,rgba(20,20,27,.92) 100%)}
.ft-cta .container{position:relative;z-index:1}
.ft-cta h2{font-size:clamp(28px,4vw,46px);font-weight:600;letter-spacing:-.02em;max-width:15ch;margin-inline:auto}
.ft-cta .cta-btn{position:relative;margin-top:clamp(24px,3vw,36px);border:0;border-radius:36px;padding:16px 32px;font:600 20px/1 'Inter',sans-serif;color:#fff;cursor:pointer;
  background:linear-gradient(-90deg,#e64f89,#6e5bff);display:inline-block;box-shadow:0 10px 44px -8px rgba(120,92,255,.6),0 0 0 7px rgba(130,100,255,.08)}
.ft-cta .cta-btn:hover{opacity:.92}
/* the footer sits flush under the band, as on customers.html */
.ft-cta + .footer2,main + .footer2{margin-top:0}

/* ---------- Focus and motion (index.html) ---------- */
.ft-tab:focus-visible,.ft-faq-q:focus-visible,.ft-mod:focus-visible,.ft-cs-card:focus-visible,.ft-icard:focus-visible,
.ft-rel-card:focus-visible,.ft-cta .cta-btn:focus-visible,.ft-table a:focus-visible,.ft-meta a:focus-visible,.ft-group-head a:focus-visible,.ft-linkbtn:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- Print (full list): just the tables ---------- */
@media print{
  .site-header,.ft-tools,.ft-cta,.footer2,.skip,.ft-meta{display:none!important}
  .ft-top{background:none;padding-top:0}
  .ft-group{break-inside:avoid-page;margin-top:24px}
  .ft-group[hidden]{display:block!important}
  .ft-row[hidden]{display:table-row!important}
  .ft-table-wrap{border-color:var(--line)}
  .ft-gicon{display:none}
}