/* Homepage studio: live interface layers, with a static and reduced-motion layout. */
.home .qf-header__inner { --qf-shell:1440px; }
.home.qf-document .qf-header:not(.is-over-light):not(.has-open-menu) { background:#030d1e; }
.qf-studio-hero { --studio-ink:#08172f;position:relative;isolation:isolate;overflow:clip;padding:118px 0 16px;background:#030d1e;color:#f3f6fc; }
.qf-studio-hero__intro { position:relative;z-index:3;text-align:center; }
.qf-document .qf-studio-hero h1 { margin:0;font-family:"QF Sans",Inter,sans-serif;font-size:clamp(58px,5.85vw,90px);font-weight:730;line-height:1.01;letter-spacing:-.027em;word-spacing:.065em; }
.qf-studio-hero h1 > span { display:block; }
.qf-studio-hero h1 > span:last-child { color:#b2d4fc; }
.qf-document .qf-studio-hero__lede { max-width:650px;margin:20px auto 0;color:#d4dfef;font-size:clamp(17px,1.35vw,20px);line-height:1.45; }
.qf-studio-hero__actions { justify-content:center;gap:32px;margin-top:18px; }
.qf-studio-hero__actions .qf-button { min-height:52px;padding:14px 26px;font-size:16px; }
.qf-studio-hero__project { display:inline-flex;align-items:center;gap:14px;min-height:46px;color:#f3f6fc;font-size:16px;text-decoration:none; }
.qf-studio-hero__project { text-decoration:underline;text-underline-offset:8px;text-decoration-color:#7f91ab; }
.qf-studio-hero__project .qf-arrow { transform:rotate(-45deg);width:18px; }
.qf-studio-hero__project:hover { color:#b2d4fc;text-decoration-color:currentColor; }
.qf-studio-hero__canvas { position:relative;margin-top:27px; }
.qf-studio-hero::before { content:"";position:absolute;inset:35% 0 0;z-index:-1;background:radial-gradient(ellipse at 50% 65%,#0c2d58 0%,#081b37 32%,transparent 68%);pointer-events:none; }
.qf-studio-hero__grid { position:absolute;z-index:-1;inset:40% -15% -140px;opacity:.17;background-image:linear-gradient(#2761a6 1px,transparent 1px),linear-gradient(90deg,#2761a6 1px,transparent 1px);background-size:100% 52px,90px 100%;transform:perspective(520px) rotateX(63deg);transform-origin:50% 0;mask-image:linear-gradient(transparent,#000 25%,transparent 84%);pointer-events:none; }
.qf-system { --qf-shell:1360px;position:relative; }
.qf-system__layers { position:relative;perspective:1300px; }
.qf-system svg { width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0; }
.qf-system__plane { position:absolute;z-index:1;top:24px;bottom:12px;width:28%;border:1px solid #6684ab;border-radius:12px;background:linear-gradient(135deg,#1d3c65,#0d2342);box-shadow:inset 0 0 0 1px #fff1,0 20px 50px #0003;color:#e7effc;pointer-events:none; }
.qf-system__plane--connections { left:0;transform:rotateY(13deg) rotateZ(4deg);transform-origin:right center; }
.qf-system__plane--outcome { right:0;transform:rotateY(-13deg) rotateZ(-4deg);transform-origin:left center; }
.qf-system__plane-title { display:flex;gap:13px;align-items:center;height:66px;padding:16px 23px;border-bottom:1px solid #8eaad426;font-size:15px; }
.qf-system__plane ul { display:grid;gap:11px;list-style:none;margin:0;padding:16px 21px; }
.qf-system__plane li { position:relative;display:flex;align-items:center;gap:15px;padding:15px 16px;min-height:61px;border:1px solid #6684ab55;border-radius:6px;background:linear-gradient(120deg,#31537b55,#09204433);font-size:14px;line-height:1.4; }
.qf-system__plane--connections li { margin-right:28%; }
.qf-system__plane--connections li::after { content:"";position:absolute;left:100%;top:50%;width:80px;border-top:1px solid #77baff;opacity:.8; }
.qf-system__plane--connections li i { position:absolute;right:-3px;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#b4e9ff;box-shadow:0 0 8px #178cff; }
.qf-system__plane--outcome .qf-system__plane-title { padding-left:32%; }
.qf-system__plane--outcome ul { padding-left:32%; }
.qf-system__plane--outcome li { min-height:82px;gap:12px;padding:12px; }
.qf-system__plane--outcome li::before { content:"";position:absolute;right:100%;top:50%;width:75px;border-top:1px solid #77baff;opacity:.7; }
.qf-system__plane--outcome li::after { content:"";position:absolute;left:-3px;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#b4e9ff;box-shadow:0 0 8px #178cff; }
.qf-system__plane--outcome strong { display:block;font-size:13px;font-weight:650;line-height:1.4; }
.qf-system__plane--outcome li span { display:block;margin-top:4px;font-size:12px;line-height:1.5;color:#c6d7ef; }
.qf-system-ui { position:relative;z-index:3;width:60%;max-width:780px;min-width:650px;margin:0 auto;overflow:hidden;border:1px solid #e2eaf5;border-radius:16px;background:#f5f7fc;color:var(--studio-ink);box-shadow:0 4px 1px #aec2e23b,0 28px 60px -16px #000b;transform-origin:50% 100%; }
.qf-system-ui__bar { display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:53px;padding:8px 22px;border-bottom:1px solid #dbe3f0; }
.qf-system-ui__bar > span { display:flex;align-items:center;gap:12px;font-size:14px;font-weight:550; }
.qf-system-ui__bar > span svg { width:21px;color:#26436c; }
.qf-document .qf-system-ui__bar button { display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:36px;padding:8px 13px;border:1px solid #8cabfc;border-radius:5px;background:#fff;color:#1453de;font:550 12px/1.3 "QF Sans",sans-serif;cursor:pointer; }
.qf-system-ui__bar button .qf-arrow { width:16px;height:16px; }
.qf-system-ui__bar button:hover { background:#eaf1ff; }
.qf-system-ui__bar button:disabled { opacity:.6;cursor:wait; }
.qf-system-ui__body { padding:16px 24px 10px; }
.qf-document .qf-system-ui h2 { margin:0 0 15px;font:730 clamp(25px,2.2vw,32px)/1.15 "QF Sans",sans-serif;letter-spacing:-.03em;word-spacing:normal;color:var(--studio-ink); }
.qf-system-ui__panel { min-height:235px; }
.qf-system-ui__steps { display:grid;gap:9px;position:relative;margin:0 0 0 34px;padding:0;list-style:none; }
.qf-system-ui__steps::before { content:"";position:absolute;top:32px;bottom:32px;left:-23px;border-left:2px solid #5385ff; }
.qf-system-ui__steps li,.qf-system-ui__details li { position:relative;display:flex;align-items:center;gap:16px;min-height:72px;margin:0;padding:11px 14px;border:1px solid #dfe6f2;border-radius:8px;background:#ffffffaa; }
.qf-system-ui__number { position:absolute;right:calc(100% + 12px);top:calc(50% - 13px);display:grid;place-items:center;width:25px;height:25px;border:1px solid #7eacff;border-radius:50%;background:#1760ff;box-shadow:0 2px 5px #1760ff33;color:#fff;font-size:13px; }
.qf-system-ui__icon { display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border:1px solid #dde8fc;border-radius:7px;background:#e5eeff;color:#185bfa; }
.qf-system-ui__icon svg { width:29px;height:29px; }
.qf-system-ui__copy { min-width:0; }
.qf-document .qf-system-ui h3 { margin:0;font:700 16px/1.3 "QF Sans",sans-serif;letter-spacing:-.015em;word-spacing:normal;color:var(--studio-ink); }
.qf-document .qf-system-ui__copy p { margin:5px 0 0;font-size:13px;line-height:1.4;color:#223b60; }
.qf-system-ui__status { flex-shrink:0;min-width:73px;margin-left:auto;padding:5px 9px;border-radius:4px;background:#e3edff;color:#1453da;text-align:center;font-size:11px;line-height:1.25; }
.qf-system-ui__steps li.is-active { border-color:#6b96ff;background:#eff5ff; }
.qf-system-ui__steps li.is-waiting .qf-system-ui__status { background:#e9edf4;color:#5e6c80; }
.qf-system-ui__steps li.is-waiting .qf-system-ui__number { background:#dce6f9;border-color:#c4d3ed;box-shadow:none;color:#456081; }
.qf-system-ui__details { display:grid;gap:9px;margin:0;padding:0;list-style:none; }
.qf-system-ui__details li > svg { margin-left:auto;color:#326be4;width:21px; }
.qf-system-ui__details--connections { grid-template-columns:1fr 1fr;gap:12px; }
.qf-system-ui__details--connections li { align-items:flex-start;min-height:110px;gap:12px;padding:16px 12px; }
.qf-system-ui__details--connections .qf-system-ui__icon { width:35px;height:35px; }
.qf-system-ui__details--connections .qf-system-ui__icon svg { width:22px;height:22px; }
.qf-system-ui__details--connections li > svg { display:none; }
.qf-system-ui__tabs { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 13px 12px;overflow:hidden;border:1px solid #dce4f1;border-radius:6px; }
.qf-document .qf-system-ui__tabs button { display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 6px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:#172d50;font:550 12px/1.3 "QF Sans",sans-serif;cursor:pointer; }
.qf-system-ui__tabs button + button { border-left:1px solid #e0e6f0; }
.qf-system-ui__tabs button[aria-selected="true"] { border-bottom-color:#245dff;background:#fff;color:#1753e6; }
.qf-system-ui__tabs button:hover { background:#ebf1fd; }
.qf-system-ui__tabs svg { width:20px;height:20px; }
.qf-document .qf-system__caption { position:relative;z-index:3;margin:16px 0 0;text-align:center;color:#aebfd7;font-size:13px;line-height:1.5; }
.qf-studio-hero__rail { position:relative;z-index:3;display:flex;align-items:center;gap:24px;margin-top:18px;padding-top:9px;border-top:1px solid #33445d; }
.qf-document .qf-studio-hero__rail p { margin:0 auto 0 0;color:#acbdd4;font-size:13px;line-height:1.5; }
.qf-studio-hero__rail > a { display:inline-flex;align-items:center;gap:14px;min-height:44px;color:#c3d2e8;text-decoration:none;font-size:13px; }
.qf-studio-hero__rail > a svg { transform:rotate(90deg);width:17px; }
.qf-studio-hero__rail .qf-motion-control { border-left:1px solid #33445d;padding-left:24px; }
.qf-studio-hero :is(button,a,[tabindex]):focus-visible { outline:3px solid #5b94ff;outline-offset:4px; }
.qf-studio-hero .qf-system-ui :is(button,[tabindex]):focus-visible { outline-offset:-4px; }
@media(min-width:1001px) and (prefers-reduced-motion:no-preference) {
  .qf-motion-active .qf-system-ui { transform:translate3d(var(--qf-pointer-x,0px),var(--qf-art-y,0px),0) rotateY(var(--qf-pointer-tilt,0deg)); }
  .qf-motion-active .qf-system__plane--connections { transform:translate3d(calc(var(--qf-pointer-x,0px) * -.7),calc(var(--qf-art-y,0px) * .28),0) rotateY(13deg) rotateZ(4deg); }
  .qf-motion-active .qf-system__plane--outcome { transform:translate3d(calc(var(--qf-pointer-x,0px) * -.7),calc(var(--qf-art-y,0px) * .28),0) rotateY(-13deg) rotateZ(-4deg); }
  .qf-motion-active .qf-studio-hero__grid { transform:perspective(520px) translateY(calc(var(--qf-back-y,0px) * .25)) rotateX(63deg); }
}
@media(max-width:1200px) and (min-width:1001px) {
  .qf-system-ui { width:62%;min-width:610px; }
  .qf-system__plane-title { padding-inline:17px;font-size:13px; }
  .qf-system__plane ul { padding-inline:12px; }
  .qf-system__plane--outcome ul { padding-left:32%; }
  .qf-system__plane li { gap:10px;padding:12px 10px; }
  .qf-system__plane--outcome li { gap:7px; }
  .qf-system__plane--outcome li > svg { width:20px; }
  .qf-system-ui__steps li { gap:12px;padding-inline:10px; }
}
@media(max-width:1000px) {
  .qf-studio-hero { padding-top:126px; }
  .qf-document .qf-studio-hero h1 { font-size:clamp(52px,7.3vw,73px); }
  .qf-system__plane { display:none; }
  .qf-system-ui { width:100%;min-width:0;max-width:740px; }
  .qf-system { max-width:790px; }
  .qf-studio-hero__rail { gap:20px; }
}
@media(max-width:600px) {
  .qf-studio-hero { padding:116px 0 21px; }
  .qf-document .qf-studio-hero h1 { font-size:clamp(34px,10.7vw,59px);line-height:1.04;letter-spacing:-.035em;word-spacing:.025em; }
  .qf-studio-hero__intro { padding-inline:0; }
  .qf-document .qf-studio-hero__lede { max-width:410px;margin-top:22px;font-size:16px;line-height:1.55; }
  .qf-studio-hero__break { display:none; }
  .qf-studio-hero__actions { gap:9px;margin-top:23px;flex-direction:column; }
  .qf-studio-hero__actions .qf-button { width:100%;max-width:360px;min-height:52px;font-size:15px; }
  .qf-studio-hero__project { justify-content:center;font-size:14px;min-height:44px; }
  .qf-studio-hero__canvas { margin-top:26px; }
  .qf-document .qf-system { width:calc(100% - 28px);padding-inline:0; }
  .qf-system-ui { border-radius:11px; }
  .qf-system-ui__bar { min-height:51px;padding:10px 13px;gap:7px; }
  .qf-system-ui__bar > span { gap:7px;font-size:11px; }
  .qf-system-ui__bar > span svg { width:16px; }
  .qf-document .qf-system-ui__bar button { min-height:34px;gap:7px;font-size:10px;padding:7px 8px; }
  .qf-system-ui__bar button svg { display:none; }
  .qf-system-ui__body { padding:16px 13px 13px; }
  .qf-document .qf-system-ui h2 { margin-bottom:17px;font-size:24px;line-height:1.1;letter-spacing:-.04em; }
  .qf-system-ui__panel { min-height:302px; }
  .qf-system-ui__steps { margin-left:24px;gap:9px; }
  .qf-system-ui__steps::before { left:-15px; }
  .qf-system-ui__steps li { min-height:78px;display:grid;grid-template-columns:32px minmax(0,1fr);gap:5px 10px;padding:11px 10px; }
  .qf-system-ui__number { width:20px;height:20px;font-size:10px;right:calc(100% + 5px);top:calc(50% - 10px); }
  .qf-system-ui__icon { width:32px;height:34px;border-radius:5px; }
  .qf-system-ui__icon svg { width:22px;height:22px; }
  .qf-document .qf-system-ui h3 { font-size:14px;line-height:1.3; }
  .qf-document .qf-system-ui__copy p { font-size:12px;line-height:1.4;margin-top:4px; }
  .qf-system-ui__status { grid-column:2;justify-self:start;min-width:0;margin:0;font-size:10px;padding:3px 6px; }
  .qf-system-ui__tabs { margin:0 8px 9px; }
  .qf-document .qf-system-ui__tabs button { min-height:48px;gap:5px;padding-inline:4px;font-size:10px; }
  .qf-system-ui__tabs svg { width:14px;height:14px; }
  .qf-system-ui__details { gap:9px; }
  .qf-system-ui__details li { min-height:78px;padding:12px;gap:12px; }
  .qf-system-ui__details--connections { grid-template-columns:1fr;gap:7px; }
  .qf-system-ui__details--connections li { min-height:58px;padding:8px 11px;align-items:center; }
  .qf-system-ui__details--connections .qf-system-ui__icon { width:32px;height:32px; }
  .qf-document .qf-system__caption { max-width:280px;margin:19px auto 0;font-size:12px; }
  .qf-studio-hero__rail { flex-wrap:wrap;gap:10px;margin-top:24px;padding-top:17px; }
  .qf-document .qf-studio-hero__rail p { flex-basis:100%;font-size:12px; }
  .qf-studio-hero__rail > a { font-size:12px;min-height:36px; }
}