/* The mark unifies three paths around a shared hub. Generated artwork stays crisp at UI sizes. */
.brand{gap:12px;letter-spacing:0;line-height:1;flex-shrink:0}
.brand-mark{display:block;width:45px;height:45px;flex-shrink:0;background:var(--lime);mask:url('/ftl-symbol.png') 57% 49% / 140% no-repeat;-webkit-mask:url('/ftl-symbol.png') 57% 49% / 140% no-repeat}
.brand-wordmark{font-family:var(--display);font-size:34px;letter-spacing:-1.8px;font-weight:600;line-height:.9}
.brand .brand-sub{font-family:var(--font);font-size:8px;letter-spacing:1.55px;line-height:1.3;margin-top:7px;font-weight:550;color:#c3cdbb}
.footer-top .brand{align-items:center}.footer-top .brand-mark{width:54px;height:54px}.footer-top .brand-wordmark{font-size:41px}.footer-top .brand-sub{font-size:9px;letter-spacing:1.8px}
.network-hub>.brand-mark{width:54px;height:54px;display:block}
.mobile-message{display:none}
@media(max-width:800px){
  .motion-on .ticker{transform:none;width:100%;margin-block:0}
  .header{height:78px;padding-inline:6%;gap:20px}
  .header nav{display:none;position:absolute;top:77px;left:0;right:0;padding:25px 6%;background:#151b12;border-bottom:1px solid #35422b;flex-direction:column;gap:25px;font-size:16px}
  .header nav.open{display:flex}
  .header .brand{gap:9px}.header .brand-mark{width:40px;height:40px}.header .brand-wordmark{font-size:31px}.header .brand-sub{font-size:7.5px;letter-spacing:1.35px}
  .nav-cta{margin-left:auto;margin-right:0;padding:12px 15px;min-height:44px;font-size:13px;gap:15px}
  .menu{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;background:none;border:1px solid #3d4b33;border-radius:4px;padding:0;width:44px;height:44px;flex-shrink:0}
  .menu span{width:18px;height:1px;background:var(--text)}
  .hero-scroll,.motion-on .hero-scroll{height:auto;min-height:0}
  .hero,.motion-on .hero,.motion-off .hero{position:relative;top:auto;min-height:0;height:auto;max-height:none;display:flex;flex-direction:column;align-items:center;padding:39px 6% 26px;overflow:hidden}
  .hero-copy,.motion-on .hero-copy{max-width:520px;width:100%;text-align:center;transform:none!important;opacity:1!important;will-change:auto}
  .hero .eyebrow,.motion-on .hero .eyebrow{justify-content:center;gap:8px;font-size:11px;letter-spacing:1.1px;margin-bottom:24px;white-space:nowrap}
  .hero .spark{font-size:20px}
  .hero h1,.motion-on .hero h1{font-size:clamp(58px,11vw,88px);line-height:1;letter-spacing:-.055em;margin:0}
  .hero-line{padding-bottom:.06em;margin-bottom:-.06em}
  .hero .hero-description,.motion-on .hero .hero-description{font-size:16px;line-height:1.6;max-width:370px;margin:22px auto 0;color:#aebaa4}
  .desktop-message{display:none}.mobile-message{display:inline}
  .hero-actions,.motion-on .hero .hero-actions{margin:24px auto 0;display:flex;flex-direction:column;align-items:stretch;gap:16px;max-width:345px}
  .hero .button,.motion-on .hero .button{min-height:53px;font-size:15px;padding:15px 20px;justify-content:space-between;border-radius:6px}
  .hero .button>span{font-size:22px}
  .hero .text-link{font-size:14px;justify-content:center;padding:3px 0;min-height:32px}
  .hero .play{width:25px;height:25px;font-size:8px}
  .hero-note,.motion-on .hero .hero-note{display:none}
  .hero-art,.motion-on .hero-art,.motion-off .hero-art{position:relative;top:auto;bottom:auto;left:auto;right:auto;width:100%;max-width:490px;height:300px;min-height:0;flex-shrink:0;margin:10px 0 0;opacity:1;transform:none!important;will-change:auto}
  .hero-art #intelligence-core{width:100%;height:100%;inset:0}
  .hero-art .sculpture{width:140%;height:130%;top:-15%;left:-28%;object-position:center}
  .hero-art .floating-tag,.motion-on .hero-art .floating-tag{padding:8px 12px;gap:8px;border-radius:5px;font-size:11px;background:#162010ed;backdrop-filter:blur(8px);box-shadow:none}
  .hero-art .floating-tag small{display:none}
  .hero-art .agent-symbol{width:23px;height:23px;font-size:17px;border:0;background:none}
  .hero-art .mini-spark{display:none}
  .hero-art .tag-one,.motion-on .hero-art .tag-one{right:0;top:13%;bottom:auto;left:auto}
  .hero-art .tag-two,.motion-on .hero-art .tag-two{left:0;bottom:16%;right:auto;top:auto}
  .hero-art .tag-three,.motion-on .hero-art .tag-three{display:none}
  .hero-art .label-top{display:none}
  .hero-art .core-label,.motion-on .hero-art .core-label{display:flex;bottom:0;left:8%;right:8%;font-size:9px;letter-spacing:.8px;padding-top:12px;color:#889c77}
  .hero-next,.motion-on .hero-next{display:none!important}
  .hero-bottom,.motion-on .hero-bottom{position:relative;bottom:auto;left:auto;right:auto;margin-top:22px;justify-content:center;gap:0;width:100%;font-size:10px;letter-spacing:1.1px}
  .hero-bottom>span:last-child,.scene-meter,.motion-on .scene-meter{display:none}
  .hero-bottom .scroll-cue>span{margin-left:12px}
  .network-hub>.brand-mark{width:47px;height:47px}
  .motion-control{bottom:15px;right:14px;padding:10px 12px;min-height:40px;font-size:11px;gap:8px}
}
@media(max-width:560px){
  .header{height:72px;padding-inline:22px;gap:12px}
  .header nav{top:71px}
  .header .brand{gap:8px}.header .brand-mark{width:35px;height:35px}.header .brand-wordmark{font-size:29px}.header .brand-sub{font-size:7px;letter-spacing:1.1px}
  .header .nav-cta{display:none}
  .menu{margin-left:auto;width:42px;height:42px}
  .hero,.motion-on .hero,.motion-off .hero{padding:28px 24px 23px}
  .hero .eyebrow,.motion-on .hero .eyebrow{font-size:9px;letter-spacing:1px;margin-bottom:20px;gap:7px}
  .hero .spark{font-size:18px}
  .hero h1,.motion-on .hero h1{font-size:clamp(54px,15.2vw,66px);line-height:1.02;letter-spacing:-.055em}
  .hero .hero-description,.motion-on .hero .hero-description{max-width:330px;margin-top:19px;font-size:16px;line-height:1.55}
  .hero-actions,.motion-on .hero .hero-actions{max-width:340px;margin-top:22px;gap:10px}
  .hero .button,.motion-on .hero .button{font-size:14px;min-height:51px;padding:14px 18px}
  .hero .text-link{font-size:13px;min-height:30px}
  .hero-art,.motion-on .hero-art,.motion-off .hero-art{height:255px;max-width:370px;margin-top:2px}
  .hero-art .floating-tag,.motion-on .hero-art .floating-tag{font-size:10px;gap:5px;padding:6px 9px}
  .hero-art .tag-one,.motion-on .hero-art .tag-one{top:14%;right:0}
  .hero-art .tag-two,.motion-on .hero-art .tag-two{left:0;bottom:20%}
  .hero-art .core-label,.motion-on .hero-art .core-label{left:0;right:0;font-size:8px;letter-spacing:.5px;padding-top:10px}
  .hero-bottom,.motion-on .hero-bottom{margin-top:17px;font-size:9px}
  .network-hub>.brand-mark{width:40px;height:40px}
  .motion-control{width:38px;height:38px;min-height:38px;justify-content:center;padding:9px;bottom:13px;right:13px}
  #motion-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media(max-width:370px){
  .hero,.motion-on .hero,.motion-off .hero{padding-inline:20px}
  .hero .eyebrow,.motion-on .hero .eyebrow{font-size:8px;letter-spacing:.8px}
  .hero h1,.motion-on .hero h1{font-size:clamp(48px,15vw,56px)}
  .hero .hero-description,.motion-on .hero .hero-description{font-size:16px}
  .hero-art,.motion-on .hero-art,.motion-off .hero-art{height:235px}
}